CSS 篇
link 与 @import 的区别
link
是HTML
方式,@import
是CSS
方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现 FOUC (文档样式短暂失效)link
可以通过rel="alternate stylesheet"
指定候选样式- 浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式 @import
必须在样式规则之前,可以在css
文件中引用其他文件- 总体来说:
link
优于@import
,link
优先级也更高
BFC 有什么用
- 创建规则:
- 根元素
- 浮动元素(
float
不取值为none
) - 绝对定位元素(
position
取值为absolute
或fixed
) display
取值为inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex
之一的元素overflow
不取值为visible
的元素
- 作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin
折叠
清除浮动的几种方式
- 父级
div
定义height
- 结尾处加空
div
标签clear:both
- 父级
div
定义伪类:after
和zoom
- 父级
div
定义overflow:hidden
- 父级
div
也浮动,需要定义宽度 - 结尾处加
br
标签clear:both
Css3 新增伪类 - 伪元素
-
p:first-of-type
选择属于其父元素的首个元素的每个
元素。
-
p:last-of-type
选择属于其父元素