作为自己做前端开发以来的CSS爬坑总结，内容偏向PC端，不定期补充。
只作提示，不深谈。

盒子模型

1、区分content-box和border-box的尺寸计算。

2、行级元素无宽高，但可设内外边距。

3、外边距margin可设负值，内边距padding不可以。

4、当内外边距值为百分比时是相对于元素宽度计算的。

5、border是个好玩的东西，关键字：css三角形。

定位与布局

1、添加了position: absolute与float样式后，元素会隐式改变display属性为inline-block，可以设置宽高属性，不需要再显示设置display。

2、清除浮动，一般有clear: both/left/right和overflow: hidden。首选clear，如果目标区块存在溢出元素时，会被overflow: hidden截断。

3、绝对定位的元素，在top、right、bottom、left属性未设置时，默认为auto，在文档流中紧跟前一个元素。这个特性通常可以实现一些神奇的效果。

4、尽量为每一个定位元素合理分配z-index，特别是relative元素。按级别一般为：主体内容 < 下拉列表、日历等与主体紧密联系的内容 < 浮动的头部或左右导航、工具栏等 < 遮罩、模态窗口等。遵循这个规则能少踩很多坑。

5、绝对定位的元素可以溢出添加了overflow: hidden的父容器且不被截断；绝对定位的起始点是参照离其最近的祖先定位元素，一直到body。

6、隐藏元素一般用display: none、visibility: hidden，使用CSS3过渡和动画时首选visibility。因为display只有两个状态改变none -> block/inline-block/...，没有值域的变化（我是这么理解的），visibility在底层实现中是有一个 0-1 的变化。

7、当IE<=7时，遇到定位布局问题，你可能需要了解haslayout与层叠上下文。

8、在移动端开发中，使用Flexbox新旧语法混合是很好用的布局解决方案。

选择器

1、一些简单的交互效果就不需要用js去实现了，灵活使用选择器就可以搞定。如：鼠标悬浮于一个元素时显示某个子元素或兄弟元素、输入框具有焦点时显示输入提示、CSS模拟单复选框等。

2、jquery中有的选择器，基本上也能在CSS中使用或找到替代方案。

3、链接的伪类样式要按照link、visited、hover、active顺序设置，移动端用active代替hover。

4、除了首元素、末元素外，还有首行选择器:first-line和首字符选择器:first-letter。

5、使用子元素伪类选择器:nth-child(n)可以按照你的规则选取任意组合的子元素。

6、伪元素选择器:before/:after可以把一个元素当作三个元素使用，需注意某些元素不支持该选择器。其属性content为必设值，可以是字符串或使用attr()插入元素属性值、使用url()插入图像等。

排版与修饰

1、文本处理：大小写转换text-transform、文字截断text-overflow、改变文本流方向direction、书写方向writing-mode、换行处理white-space等。

2、当font-weight设为数值时，需要对应的字体有该数值字重支持，否则无效。bold等价于700数值。

3、垂直对齐vertical-align是个资深奇葩，各个浏览器解析均有差异。除了一些固有属性值外，还可以设数值、百分比。

4、你想设置2个边框吗？使用outline吧。

5、浏览器字体最小基准是12px。

6、设计图中的一些字体效果，可以尝试用text-shadow实现，减少图片应用。

7、使用CSS3时遵循渐进增强原则，对于不支持的浏览器保证布局无错乱、功能正常使用。