1、text-align
作用：设置标签里面的内容水平对齐方式
text-align：left； //文本左对齐（默认）
text-align：center； //文本居中对齐
text-align：right； // 文本右对齐
2、font-size
作用：设置字体大小
font-size：20px；
font-size：1.2rem；
font-size：80%；
3、font-weight
作用：设置字体粗细
font-weight： bold； // 加粗，相当于700
font-weigh：100-900；
font-weight：bolder； // 加粗，相当于900
font-weight：lighter； // 变细
font-weight：normal； // 正常，相当于400
4、font-style
作用：设置字体是否倾斜
font-style： italic； // 斜体
font-style：normal； // 正常
5、text-decoration
作用：设置文本上的线条
text-decoration：underline； // 给文本设置下划线
text-decoration：overline； // 给文本设置上划线
text-decoration：line-through； // 给文本设置中间线
text-decoration：none； // 去掉文本上的线
6、text-indent
作用：设置文本首行缩进
text-indent：-30px； // 向左缩进
text-indent：30px； // 向右缩进
text-indent：2rem； // 向右缩进
7、background
（1）background-color：背景颜色
background-color：red；
（2）background-image：背景图片
background-image：url(../img/pic.png)；
（3）background-repeat：背景图片平铺
background-repeat：no-repeat； // 不平铺
background-repeat：repeat-x； // 水平方向平铺
background-repeat：repeat-y； // 垂直方向平铺
background-repeat：repeat； // 水平方向和垂直方向都平铺（默认）
（4）background-position：背景图片的位置（水平位置 垂直位置）
background-position：20px 30px； // 使用像素值来调整位置
background-position：left center； // 使用方向来调整位置。水平方向：left，center，right；垂直方向：top，center，bottom
background-position：center bottom+30px； // 混合使用
background-position：100px bottom； // 混合使用
（5）background-size：背景图片大小（水平大小 垂直大小）
background-size：50px 80px； // 背景图片宽50高80
background-size：100px； // 背景图片宽100高度随宽度自适应
background-size：cover； // 背景图片按照自身宽高比例进行放大，放大至填充标签的整个背景，如果图片宽高比和填充的标签宽高比相同，正好填充满标签容器，如果不相同，会导致有一部分的背景图片无法显示
background-size：contain； // 背景图片按照自身宽高比例进行放大，放大至正好包含在标签里面，如果图片宽高比和填充的标签宽高比相同，正好填充满标签容器，如果不相同，会导致有一部分标签的背景没有背景图片
（6）背景样式缩写
background： pink url(.../img/pic.png) no-repeat center top/300px 100px;
8、inherit：继承
不是所有的样式都会自动继承，比如说width、height、background这些样式不会自动继承，那么会自动继承的样式一般是与字体文本相关的样式比如Color、font-size、font-style、font-weight、text-indent、text-decoration、Text-align等这些样式会自动继承给后代标签
9、盒子模型
（1）盒子模型的结构
内容层：width height
padding层：padding-top，padding-bottom，padding-left，padding-right
border层：border-top，border-bottom，border-left，border-right
值：1px solid red；（dotted：圆点虚线；dashed：矩形虚线）
margin层：margin-top，margin-bottom，margin-left，margin-right
（2）margin在垂直方向的重叠问题
第一种：兄弟关系的重叠
当两个标签的margin在垂直方向上相遇时就会产生重叠，重叠以后会以较大的margin值作为两个标签之间的margin值
第二种：父子关系的重叠
父标签在没有设置border，padding的情况下，如果在垂直方向设置了margin就会与子标签在垂直方向的margin相遇产生重叠
如果不想产生重叠可以给父标签加border或者padding
（3）IE盒子模型与标准盒子默认的区别
IE盒模型和标准盒模型都有内容层、padding、border、margin，不同的在于IE盒模型的width、height包含内容层、padding层、border层的尺寸；而标准盒模型的width、height只包含内容层的尺寸
IE盒模型和标准盒模型之间的转换
box-sizing：border-box； // 呈现IE盒模型
box-sizing：content-box； // 呈现标准盒模型
10、块级标签水平对齐方式
margin-left：auto； // 标签靠右对齐
margin-right：auto； // 标签靠左对齐
margin：auto； // 标签居中对齐
11、line-height
（1）实现文本垂直居中
当行高和标签高度相同时就可以实现文本垂直居中
（2）实现行与行之间的距离
（3）行高可以撑开块级标签和内联块标签的高度，不能撑开内联标签的高度
12、min-width、max-width
min-width: 600px; 标签的最小宽度不能小于600px、最大宽度无限制
说明标签的宽度范围为：600px~无限制
max-width: 500px; 标签的最大宽度不能超过500px,最大宽度只能是500px,最小宽度可以到0
说明标签的宽度范围为:0~500px 之间
13、float（浮动）
作用：设置标签靠左或者靠右对齐
靠左边对齐叫左浮动，样式写法：float：left；
靠右边对齐叫右浮动，样式写法：float：right；
浮动的特点：
（1）内联标签和内联块标签加了浮动后display默认值会变成block，可以设置块级标签的样式
（2）浮动的标签不会独占一整行，没有设置width时，宽度由内容撑开
（3）浮动的标签后面如果有一个没有加浮动的块级标签，这个没有浮动的块级标签会认为浮动的标签不存在，所以会产生重叠
（4）在一行中有浮动的标签也有一些没有浮动的标签（如：内联标签、内联块标签），在一行空间没有占满的情况下，这些没有浮动的标签会与浮动的标签显示在同一行，不过拥有左浮动的标签会显示在最左边，拥有右浮动的标签会显示在最右边；内联标签和内联块标签会识别浮动的标签，不会产生重叠
（5）没有浮动的块级标签内部如果有一个浮动的子标签，那么这个没有浮动的父标签会认为浮动的子标签不存在，就会造成父标签的高度塌陷，变成0
（6）块级标签加了浮动以后，再使用margin：0 auto；是不能实现水平居中的
清除浮动：
clear：left； // 清除左浮动
clear：right； // 清除右浮动
clear：both； // 清除左右浮动
使用clear清除浮动需要注意的问题：
（1）带有clear样式的标签必须是块级标签，如果是其它类型的标签可能会导致clear样式失效
（2）带有clear样式的标签不能是浮动的标签，否则clear样式会失效
（3）带有clear样式的标签最好不要设置margin-top值，否则会出现混乱现象
14、显示和隐藏
（1）隐藏标签
display：none； // 这种隐藏不占据空间
visibility：hidden； // 这种隐藏占据空间，标签隐藏了，但是所占据的位置还在
opacity：0； // 这种隐藏占据空间。支持IE9+
filter：alpha(opacity=0-100) // 支持IE6-8
（2）溢出隐藏
属性：overflow：水平内容溢出和垂直内容溢出处理
属性：overflow-x：水平内容溢出处理
属性：overflow-y：垂直内容溢出处理
属性值：hidden； // 隐藏溢出的内容
属性值：visible； // 显示溢出的内容
属性值：scroll； // 溢出的内容可以通过拖动滚动条显示，没有内容溢出也会出现滚动条
属性值：auto； // 溢出的内容可以通过拖动滚动条显示，没有内容溢出不会出现滚动条
（3）单行文本溢出显示省略号
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；
（4）多行文本溢出显示省略号
overflow：hidden；
display：-webkit-box；
-webkit-line-clamp：2；
-webkit-box-origin：vertical；
15、position（定位）
（1）固定定位
position：fixed；
相对于窗口进行定位，把标签固定在浏览器的窗口中，不随页面滚动可以同过top、bottom、left、right调整位置
（2）相对定位
position：relative；
相对于原来的位置进行偏移
特点：原来的位置占据空间，偏移后的位置不占据空间
（3）绝对定位
position：absolute；
如果绝对定位的标签的祖辈标签没有设置定位，当前标签会相对于窗口进行定位，定位的标签会随页面滚动，如果祖辈标签设置定位，当前标签会相对于祖辈标签进行定位
固定定位与绝对定位的特点：
（1）块级元素加了固定定位或绝对定位就会失去默认宽度，宽度由内容撑开
（2）内联元素、内联块元素加了固定定位或绝对定位display变成block
（3）标签加了固定定位或绝对定位后就不再占据页面的空间了，可能会产生重叠问题
（4）标签加了固定定位或绝对定位后使用浮动样式无效
（5）标签加了固定定位或绝对定位后，在不设置width、height样式的情况下，可以通过设置left与right拉伸标签的宽度，通过top与bottom拉伸标签的高度
（6）标签加了固定定位或绝对定位后，在设置了width、margin-left：auto；、margin-right：auto；、left：0；、right：0；可以让定位的标签水平居中。在设置了height、margin-top：auto；、margin-bottom：auto；、top：0；、bottom：0；可以让定位的标签垂直居中。
16、border-radius
border-radius：20px/40px； // 表示四个角的水平半径为20px，垂直半径为40px
border-radius：20px； // 表示四个角的水平半径和垂直半径都为20px
border-radius：10px 20px 30px 40px； // 表示上右下左四个角的圆角半径
标签宽高相同的情况下可以使用border-radius：50%；实现圆形
17、box-shadow
box-shadow：内阴影/外阴影(默认) 水平距离 垂直距离 虚化程度 阴影大小 阴影颜色
box-shadow：2px 5px 5px 0px black；
box-shadow：inset 2px 5px 5px 0px black；