CSS3基础

1. 选择器优先级

内联样式 > ID选择器 > 类 伪类 属性选择器 > 标签选择器 伪元素选择器 > 继承的父级的样式 > *选择器

2.组合选择器

• +: 相邻兄弟选择器
• ~: 通用兄弟选择器

• : 字类选择器

• 空格：后代选择器

3. 盒模型-box-sizing

width: 默认块级元素宽度都是100%，百分比含义是当前元素相对于父元素宽度
height：百分比含义和width一样，也是相对于父元素宽度，所以如果想把当前元素高度设置为页面的100%，则必须将父元素 body html高度均设置为100%

3.1 box-sizing

content-box：默认值，元素的宽度仅包含元素的内容区域，不包含内边距和边框
border-box：元素的宽度包含元素的内容区域+padding+border
display:none block inline-block inline
清除浮动：在浮动元素下方加入辅助用的div，让后给这个div加上样式clear：both，div下方的元素就不会受到浮动元素的影响了。

4. 定位

4.1 position:fixed

1. 应用的元素会脱离文档流，后边的元素会顶替该元素的位置
2. 应用fixed定位的元素，自身display属性会被更改为inline-block
3. fixed定位属性可以应用于块级元素 行内元素 行内块级元素
4. top bottom left right属性参照物 是viewport

4.2 position：absolute

1. 应用的元素会脱离文档流
2. 定位参照：如果所有父元素没有添加过定位属性，那么参照html元素，如果存在添加过定位属性的父元素，那么绝对定位元素的位置会参照最近的有定位属性的元素。

4.3 position：relative

1. 定位参照：相对自身
2. 不会脱离文档流
3. 子绝父相，设置父元素相对定位，子元素设置绝对定位，达到子元素以父元素为定位上下文进行定位的目的

4.4 z-index

适用范围：使用定位属性的元素(不包含static)，其他元素的z-index不生效。
默认值：0

4.5 overflow:hidden

注意：如果overflow:hidden应用的是body元素，那么body会将overflow:hidden应用到html上，同时删除自身的overflow:hidden，造成的结果就是body内部的元素不会实现超出范围隐藏，解决办法为：html元素应用overflow:auto,body应用overflow:hidden。

5. 尺寸单位

5.1 百分比

1. 对于position:fixed固定定位的元素，其百分比单位的包含块为viewport
2. 对于position:absolute绝对定位的元素，其设置的百分比单位的包含块为离它最近的包含定位属性的父级元素。(内容+padding**的百分比**)。
3. position:relative position:static, 包含块为离它最近的块级父元素。（仅为内容的百分比）

5.2 rem em

5.2.1 rem

始终以根元素(html)的font-size为基准，动态设置当前元素的各种尺寸，例如：

html{
    font-size: 62.5%
}
div{
    font-size: 2em
}

浏览器默认字体为16px,html 设置62.5%，即10px，因此div的字体大小为2*10px 结果为20px

5.2.2 em

相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身，它则表示元素继承的 font-size 值。

5.3 vh vw vmax vmin

5.3.1 vh vw

以当前viewport为参照设置尺寸的单位，vh表示viewport height，vw表示viewport width，使用固定定位的元素设置百分比和vh vw效果是一样的，因为固定元素百分比的包含块即为viewport

5.3.2 vmax vmin

vmax：viewport height 和viewport width 中较大的一个作为基准值设置尺寸的单位，例如viewport为1024768，那么1vmax即为1024px
vmin：与vmax相反，取viewport height和viewport width中较小的一个作为基准值设置尺寸的单位，例如viewport为1024768，那么1vmin即为768px

5.4 各属性推荐使用单位