（五）CSS前端开发面试会问到的问题有哪些？

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。

上篇文章：

（一）前端开发面试会问到的问题有哪些？

（二）前端开发面试会问到的问题有哪些？

（三）CSS前端开发面试会问到的问题有哪些？

（四）CSS前端开发面试会问到的问题有哪些？

41.三栏布局的实现方式，尽可能多写，浮动布局时，三个 div 的生成顺序有没有影响

42.什么是 BFC

43.calc 属性

44.有一个 width300，height300，怎么实现在屏幕上垂直水平居中

45.display：table 和本身的 table 有什么区别

46.line-height 和 height 的区别

47.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

48.CSS 画三角形

49.display:none 和 visibilty:hidden 的区别

50.css 预处理器有什么

41.三栏布局的实现方式，尽可能多写，浮动布局时，三个 div 的生成顺序有 没有影响

三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应

两列定宽一列自适应：

1、使用 float+margin：

给 div 设置 float：left，left 的 div 添加属性 margin-right：left 和 center 的间隔 px,right 的

div 添加属性 margin-left：left 和 center 的宽度之和加上间隔

2、使用 float+overflow：

给 div 设置 float：left，再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动，另

一个盒子触发 bfc 达到自适应

3、使用 position：

父级 div 设置 position：relative，三个子级 div 设置 position：absolute，这个要计算好盒

子的宽度和间隔去设置位置，兼容性比较好，

4、使用 table 实现：

父级 div 设置 display：table，设置 border-spacing：10px//设置间距，取值随意,子级 div

设置 display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是 margin

失效，设计间隔比较麻烦，

5、flex 实现：

parent 的 div 设置 display：flex；left 和 center 的 div 设置 margin-right；然后 right 的 div

设置 flex：1；这样子 right 自适应，但是 flex 的兼容性不好

6、grid 实现：

parent 的 div 设置 display：grid，设置 grid-template-columns 属性，固定第一列第二列宽

度，第三列 auto，

对于两侧定宽中间自适应的布局，对于这种布局需要把 center 放在前面，可以采用双飞

翼布局：圣杯布局，来实现，也可以使用上述方法中的 grid，table，flex，position 实现

42.什么是 BFC

BFC 也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，

并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂

直放置，计算 BFC 的高度的时候，浮动元素也参与计算，触发 BFC 的规则有根元素，

浮动元素，position 为 absolute 或 fixed 的元素，display 为 inline-block，table-cell，

table-caption，flex，inline-flex，overflow 不为 visible 的元素

43.calc 属性

Calc 用户动态计算长度值，任何长度值都可以使用 calc()函数计算，需要注意的是，运

算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

44.有一个 width300，height300，怎么实现在屏幕上垂直水平居中

对于行内块级元素

1、父级元素设置 text-alig：center，然后设置 line-height 和 vertical-align 使其垂直居中，

最后设置 font-size：0 消除近似居中的 bug

2、父级元素设置 display：table-cell，vertical-align：middle 达到水平垂直居中

3、采用绝对定位，原理是子绝父相，父元素设置 position：relative，子元素设置 position：

absolute，然后通过 transform 或 margin 组合使用达到垂直居中效果，设置 top：50%，left：

50%，transform：translate（-50%，-50%）

4、绝对居中，原理是当 top,bottom 为 0 时，margin-top&bottom 设置 auto 的话会无限延

伸沾满空间并平分，当 left，right 为 0 时,margin-left&right 设置 auto 会无限延伸占满空

间并平分，

5、采用 flex，父元素设置 display：flex，子元素设置 margin：auto

6、视窗居中，vh 为视口单位，50vh 即是视口高度的 50/100，设置 margin：50vh auto 0，

transform：translate(-50%)

45.display：table 和本身的 table 有什么区别

Display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个

html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定

义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致

的语义化问题。

之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table

边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table

的嵌套性太多，没有 div 简洁

46.line-height 和 height 的区别

line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height

一般是指容器的整体高度。

47.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，

其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，

浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘，引起重排重绘的原因有：

添加或者删除可见的 DOM 元素，

元素尺寸位置的改变

浏览器页面初始化，

浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，

减少重绘重排的方法有：

不在布局信息改变时做 DOM 查询，

使用 csstext,className 一次性改变属性

使用 fragment

对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

48.CSS 画三角形


画三角形 
#content{ 
width: 0; 
height: 0; 
border-top: 50px solid blue; 
border-right: 50px solid red; 
border-bottom: 50px solid green; 
border-left: 50px solid yellow; }

49.display:none 和 visibilty:hidden 的区别

1. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已

经绑定的事件

2. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元

素删除掉。

50.css 预处理器有什么

less，sass 等