css集锦

rem

相对于html根元素的单位。1rem等于一个根元素的字体大小。

html {font-size: 16px;}  
p {width: 2rem}

这样宽就是32px。

rem用法:

document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750

其中750或640是图片尺寸。*100是好算，这样100px = 1rem

:root伪类

:root指向匹配文档的根元素，在html中，根元素就是html。

css优先级

1.最近的祖先样式比其他祖先样式优先级高
2."直接样式"比"祖先样式"优先级高
3.内联 > #id > 属性 = 类选择器 = 伪类 > 元素( p ) > 通用选择器(*) > 继承

属性计算方法：
内联样式 * 1000+id选择器 * 100+class选择器 * 10+标签选择器*1

例如：

*          0
li         1
ul li      2
ul ol+li             3
h1 + *[href=up]      11
ul ol li.red         13
LI.red.level         21
#id                  100
#id p                101

BFC(块级格式上下文)

触发BFC的条件

1. float的值不为none。
2. overflow的值不为visible
3. display的值为table-cell, table-caption, inline-block 中的任何一个。
4. position的值不为relative 和static。

在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠

折叠外边距

条件： 必须是紧邻的margin

1. 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2. 没有线盒，没有空隙，没有padding和border将他们分隔开
3. 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
   – 元素的margin-top与其第一个常规文档流的子元素的margin-top
   – 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
   – height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
   – 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom