Css 的优先级

important > 内联样式 > id 选择器 > class 选择器 > 标签选择器

页面导入样式时，使用 link 和 @import 有什么区别

  1. link 属于 XHTML 标签，除了加载 CSS 外 还能用于定义 rel 等属性； @import 是提供给 css 的，只能用于加载 css

  2. 页面被加载时 link 会同时被加载，而 import 引用的 css 会等到页面加载完后在加载

  3. import 有兼容性问题，只有在 IE5以上才能被识别，link 是 XHTML 标签，没有兼容性问题

  4. link 支持使用 js 控制 DOM 去改变样式，import 不支持

CSS 盒模型

css 盒模型 分为 IE 盒模型(border-box) + W3C 盒模型(content-box)
盒模型包括：content + padding + border + margin
IE 盒模型 和 W3C 盒模型的区别是 IE 盒模型的 content 包含 padding + border

CSS 选择器有哪些？ 哪些属性可以继承

  1. id 选择器
  2. class 选择器
  3. 标签选择器
  4. 相邻选择器
  5. 子代选择器
  6. 属性选择器
  7. 通配符选择器
  8. 伪类选择器

可继承属性：font-size,font-family, color 等
不可继承：border、padding、margin、width、height 等

伪类和伪元素

区别：
1. 伪类本质上是为了祢补常规css 选择器不足
2. 伪元素的本质是创建了一个有内容的虚拟元素
3. css3 中 伪类和伪元素的写法不同

伪类有： :active, :hover, :checked :nth-child 等
伪元素： ::after、::before、::first-letter 等

css 的 content 属性的作用

css 的 content 属性 专门应用在 before / after 上，用来插入生成内容

什么是 BFC

BFC 指的是 块级格式化的上下文，一个元素形成了BFC 后，那么它的内部元素变化不会影响到外部元素，同样外部元素变化也不会影响到内部元素。
一个 BFC 就像是一个隔离区域，和其他区域互不影响。
一般来说，一个根元素就是一个 BFC，浮动和绝对定位也会形成 BFC， display 属性为 inline-block、flex 时也会创建 BFC 。overflow 的值不为 visible 时也会创建 BFC

什么是 IFC

IFC 指的是 行级格式化上下文，它有着一些布局规则：

  1. 行级上下文内部的盒子会在水平方向一个一个的方知
  2. 当一行不够时，会自动切换下一行
  3. 行级上下文的高度有内部高度最高的内联盒子决定。

什么是浮动、高度塌陷？如何清除浮动

在文档流中，父元素的高度默认是由子元素撑开的
也就是子元素多高，父元素就多高
但是当为 子元素设置浮动后 float ，子元素会脱离文档流
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷

父元素高度塌陷，父元素下的所有元素都会向上移动。

通过清除浮动、设定父元素高度可以解决此问题，但我们一般不推荐写死父元素的高度来解决。

清除浮动的方式：

  1. 使用 clear 来清除浮动

clear 一般配合伪元素来一起使用

.div::before {
content: ‘’;
display: block;
clear: both;
}

  1. 使用 BFC 来清除浮动（BFC 中可以使用影响最小的 overflow: hidden 来清除浮动）

  2. BFC 有兼容性问题，对于I E也可以使用 zoom: 1 来清除浮动
    zoom 属性是 IE 浏览器专有属性，它可以设置或检索对象的缩放比例，解决 ie 下比较奇葩的bug。触发ie 的haslayout 属性

原理是所设置的元素会被扩大和缩小，高度和宽度会重新计算，触发重新渲染。