📢最近准备春招啦了，所以整理了一些前端高频大厂面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，关注➕，感谢！
5. css中有哪些方式可以隐藏页面元素？区别是什么？
-
display: none 脱离文档流 无法响应事件 回流重绘
-
visibility: hidden 占据文档流 无法响应事件 重绘
-
opacity: 0 占据文档流 响应事件 重绘 || 不重绘
-
position: absolute 脱离文档流 无法响应事件 回流重绘
-
clip-path: circle(0%) 占据文档流 无法响应事件 重绘
6. 说说回流重绘 （重排重绘）
-
是什么 回流：浏览器渲染页面之前需要对结构进行布局计算 重绘：将已经计算好布局的容器绘制出来
-
触发 回流：页面上有容器的几何属性发生变更 重绘：容器非几何属性变更 （字体，颜色）
回流必定重绘，重绘不一定回流
7. 谈谈你对BFC的理解
-
是什么 块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则
-
渲染规则
-
BFC容器在计算高度时，浮动元素的高度也会计算在内
-
BFC容器内的子元素的margin-top不会和BfC这个父容器发成重叠
-
遵照从上往下从左往右的布局排列
-
代码案例一
*{
margin: 0;padding: 0;
}
ul{
overflow: auto;
}
li{
list-style: none;
width: 200px;
height: 50px;
background-color: chocolate;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
在父容器中没有加bfc容器ul的宽度为
在添加bfc容器时ul的宽度为
案例二可以看看我原先的文章
掌握前端利器：深度解析CSS浮动及应用技巧[4]
-
触发条件
-
overflow: 不为visible
-
float
-
display: inline-block || inline-xxx || flex || table-xxx || grid
-
position: absolute || fixed
-
-
应用 清除浮动
8.水平垂直居中的方式有哪些？ !!!!!
-
position: absolute + translate || margin负值(已知宽高)
.box{// 父盒子
width: 500px;
height: 500px;
display：relative；
}
.item{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
在知道子盒子高宽时
.item{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top：-100px：
margin-left：-100px：
}
-
flex
.box{// 父盒子
dispaly:flex
justify-content: center;
align-items: center;
}
-
网格布局diasplay：grid
display: grid;
justify-content: center;
align-items: center;
-
table: text-align + vertical-align (子容器不能是块级)
.box{// 父盒子
dispaly:table
text-align: center;
vertical-align: center;
}
.item{
display:inline-block;
}
来自-扯蛋蛋，欢迎大家关注！
在线整理的确实很好，对文章进行了一个汇总整理，在线备战面试、刷题指南，拿走不谢，要学会站在别人的肩膀上提升自己点击这里-->
最后:
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
扫一扫
4159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
