一、CSS
1.层叠、优先级
-
- 样式表来源：用户代理样式>用户样式表>作者样式表>作者样式表中的！important>用户样式表中的！important>用户代理样式表中的！important
-
- 选择器优先级:标记选择器(如：body,div,p,ul,li)>id选择器>类选择器>后代选择器>子元素选择器>伪类选择器
-
- 源码顺序 对于@import的样式，根据@import的顺序 对于link和style 标签的样式,根据在document中的顺序决定
2.盒模型
浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型,css通过盒模型做layout
- 设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠(margin-top)
- 如果设置右边或者底部的负外边距,并不会移动元素,而是将它后面的元素拉过来(margin-bottom)
3.外边距塌陷
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷方法
- 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC,使得父子不在同级BFC中
4.定位
- relative:元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在。
- absolute:元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。
- fixed:元素被移出正常文档流,且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置
- sticky:元素相对它的最近滚动祖先(祖先的overflow是scroll/hidden/auto)的视口(scrollport)定位
