CSS面试题：三栏布局，BFC，清除浮动，权重计算，重绘和重排..

1.如何实现一个自适应的正方形

方法 1：利用 css3 的 vw 单位，vw 会把视口的宽度平均分为 100 份

方法 2：利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性

2.如何实现三栏布局

三栏布局是很常见的一种页面布局方式。左右固定，中间自适应，实现方式有很多种方法。

第一种：flex
第二种：position+margin
第三种：float+margin

3.import 和 link 的区别

1.从属关系区别:
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别：
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别：
@import是 CSS2.1 才有的语法，故只可在 IE5+才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM 可控性区别：
可以通过 JS 操作 DOM，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

4.说说对 BFC 的理解

块级格式化上下文 Block Formatting Context 是 CSS 规范中一个概念，决定元素的内容如何渲染以及与其他元素的关系。存在 5 条规则：
1.BFC 有隔离作用，内部元素不受外部影响，反之亦然
2.一个元素只能存在于一个 BFC 中，如果能同时存在于两个 BFC 中，那么就违反了 BFC 的隔离原则
3.BFC 内的元素按正常流排列，元素间的间隙由元素外边距控制。
4.BFC 中的内容不会与外面的浮动元素重叠
5.计算 BFC 的高度需要包括 BFC 内的浮动子元素的高度

5.清除浮动的方法

• clear 清除浮动(添加空 div 法) 在浮动元素下方添加空 div，并给该元素写 css 样式:{clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动(需要给父级同级元素添加浮动)
• 父级设置成 inline-block，其 margin:0 auto 居中方式失效
• 给父级添加 overflow:hidden 清除浮动方法
• 万能清除法 after 伪类清浮动(现在主流方法，推荐使用)

6.说说选择器的权重计算方式

!important 最高，*为 0，行内样式权重值为 1000，id 选择器权重值为 100，类，伪类，属性选择器权重值为 10，元素，伪元素权重值为 1

7.css reset 和 normalize.css 有什么区别

• 两者都是通过重置样式，保持浏览器样式的一致性
• 前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
• 后者修复了常见的桌面端和移动端浏览器的 bug:包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。
• 前者中含有大段的继承链
• 后者模块化，文档较前者来说丰富

8.说说两种盒模型以及区别

盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型：W3C 盒模型和 IE 盒模型

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用 CSS 给某个元素定义高或宽时，IE 盒模型中内容的宽和高将会包含内边距和边框，而 W3C 盒模型并不会

9.如何避免重绘或者重排

1.集中改变样式

2.使用 DocumentFragment
我们可以通过 createDocumentFragment 创建一个游离于 DOM 树之外的节点，然后在此节点上批量操作，最后插入 DOM 树中，因此只触发一次重排

3.提升为合成层
将元素提升为合成层有以下优点:

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其它的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

10.如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘

• 添加、删除、更新 DOM 节点
• 通过 display:none 隐藏一个 DOM 节点，触发重排和重绘
• 通过 visibility:hidden 隐藏一个 DOM 节点，只触发重绘，因为没有几何变化
• 移动或者给页面中的 DOM 节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动