CSS（文本、字体、盒子）
一、文本属性
1、文本颜色
color属性被用来设置文字的颜色
2.文本对齐
text-align属性用来设置元素内文本内容的水平对齐方式
left：左对齐（默认值）right：右对齐 center：居中对齐
3、文本装饰
text-decoration 属性用来设置或删除文本的装饰。可以给文本添加下划线（underline）、删除线（line-through）、上划线（overline），但从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a {text-decoration:none;}
4、文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
p {text-indent : 2em;}
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
5、行间距
line-height属性用于设置行间的距离，可以控制文字与行之间的距离
6、文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
其余有关设置字符间距、设置文本方向、设置文本阴影、设置元素中空白的处理方式等搜索菜鸟教程
二、字体
1、字体系列：font-family 属性设置文本的字体系列。
注意事项：
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体加引号
2、字体大小：font-size 属性设置文本的大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
标题标签比较特殊，需要单独指定文字大小
注：可以使用百分比和em组合
设置
元素的默认字体大小的是百分比：body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
3、字体粗细
font-weight属性设置文本字体的粗细
font-weight：normal | bold（粗体） | bolder（特粗体） | lighter（细体） | number
4、文字样式
font-style：主要是用于指定斜体文字的字体样式属性
p.normal {font-style:normal;}/*正常*/
p.italic {font-style:italic;}/*斜体*/
三、盒子
盒子模型（box model）：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
1、边框（border）
语法：border: border-width(定义边框粗细) || border-style |（边框样式）| border-color（边框颜色）
①边框样式
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
②简写属性（没有顺序）
如：border:5px solid red;
③单独设置边框的各边
border-top：1px solid red;
④border-collapse（表格细线边框）
2、内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
padding-left / right / top / bottom
简写属性：
| 值的个数 | 表达意思 |
| padding：5px | 1个值，代表上下左右都有5像素内边距 |
| padding：5px 10px | 2个值，代表上下内边距5像素，左右内边距10像素 |
| padding：5px 10px 20px | 3个值，代表上内边距5像素，左右10像素，下20像素 |
| padding：5px 10px 20px 30px | 4个值，顺时针 |
注：如果盒子已经有了宽度和高度，此时在指定内边框，会撑大盒子，如果保证盒子跟预想中的效果一样，则让width/height减去多出来的内边距大小即可
3、外边距（margin）
①巧妙运用外边距使块级盒子水平居中，满足条件如下：盒子必须指定了宽度+盒子左右的外边距都设置为auto
常见写法：
- margin-left:auto; margin-right:auto;
- margin:auto；
- margin：0 auto；
注：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可（理解：把行内块元素和行内元素看作文本内容）
②嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义内边距
- 可以为父元素添加overflow：hidden
- 给盒子设置浮动、固定、绝对定位，详细搜索
4、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的值也不同，因此我们在布局前，首先要清除下网页元素的内外边距
* {
padding：0；
margin：0；
}
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以