CSS面试高频题之什么是BFC
之前一段时间因为各种各样的事情一直都没有时间来写博客,但是因为要保证月更原创的量也是只能翻出前几年压箱底的Java学习笔记了 ==|,当然笔者的博客还是以记录前端开发方面的知识为主的。
如题,笔者近期回顾了之前的面试经历,发现各个公司的面试问题虽然各有不同但是也有很多高频面试题,基本上都会问,甚至给我的感觉是面试官突然不知道问点什么好了他可能就会问到这些传统高频题。比如上次笔者面字节跳动(一面,凉的很彻底…以后会好好总结一下过程)面试官在问CSS的时候就问到了什么是BFC,其实这个问题在各种面经中都会看到,几乎可以说是要被问烂的题目。但是你别说,还是能问倒一些人,比如我…感觉BFC是笔者的一个知识盲区。
笔者总结了一下为什么关于BFC的问题没有答好:一方面是因为面试前准备不足,像BFC相关知识几乎是必考题没有复习到位;另一方面是关于BFC的用途比较隐晦,我们在写CSS的时候有时候触发了BFC的一些特性可能自己都没注意到,这也是BFC容易被忽视的原因之一。当然了解、掌握BFC对CSS开发还是很重要的,下面将详细介绍下BFC。
1. BFC的概念:
BFC,块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
2. 如何触发BFC
下列方式会创建块格式化上下文:
- 根元素(
<html>
) - 浮动元素(元素的
float
不是none
) - 绝对定位元素(元素的
position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML表格标题默认为该值) - 匿名表格单元格元素(元素的
display
为table、
table-row
、table-row-group、
table-header-group、
table-footer-group
(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table
) overflow
值不为visible
的块元素display
值为flow-root
的元素contain
值为layout
、content
或 paint 的元素- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素) - 网格元素(
display
为grid
或inline-grid
元素的直接子元素) - 多列容器(元素的
column-count
或column-width
不为auto,包括
column-count
为1
) column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
3. 具体实例
以上关于BFC概念的介绍比较抽象,我们举一些具体的例子来看
首先就是在面试过程中,我们经常会被问到BFC是什么,有哪些方式可以触发BFC,这时候我们只需要记下常用的几种回答就好了,但是千万不要记错了,如果记错了或者没有记得很清楚不确定的话被厉害的面试官反问就尴尬了。一般只需要回答这几个:(1)浮动元素(2)position为absolute或fixed的(3)display为inline-block, table-cell, table-caption, table(table系的) 等(4)overflow 为hidden scroll auto inherit的(5)弹性布局(flex系)(6)网格布局(grid系)就可以了。其中浮动元素现在我们实际开发中几乎已经不用了(除了维护一些古老的项目),另外的几个包括固定定位、绝对定位、弹性布局、overflow都是开发中非常常见的属性,网格布局则是未来的一种大势所趋,在一些国外的网站上会经常见到。
① 外边距塌陷
有这样的一种面试题:外边距塌陷是什么现象(当块级元素(block)的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距,这种行为称为边界折叠(margin collapsing )=> 怎么解决(触发BFC)=> BFC 是什么 => 怎样才能触发BFC => 你提到position为absolute何fixed可以触发BFC,relative可以吗 => 弹性布局是怎样的 => 网格布局是怎样的……具体例子如下:
<div class="div1"></div>
<div class="div2"></div>
.div1 {width: 100px;height: 100px;background: red;margin-bottom: 50px;
}
.div2 {width: 200px;height: 200px;background: yellow;margin-top: 100px;
}
<div class="wrapper"><div class="div1"></div><div class="div2"></div>
</div>
.wrapper {display: flex;flex-direction: column;
}
.div1 {width: 100px;height: 100px;background: red;margin-bottom: 50px;
}
.div2 {width: 200px;height: 200px;background: yellow;margin-top: 100px;
}
② 两栏布局/三栏布局
两/三栏布局在我们进行pc端的web页面开发时比较常见,实现的方式有很多,如今比较流行的是利用flex弹性布局进行两栏布局,简单好用;但是在flex布局还没有出现/兼容性不佳的上古时代,一般都是通过float浮动来实现两栏布局的。这里就会涉及到浮动元素会覆盖正常文档流的元素(浮动元素脱离了文档流) ,例子如下:
<div class="div1"></div>
<div class="div2"><div class="sub-cls"></div>
</div>
.div1 {float: left;width: 200px;height: 200px;background: red;
/* margin-bottom: 50px; */
}
.div2 {
/* width: 800px; */height: 200px;background: pink;
/* margin-left: 120px; */
/* margin-top: 100px; */
}
.sub-cls {width: 50px;height: 50px;background: yellow;
}
.div2 {overflow: hidden; /*触发bfc *//* width: 800px; */height: 200px;background: pink;/* margin-left: 120px; *//* margin-top: 100px; */
}
③ 清除浮动
其实这一点没什么好说的,因为如前所述浮动是属于上古时代的css布局写法,使用它进行布局有很多的副作用(唯一的好处的兼容性良好,因为足够老…)和与之衍生的大量黑科技,比如清除浮动,圣杯、双飞翼布局……清除浮动是因为使用浮动会出现塌陷的情况:
<div class="wrapper"><div class="div1"></div><div class="div2"><div class="sub-cls"></div></div>
</div>
.wrapper {width: 100%;border: 2px solid black;
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
}
.div1 {float: left;width: 200px;height: 200px;background: red;
/* margin-bottom: 50px; */
}
.div2 {/*创建bfc */
/* overflow: hidden; */float: left;width: 800px;height: 200px;background: pink;
/* margin-left: 120px; */
/* margin-top: 100px; */
}
.sub-cls {
/* float: right; */width: 100px;height: 100px;background: yellow;
}
修改wrapper的样式,使其触发BFC:
.wrapper {/*创建bfc */overflow: hidden;width: 100%;border: 2px solid black;
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
}
4. 总结
在flex,grid等新兴布局流行的今天,触发BFC进行元素布局的用法并不很多,主要体现在盒子外边距合并方面,而其他的类似清除浮动等用法比较少见,但是BFC的概念及其触发条件是我们必须要掌握甚至是背诵下来的。
参考:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
https://codepen.io/zitonzong/pen/BaodqvB
https://www.cnblogs.com/chen-cong/p/7862832.html
https://www.cnblogs.com/chencyl/p/3948331.html
CSS面试高频题之什么是BFC相关推荐
- 面试高频题:Spring和SpringMvc父子容器你能说清楚吗
引言 以前写了几篇关于SpringBoot的文章<面试高频题:springBoot自动装配的原理你能说出来吗>.<保姆级教程,手把手教你实现一个SpringBoot的starter& ...
- 面试题:460道Java后端面试高频题答案版「模块九:Spring」
Spring 写在前面 相信对于 Spring 这个模块,只要是做过 Java 开发的同学都是不陌生的,或多或少都使用过 Spring 体系的框架.对于平时自己做点小项目会写配置文件可能就行了,但是对 ...
- 2022(招聘季)linux面试高频题
大家好,今天给大家分享一下2022最新最全的linux面试高频题,希望你们喜欢. linux运维工程师在面试的时候经常会被问到各种问题,接下来我也会根据自己的经验将面试题整理下来供大家参考.有不同见解 ...
- 牛客网面试高频题top100(11~20)
** 牛客网面试高频题top100(11~20 java实现) ** 11.跳台阶 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个 n 级的台阶总共有多少种跳法(先后次序不同算不同的结 ...
- 牛客网面试高频题top100(1~10)
*牛客网面试高频题top100(1~10 java实现) 1.反转链表 描述: 给定一个单链表的头结点pHead(该头节点是有值的,比如在下图,它的val是1),长度为n,反转该链表后,返回新链表的表 ...
- 随机森林(Random Forest)面试高频题
推荐一篇写的很好的博客:[Machine Learning & Algorithm] 随机森林(Random Forest). 一.随机森林算法的原理 随机森林算法是Bagging集成框架下的 ...
- 算法篇-----面试高频题(脑筋急转弯)
最近看到很多混在算法中的一些脑筋急转弯,居然是面试高频题,下面罗列一波! 题号一: 农夫需要把狼.羊.菜和自己运到河对岸去,只有农夫能够划船,而且船比较小,除农夫之外每次只能运一种东西,还有一个棘手问 ...
- Java 面试高频题:Spring Boot+Sentinel+Nacos高并发已撸完
2021都说工作不好找,也是对开发人员的要求变高.前段时间自己有整理了一些Java后端开发面试常问的高频考点问题做成一份PDF文档(1000道高频题),同时也整理一些图文解析及笔记,今天在这免费分享给 ...
- Java面试高频题:Spring Boot+JVM+Nacos高并发+高可用已撸完
2021都说工作不好找,也是对开发人员的要求变高.前段时间自己有整理了一些Java后端开发面试常问的高频考点问题做成一份PDF文档(1000道高频题),同时也整理一些图文解析及笔记,今天在这免费分享给 ...
最新文章
- 计算机网络中什么叫总衰耗_1、什么是计算机网络?
- javascript修改CSS
- python struct模块的使用
- Pasha and Phone
- mysql数据库导出模型到powerdesigner,PDM图形窗口中显示数据列的中文注释
- 到底逾期几次才会影响贷款申请?
- 第28课 叮叮当当 《小学生C++趣味编程》
- TensorFlow 图片预处理
- 大咖专栏 | DevOps组织如何有效地实施MSA
- Dart基础第13篇: 泛型、泛型方法 、泛型类、泛型接口
- 概率论简明教程_Chapter-02_最大似然估计
- 2008 r2 server sql 中文版补丁_sql2008 sp3补丁下载-sql server 2008补丁包sp3中文版补丁【32/64位】-东坡下载...
- 哲学中的推理规则 —— 《自然哲学之数学原理》
- 如何将PDF转换成xls格式的表格
- 重庆万州公交车坠江原因公布:乘客与司机激烈争执互殴致车辆失控
- 爱德泰科普 | 了解单模光纤跳线和多模光纤跳线,看着一篇就够了
- 编译内核使tilera支持网桥和netfilter功能
- 计算机名(主机名)、本机地址(IP/IPv4)、localhost、127.0.0.1的关系
- centos php 绑定域名,彪马携手西甲联盟正式发布两款新赛季官方比赛用球
- GCN图卷积神经网络综述