web前端开发课程培训，CSS的行内样式与内联样式

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 选择属于其父元素