前端面试题目—css这是我在掘金写得第一篇文章，整理记录自己最近找工作中，面试官常问得最多的css方面的问题，后续还有其

这是我在掘金写得第一篇文章，整理记录自己最近找工作中，面试官常问得最多的css方面的问题，后续还有其他系列，敬请期待哦。根据面试官的水平以及面试官擅长的技术点的不同，每场面试的侧重点会有很多不同，作为一个求职者，我们只能尽我们最大的努力多查、多思、多总结。后续如果有遇到css相关的问题，还会在这里补充。

1. 什么是BFC，解释一下

概念：块格式化上下文，它是一个独立的渲染区域，规定了内部的元素如何布局，与外部区域毫不相干
创建BFC的条件：根元素(html)；浮动元素(float不为none)；绝对定位元素（position为absolute和fixed）；行内块元素（元素的display为inline-block）；表格单元格、标题（display:table-cell或者table-caption）；overflow计算值不为visible的块元素；弹性元素(display:flex元素的直接子元素)；网格元素(display:grid元素的直接子元素)
BFC规则：属于同一个BFC的两个相邻的Box的margin会发生重叠；BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算；文字层不会被浮动层覆盖，环绕于周围
BFC应用：防止margin重叠，使两个box属于不同的BFC可以包含浮动元素；防止父元素高度坍塌；阻止元素被浮动的元素覆盖，自适应成两栏布局

2. 元素水平垂直居中

文本、行内元素、行内块级元素、图片： text-align+line-height+vertical-align
弹性盒子：flex+justify-content+align-items
绝对定位：position+margin(定宽定高)；position+transform(兼容transform)；
绝对居中：position+margin:auto；

/* 方案1——文本、行内元素、行内块级元素、图片 */
#parent{ 
  height: 150px; 
  line-height: 150px; /*行高的值与height相等*/ 
  text-align: center; 
  font-size: 0; /*消除幽灵空白节点的bug*/ 
}
#son{ 
/*display: inline-block;*/ /*如果是块级元素需改为行内或行内块级才生效*/    
  vertical-align: middle; 
}
/* 方案2——弹性盒子 */ 
#parent{ 
  display: flex; 
} 
#son{ 
  margin: auto; 
}
或 
#parent{ 
  display: flex; 
  justify-content: center;
  align-items: center;
}
或 
#parent{ 
  display: flex; 
  justify-content: center;
}
#son{ 
  align-self: center; 
}
/* 方案3—— 绝对定位*/ 
#parent{ 
  position: relative;
} 
#son{ 
  position: absolute;
  top: 50%; 
  left: 50%; 
  /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/ 
  transform: translate(-50%,-50%); 
}
/* 方案4—— 绝对居中*/ 
#parent{ 
  position: relative;
} 
#son{ 
  position: absolute;
  margin: auto; 
  width: 100px; 
  height: 50px; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
}

3. 清除浮动

清除浮动的原因：文字围绕浮动元素排版；父元素高度坍塌，浮动元素会遮住正常的元素；
清除浮动的方式：

在浮动元素后面添加clear:both的空div元素，解决文字围绕浮动元素排版的问题；
给父元素添加overflow:hidden或auto，触发BFC，解决高度坍塌的问题；
使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

4. 什么是物理像素、设备独立像素

像素概念：像素即一个小方块，它具有独立的位置和颜色；
屏幕分辨率：一个屏幕具体由多少个像素点组成；
图像分辨率：图像含有的像素数，同一尺寸的图片，分辨率越高越清晰；
物理像素：任何设备的物理像素都是固定的，设备上真实的物理单元；
设备独立像素：一个抽象像素概念，允许不同分辨率的设备以抽象像素为单位进行测量，来保持视觉效果的一致。
设备像素比：dpr = 物理像素/设备独立像素;
设计师给到的设计图都是根据物理像素为单位制作的；
开发过程中使用css像素，css像素是很容易改变的，页面缩放系数 = css像素/设备独立像素；

5. 伪类以及伪元素

伪元素：用于创建一些不在文档树中的元素，并为其添加样式，或者对被选择元素的特定部分修改样式。常见伪元素：::before、::after、::first-line、::first-letter、::placeholder、::selection等
伪类：css选择器的一类，通过伪类找到那些不存在DOM树中的信息以及不能被常规css选择器获取到的信息。常见伪类如下图所示：

6. 说一下回流与重绘

前言：

浏览器使用流式布局：在页面上显示"块"和"内联"元素的方式。
第一步：浏览器处理HTML标记并构造DOM树；第二步：处理CSS并构建CSSOM树；第三步：将DOM树与CSSOM树组合成一个Render树，然后计算每个节点在页面上的大小和位置，最后把节点绘制到页面上。

回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。
导致回流的因素：页面首次渲染；元素尺寸或位置发生改变；元素内容变化（文字数量等）；元素字体大小变化；添加、删除可见的DOM元素；查询某些属性或调用某些方法：offset类、client类、scroll类等属性，getComputedStyle()、scrollIntoView()、scrollTo()等方法。
重绘：改变节点的样式，但没有影响到节点的几何属性的时候，会导致重绘(repaint)：例如修改color、background-color等元素属性。
如何避免回流与重绘：

避免使用table布局；
避免使用css表达式 calc()；
将动画效果应用到position属性为absolute和fixed的元素上；
避免频繁操作样式，最好一次性重写style属性，或者使用class方式一次性更改样式；
对于resize,scroll等操作进行防抖、节流处理；
避免频繁重复读取会引发回流、重绘的属性（client,scroll,offset类），如果确实需要，就用一个变量缓存起来。

7. 如何画一个0.5px的直线

在高清屏下（dpr>=2）可以直接设置0.5px，但是这种方式Chrome把0.5px四舍五入变成1px了；
采用transform: scale()缩放的方式（最为常用的方式）；

.hr { 
  height: 1px;
  transform: scaleY(0.5); 
  transform-origin: 50% 100%; 
}

采用linear-gradient线性渐变的方式，线条不清晰，有点虚化；

.hr.gradient {
  height: 1px;
  background: linear-gradient(0deg, #fff, #000); 
}

采用boxshadow阴影的方式；

.hr.boxshadow { 
  height: 1px; 
  background: none; 
  box-shadow: 0 0.5px 0 #000; 
}

使用SVG：SVG中的1px是物理像素，而不是设备独立像素；

.hr.svg {
  background: none;
  height: 1px; 
  background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>"); 
}

采用border-image的方式；
采用meta viewport的方式：设置缩放比例即可。几种方式兼容性：

8. opacity与rgba的区别是什么？

opacity作用于元素以及元素内的所有内容；
rgba只作用于元素，元素内部的子元素不会继承透明效果；

10. css盒模型

盒模型：元素的内容+内边距+边框+外边距
w3c标准模型：box-sizing属性为content-box（默认值）时，width=元素的内容区；
IE模型：box-sizing属性为border-box时，width=元素的内容区+padding+border；

11. 怎样实现两栏布局

绝对定位（position:absolute）
弹性盒子（display:flex)
行内块（display:inline-block）
一个浮动元素加一个BFC元素（float:left + overflow:hidden）

12. 弹性盒子 flex:0 1 auto代表什么？

flex-grow（）：当子元素的空间小于父元素的空间时，如何处理剩余空间；

默认为0，表示不占有剩余空间；
当子元素都为1，表示平均分配剩余空间；
当一个子元素为2其余子元素为1的时候，为2的子元素占据的剩余空间比其他子元素多一倍；
当一个子元素为1其余为0的时候，为1的子元素占据全局剩余空间；

flex-shrink（）：当子元素的空间大于父元素的空间时，如何缩小子元素；

默认值为1，表示等比收缩；
当所有子元素都设置为1时，所有子元素都会等比例缩小；
当一个子元素为0其余子元素为1时，为0的子元素不会缩小；

flex-basis：指定了flex元素在主轴方向的初始大小，如果一个元素同时设置了flex-basis（auto以外）和width，flex-basis具有更高的优先级；

默认值为auto，表示项目占据的主轴大小等于项目的实际内容大小；
设置为固定值表示项目占据的主轴大小为固定值；

13. 层叠上下文、层叠等级、层叠顺序、z-index

层叠上下文概念：层叠上下文是对html元素的一个三维构想，如果一个元素含有层叠上下文，就可以理解这个元素在Z轴上就离屏幕观察者更近。
创建层叠上下文：文档根元素（html）；position为absolute或relative且z-index不为auto的元素；position值为fixed或者sticky的元素；flex容器的子元素，且z-index的值不为0；grid容器的子元素，且z-index的值不为0；opcity属性值小于1；具备如下css属性且值不为none的元素：transform；filter(滤镜)；mask(遮罩)；prespective(透视)；
层叠等级概念：在同一个层叠上下文中，html元素在Z轴的上下顺序。
层叠等级：在统一层叠上下文中，层叠等级；