无尽码路

1、margin，这个声明的本质动机是：从某个边界出发，边界与其他元素至少保持指定的距离。于是在垂直方向上会存在两种合并的情况：

• 一个连边框都没有的空元素，它的上下边距将合并，取其最大者。
• 上下相邻的两个元素，它们的上下边距合并，取其最大者。

2、box-sizing，元素宽度width默认指的是其内容宽度，而非本身总宽度。

div {
    width: 10px;
    padding: 10px;
}

这时候元素的宽度为10px+10px*2。很多数在布局的时候我们并不希望这样，因此需要指定一个属性来让width表示总宽度而压缩内容宽度。如：

div {
    width: 10px;
    padding: 2px;
    box-sizing: border-box;
}

3、width、height指定的是元素内的宽高，不包含外边距、边框厚度、内边距，元素总宽高需要加上这三样。

4、后代选择器和子代选择器相较而言更加强大，从字面上就比较容易理解但也容易忽视：后代选择器可以选择遥远的孙代！

5、伪类：指的是元素的状态类别，比如 a:link a:hover。

selector:pseudo-class {
  property: value;
}

6、选择器的解读顺序：从右到左。

/*作为其它元素的第一个孩子的P元素*/
p:first-child {

}

7、:target伪类有点意思，选择url中锚部分所指的目标，如：

http://pcfq.net/a.html#abc
它选择文档中#abc这个目标。

8、伪元素::first_line选择器只能用于块元素。在CSS1和CSS2中，伪元素是单冒号写法，在CSS3中为了区分，引入了双冒号表示法以示与伪类区分。

9、属性选择器中，注意词和串值的区分，如~=和*=，前者包含词，后者包含串。