学习笔记——CSS面试问题

一些常见的CSS面试问题。

---

 1.对BFC/IFC的理解？

BFC是块级格式化上下文，规定内部块级元素格式如何摆放的一个独立环境。环境中的子元素不会影响到外面的布局，也不会受到外部布局的影响。

规则：

1.内部块级元素会在垂直方向一个接一个的排列，

2.内部元素不会影响到外部标签，

3.垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠

4.计算BFC高度时，浮动元素也会参与计算

触发条件：

1.display: inline-block，flow-root，table-cell，flex、

2.overflow不为visible、

3.浮动、

4.绝对定位和固定定位

作用：清除浮动、阻止父子元素外边距折叠，两栏布局

IFC是内联格式化上下文，规定内联元素摆放规则

触发条件：块级元素中仅包含内联级别元素

规则：

1.子元素是水平方向横向排列的，并且垂直方向起点为元素顶部，

2.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】

3.在垂直方向上，子元素会以不同形式来对齐（vertical-align）

4.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定

5.IFC中的line box一般左右边贴紧其包含块，但float元素会优先排列。

6.IFC中的line box高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。

7.当 inline boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。

8.当一个inline box超过父元素的宽度时，它会被分割成多个boxes，这些boxes分布在多个line box中。如果子元素未设置强制换行的情况下，inline box将不可被分割，将会溢出父元素。

解决问题：

1.元素水平居中

2.多行文本水平垂直居中

2..使用link和@import有什么区别？

1.link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2.一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

3.@import有兼容性。

4.当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3.padding和margin区别？

padding: 作用对象是自身;

margin: 是对外部元素;

4.transform不会造成卡顿？

因为transform脱离文档流。

5.重绘和重排？

重绘（重构）：

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘），repaint (重绘)的速度快于重排。

什么时候重绘：

1.改变元素的背景色和背景图片

2.改变文字颜色

3.改变边框颜色

重排（回流）：

子元素样式发生改变，影响其父元素以及往上追溯的许多元素，浏览器会重新渲染与子元素相关联元素的过程。

什么时候重排：

1.改变窗口大小

2.改变文字大小

3.内容的改变，如用户在输入框中敲字

4.激活伪类，如:hover

5.操作class属性

6.脚本操作DOM

7.计算offsetWidth和offsetHeight

8.style属性

总之，只要引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。

重绘与重排的关系：

重排一定会引起重绘，重绘不一定会重排。重绘和重排会影响web性能。

如何减少重绘和重排：

1.不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。

2.不要把DOM结点的属性值放在一个循环里当成循环里的变量。

3.为动画的HTML元件适用fixed或absolute的position，那么修改他们的css时不会reflow

4.不要在布局信息改变的时候做查询