1, texto-align
Acción: Establecer los contenidos de los cuales etiquetan alineación horizontal
text-align: left; // texto alineado a la izquierda (por defecto)
text-align: center; // Alinear texto
text-align: right; // texto justificado a la derecha
2, tamaño de fuente
Papel: Permite definir el tamaño de la fuente
font-size: 20px;
font-size: 1.2rem;
font-size: 80%;
3, font-weight
Papel: Establecer el peso de la fuente
font-weight: bold; // negrita, equivalente a 700
font-sopesar: 100-900;
font-weight: más audaz; // negrita, equivalente a 900
font-weight: más ligero; // 变 细
font-weight: normal; // normal, correspondiente a 400
4 font-estilo
Papel: Configuración de la fuente se inclina
font-style: cursiva; // cursiva
font-style: normal; // normales
5, text-decoration
Papel: fija el texto en la línea de
text-decoration: underline; // fija el texto subrayado
text-decoration: overline; // conjunto del texto a la línea de trazado
text-decoration: tachado; // conjunto del texto a la línea media
text-decoration: none; // eliminar la línea de texto
6, el texto-guión
Papel: fija el texto sangría de primera línea
text-indent: -30px; // sangría izquierda
text-indent: 30px; // sangría derecha
text-indent: 2rem; // sangría a la derecha
7, fondo
(1) background-color: Color de fondo
background-color: rojo;
(2) Imagen de fondo: Imagen de fondo
Imagen de fondo: url (../ img / pic.png);
(3) background-repeat: la imagen de fondo de mosaico
background-repeat: no-repeat; // No baldosas
background-repeat: repeat-x; // horizontalmente en mosaico
background-repeat: repeat-y; // mosaico verticalmente
background-repeat: repeat; // direcciones horizontal y vertical del azulejo (por defecto)
(4) de fondo-posiciones: la posición de la imagen de fondo (la posición horizontal en la posición vertical)
background-position: 20px 30px; // valores de píxeles para ajustar la posición
background-position: centro izquierda; // dirección para ajustar la posición de uso. Horizontalmente: izquierda, centro, derecha; la dirección vertical: superior, central, fondo
background-position: inferior centro + 30px; // mix
background-position: 100px inferior; // mix
(5) de fondo de tamaño: tamaño de la imagen de fondo (Horizontal Vertical Tamaño Tamaño)
fondo-size: 50px 80px; // amplia imagen de fondo de alta 50 80
fondo-size: 100px; // imagen de fondo con un ancho de 100 altura anchura adaptativo
fondo-size: cubierta; // relación de aspecto imagen de fondo de acuerdo con su amplificación, ampliada para llenar todo el fondo de la etiqueta, si la misma relación de aspecto y la relación de aspecto de la imagen de llenado etiquetas, etiquetas simplemente llenando el recipiente, si no idénticas, dará lugar a una parte de la imagen de fondo no se pueden mostrar
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；