CSS基础
三大特性
层叠性、继承性、优先级。
书写顺序
建议遵循以下顺序（这其实也是根据元素对布局影响的重要性来决定的）：
（1）布局定位属性：display/postion/float。
（2）自身属性：width/height。
（3）文本属性：color/font。
（4）其他属性：text-shadow。
物理像素、物理像素比
pc端页面，1个 px 等于1个物理像素，但移动端就不尽相同了。
1个 px 所能显示物理像素点的个数称为物理像素比。将更多的物理像素点压缩至一个屏幕里，从而达到更高的分辨率。
浏览器的私有前缀
浏览器的私有前缀是为了兼容性考虑，比较新的版本的浏览器无需添加。提倡写法：先写私有前缀再写样式。
（1）-ms-：代表ie浏览器私有属性。
（2）-mo-：代表火狐浏览器私有属性。
（3）-o-：代表opera私有属性。
（4）-webkit-：代表safari和谷歌私有属性。
复合选择器
1，子选择器：
子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：元素1 > 元素2{具体的样式}
2，并集选择器：同时满足多个元素的样式。
3，伪类选择器：用于给选择器添加特殊的效果。比如：
（1）链接伪类选择器
a：link 选择所有未被访问的链接。
a：visited 选择所有已经被访问的链接。
a：hover 选择鼠标指针位于其上的链接。
a：active 选择活动链接。
注意：为了确保生效，请按照LVHA的顺序声明：:link - :visited - :hover - :active。
（2）focus伪类选择器：用于选取获得焦点时的表单元素。
input:focus {
background-color: yellow;
}
（3）结构伪类选择器：主要根据文档结构来选择元素。
:first-child：用于匹配父元素中的第一个子元素。
:last-child：用于匹配父元素中的最后一个子元素。
:nth-child：用于匹配父元素中的第n个子元素。
4，伪元素选择器：
::before：用于在元素内部的前面插入内容。
::after：用于在元素内部的后面插入内容。
注意：二者创建的都是一个行内元素。
选择器权重
选择器 选择器权重
继承或* 0，0，0，0
元素选择器 0，0，0，1
类选择器 0，0，1，0
ID选择器 0，1，0，0
内联样式 1，0，0，0
！important 无穷大
注意：复合选择器需要重新计算权重，权重虽然会叠加，但是不会有进位。
盒模型
1，css盒模型可分为两种：W3C标准盒子模型和IE标准盒子模型（而IE盒子模型又被称为怪异盒模型）。
标准模型和IE模型的区别：计算宽度和高度的不同。
标准盒模型：盒子宽度/高度 = width/height即只是内容的宽高度，不包含 padding 和 border 值 。
怪异盒模型：盒子宽度/高度 = 内容宽高 + padding + border。
2，两种盒模型的设置方式：
（1）标准：box-sizing: content-box; ( 浏览器默认设置 )
（2）IE： box-sizing: border-box;
3，通过 js 获取盒模型对应的宽和高：
（1）window.getComputedStyle(dom).width/height：IE8及以下是不支持的。
（2）document.currentStyle.width/height：（只有IE兼容且IE8及以下都支持）取到的是最终渲染后的宽和高。
盒子阴影
box-shadow：水平方向阴影的位置、垂直方向阴影的位置、阴影模糊程度、阴影大小、阴影颜色、阴影方向。
注意：盒子阴影的设置不影响页面其他布局 。
文字阴影
text-shadow：水平阴影、垂直阴影、模糊程度、阴影颜色。