CSS知识总结
1. css引入三种方式
（1）行间样式；（2）页面内css；（3）外部css文件，用
注意：HTML标签解析时，解析一个标签，浏览器执行一个标签；当解析link标签时，浏览器开启一个新的线程， 异步的加载link标签引用的文件。
2. css选择器
（1）#id选择器；（2）.class选择器；（3）标签选择器；（4）通配符 * 选择器；
（5）父子选择器：有父子关系的选择器组成；比如：div .demo{ }，即div标签下的所有class是demo的标签被选中；
（6）直接子元素选择器：div > span 即div下的子级span被选中，而子级的子级不会被选中。
注意：父子选择器和直接子元素选择器，是自子级向父级查找符合的标签。
（7）并列选择器：div.demo{ }
（8）分组选择器：div, span, p{ }
（9）伪类选择器：div:hover { }，当鼠标触碰时触发。（:hover 是伪类选择器之一）
（10）属性选择器：标签的属性有：id、class等
，有属性是id的标签都别选中：
有属性是id = “only”的标签被选中：
3. css权重
注意：权重值的进制是256，计算机中的infinity是个无穷大的定值，color: red !important;作用在属性上。
4. css属性
（1）border-style：solid（实线）、dotted（点状虚线）、dashed（线状虚线）
border是复合属性：
（2）font-size：字体大小，浏览器中字体的宽高一样；font-style：italic；斜体；font-family：arial；这个字体是苹果乔布斯创造的；
（3）text-align：left（左）、center（中）、right（右），文字在框中的左右位置。
（4）line-height：30px | 1.2em | 120%；“文字的行”高，即文字所在行的高度，不是文字的高度；文字在“文字的行”的垂直居中，所以当“文字的行”高度与框高一样时，会有文字垂直居中的效果。
padding也可以使文字垂直居中：文字所在行的高度inline-height 和height大小一样，然后给padding-top和padding-bottom赋相同的值。
div {
width: 100px;
height: 20px;
line-height: 20px;
padding: 30px 0px;
background-color: green;
color: white;
}效果：
好处：带有文本属性的标签会直接与文字对齐，其结果也是会居中。
比如：div标签里面的img标签，会直接与文字对齐。类似这种情况：
（5）单位：px 和 em 都是相对单位。px是相对屏幕的，em是相对文字的；1 em = 1 font-size；
（6）text-decoration：none（无线）| overline（上划线）| underline（下划线）| line-through（中划线）
text-decoration也是复合属性：line（线）| style（样式）| color（颜色）
（7）cursor：pointe（小手）| move（十字架），还有很多值，参考w3school文档 。
（8）行级元素：内容决定元素所占位置，不可通过css改变宽高；（a em del span strong）
块级元素：内容决定大小，独占一行，内容溢出时自动换行；（p ul ol li div form ）
div标签特性：高度：内容决定；宽度：自适应。
行级块元素：内容决定大小，可以改变宽高； （img）
注意：（重点）
（1）行级元素只能嵌套行级元素；块级元素可以嵌套行级和块级；
（2）p标签是块级元素，而p标签内不能嵌套块级元素
结果是：p标签被div切割成两个。
（3）a标签是行级元素，但是a标签不能嵌套a标签
5. margin的auto值的理解
父子级都是块级元素，让子级margin为auto，这样就可以自适应居中显示。
而在inline-block的元素中，margin：auto是无效的，是0；
6. 文本类元素的理解：inline、inline-block
文本类元素，都有文字间隙。
比如：多个img标签放在一起，会有文本间隙，解决办法：代码不要留空格。
代码：
效果：有文本间隙
解决办法：
效果：
7. 文字与前面标签的对齐方式：vertical-align属性
（1）块级元素后的文字：块级元素独占一行，所以后面文字在其下面。
效果：
（2）行级块元素：
img标签：后面文字与图片底边对齐
效果：
有文字的行级块元素：
效果：
问题来了：带有文字的inline-block元素，后面的文字会和文字对齐，而不是与底边对齐。
如何解决：用vertical-align属性，调整标签后面文字的对齐线
vertical-align: top \ middle \ bottom | px;
8. list-style-type的值
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |