CSS忽略/忘记的知识点

type

status

date

slug

summary

1 盒模型：标准/IE

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）。

.border-box设置为IE模型，它的元素宽度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px

2 javascript如何设置获取盒模型对应的宽和高

dom.style.width/height 只能取到行内样式的宽和高，style标签中和link外链的样式取不到。

dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有IE支持此属性。

window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9以上支持。

dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离

3 外边距重叠

当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

4 BFC

BFC的原理（渲染规则）

BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠

BFC的区域不会与浮动元素的布局重叠。

BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。

计算BFC高度的时候，浮动元素也会参与计算(清除浮动)

如何创建BFC

overflow不为visible;

float的值不为none；

position的值不为static或relative；

display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

5 选择器

A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

存在和值（Presence and value）属性选择器

这些属性选择器尝试匹配精确的属性值：

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。

[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。

[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

[attr*=val] : 选择attr属性的值中包含字符串val的元素。

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。

::after

::before

::first-letter

::first-line

::selection

::backdrop

6 定位

position: sticky

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

7 过渡

栗子1

栗子2

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

8 动画

语法

栗子1

栗子2

栗子3

还有一个重要属性