1、text-align
Action: Set the contents of which label horizontal alignment
text-align: left; // left-aligned text (default)
text-align: center; // Align Text
text-align: right; // right justified text
2、font-size
Role: Set the font size
font-size：20px；
font-size：1.2rem；
font-size：80%；
3、font-weight
Role: Set the font weight
font-weight: bold; // bold, equivalent to 700
font-weigh：100-900；
font-weight: bolder; // bold, equivalent to 900
font-weight：lighter； // 变细
font-weight: normal; // normal, corresponding to 400
4 font-style
Role: Set the font is inclined
font-style: italic; // italic
font-style: normal; // normal
5、text-decoration
Role: set the text on the line
text-decoration: underline; // set the text to underscore
text-decoration: overline; // set the text to the scribe line
text-decoration: line-through; // set the text to the middle line
text-decoration: none; // remove the text line
6、text-indent
Role: Set the first line indent text
text-indent: -30px; // left indent
text-indent: 30px; // right indent
text-indent: 2rem; // indented to the right
7、background
(1) background-color: Background Color
background-color：red；
(2) background-image: Background image
background-image：url(../img/pic.png)；
(3) background-repeat: the background image tiling
background-repeat: no-repeat; // Do not tile
background-repeat: repeat-x; // horizontally tiled
background-repeat: repeat-y; // vertically tiled
background-repeat: repeat; // horizontal and vertical directions tile (default)
(4) background-position: the position of the background image (the horizontal position in the vertical position)
background-position: 20px 30px; // pixel values to adjust the position
background-position: left center; // direction to adjust the position of use. Horizontally: left, center, right; the vertical direction: top, center, bottom
background-position: center bottom + 30px; // mix
background-position: 100px bottom; // mix
(5) background-size: background image size (Horizontal Size Vertical Size)
background-size: 50px 80px; // wide background image 50 High 80
background-size: 100px; // background image with width 100 height width adaptive
background-size: cover; // background picture aspect ratio in accordance with their amplification, enlarged to fill the entire background of the label, if the same aspect ratio and the picture aspect ratio filling tags, labels just filling up the container, if not identical, will lead to a part of the background image can not be displayed
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；