CSS系列面试题

1.回流和重绘的理解？

        在html中，每个元素都可以理解为一个盒子，在浏览器解析过程中，就会涉及到回流与重绘

        回流：布局引擎会根据各种样式计算每个盒子在页面上的位置与大小

        重绘：当计算好盒模型的位置、大小以及其他属性后，浏览器根据每个盒子样式特性进行绘制

        如何触发？

        回流与重绘都是性能杀手，那么我们要怎么减少它的触发呢，想要减少它的触发，就要了解他在什么时候会触发

        回流主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流

•   添加或者删除可见的dom元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度）
• 内容发生变化
• 页面一开始渲染的时候（无法避免）
• 浏览器的窗口尺寸变化
• 获取一些特定的值，浏览器获取这些值，就需要进行回流操作
  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight
  • scrollTop
  • scrollLeft
  • scrollWidth
  • scrollHeight
  • clientTop
  • clientLeft
  • clientWidth
  • clientHeight
  • 这些属性都有共性，就是都需要通过计算得到，

        回流过程：由于dom发生了改变，所以需要从生成dom这一步开始，重新经过样式计算、生成布局树、建立图层树、再到生成绘制列表，以及之后的显示器显示这整一个渲染过程走一遍，性能消耗非常大

        重绘触发时机：通过构造渲染和重排，我们知道那些节点是可见的，这样我们就可以将渲染树的每个节点都转换成屏幕上的实际像素，这个阶段就是重排

        触发回流一定会触发重绘

•  当DOM的修改导致了样式的变化，并没有影响到几何属性的时候，会导致重绘
• 重绘过程：由于没有导致DOM几何属性的变化，元素的位置不需要更新，当触发重绘的候，会跳过生成布局树和建立图层树的阶段，直到生成绘制列表，继续分块、生成位图等一些操作

        如何避免？

1. 避免频繁使用style，而是采用class类标签修改样式
2. 将动画效果应用到脱离文档流的元素上
3. 批量操作DOM
4. 先设置display:none，操作结束之后在把它显示出来，因为display属性为none的元素上进行dom操作是不会引起回流和重绘的
5. 对于resize、scroll等进行防抖/节流的处理
6. 利用CSS3的transform、opacity、filter这些操作属性可以实现合成的效果，也就是CPU加速     

2.flex弹性盒子布局模型适用场景？

        采用flex布局的元素，称为flex容器的container

        它的所有子元素自动成为容器成员，称为flex项目的item

        应用场景

•  flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成
• 在移动端、小程序的开发，都建议使用flex进行布局

3.什么是响应式设计？响应式设计的基本原理是什么？

        响应式设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备的尺寸，屏幕定向进行响应的调整

        响应式网站的特点：

•  同时适配PC+平板+手机等等
• 标签导航在接近移动设备时改变经典的抽屉式导航
• 网站的布局会根据视口来调整模块的大小和位置

        实现方式：

        响应式的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须要meta声明viewport

        meta的属性：width=device-width:是自适应手机屏幕的尺寸宽度、maximum-scale:是缩放比例的最大值、inital-scale:是缩放的初始化、user-scalable:是用户可以缩放的操作

        实现响应式布局的方式如下：

•  媒体查询
• 百分比
• vw/vh
• rem

        总结
        优点：

•  面对不同分辨率设备灵活
•  能够快捷解决多设备显示适应问题

        缺点：

•  仅适用布局、信息、框架不复杂的网站
• 兼容各种设备，导致工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间过长

4.如果要做优化，CSS提高性能的方式有哪些?

• 内联首屏关键CSS
• 异步加载CSS
• 利用webpack压缩资源
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import

5.BFC？

        块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相隔绝，使内外元素的定位不会相互影响。

        触发条件：

•  根元素，即HTML元素
• 绝对定位元素position：absolute/fixed
• 行内块元素display的值为inline-block、table、flex、inline-flex、grid、inline-grid
• 浮动元素：float值为left、right
• overflow值不为visible，为auto、srcoll、hidden 

        总结：一个BFC的区域内只包含子元素，不包含子元素的子元素，并不是所有元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域，不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同的BFC区域之间的布局不产生影响。

 6.什么是文档流？

        文档流，也被称为文档流布局，是网页中的一种布局方式，文档流是指html文档中元素的自然流动方式布局，相邻元素之间没有间隙，当一个元素的大小或位置发生变化时，文档流会自动进行调整。文档流的底层原理是基于盒模型和浮动定位。