⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！
👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。
上篇文章：
目录
41.三栏布局的实现方式，尽可能多写，浮动布局时，三个 div 的生成顺序有 没有影响
44.有一个 width300，height300，怎么实现在屏幕上垂直水平居中
45.display：table 和本身的 table 有什么区别
47.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
49.display:none 和 visibilty:hidden 的区别
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 等
上篇文章：
🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。
后续会继续更新面试题，关注收藏一下随时查看。
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
