Open henry-fun opened 4 years ago
BFC 透析
在数学中,有这样一个简单的题目:2 + 3 x 2= ?,相信聪明的你一眼即可看出答案为8,虽然数学计算是从左往右计算的,但因为乘法的等级更高,所以会先进行乘法运算,再进行加法运算,如果我们硬要先进行加法运算,我们可以加一对括号变为:(2 + 3) x 2,这里的括号成功的创造出了一个包裹块(block),让括号中的算术先行计算,避免受外部乘法的影响。在编程语言中,包裹块的概念也是核心基础概念,在 JavaScript 这们语言中,通过{}这样一对大括号就可以创造出一个“封闭”的块级作用域,块(Block)被创造出来的目的就是为了进行包裹及隔离*,这个设计理念在我们的各类学科及日常生活中也很常见,我会专门写一篇文章来聊聊“块”的知识。
2 + 3 x 2
(2 + 3) x 2
{}
BFC,英文全称为:Block Formatting Context,中文直译为:块格式化上下文,我们逐个分析下这三个单词,
对BFC进行了名词解析,相信你已经理解了什么是BFC,好吧,文章到此结束!啊?还没懂它在css中咋子用?好吧,那我们继续。
BFC是web页面中 css 布局渲染的一个隔离块(Block),块中有对应的格式化渲染规则。在 css 中创建出 BFC 的方法如下(参考自MDN):
relative
static
display
table-cell
table-caption
table、``table-row
table-row-group、``table-header-group、``table-footer-group
inline-table
overflow
visible
contain
layout
content
grid
inline-grid
column-count
column-width
auto,包括 ``column-count
1
MDN 中列举了这么多创建 BFC 的方案,你需要一个个记住吗?其实你只要理解了BFC的概念,你就能理解为什么是这些方案能创建出 BFC,
BFC 透析
1、引子
在数学中,有这样一个简单的题目:
2 + 3 x 2
= ?,相信聪明的你一眼即可看出答案为8,虽然数学计算是从左往右计算的,但因为乘法的等级更高,所以会先进行乘法运算,再进行加法运算,如果我们硬要先进行加法运算,我们可以加一对括号变为:(2 + 3) x 2
,这里的括号成功的创造出了一个包裹块(block),让括号中的算术先行计算,避免受外部乘法的影响。在编程语言中,包裹块的概念也是核心基础概念,在 JavaScript 这们语言中,通过{}
这样一对大括号就可以创造出一个“封闭”的块级作用域,块(Block)被创造出来的目的就是为了进行包裹及隔离*,这个设计理念在我们的各类学科及日常生活中也很常见,我会专门写一篇文章来聊聊“块”的知识。2、BFC介绍
2.1 名词解读
BFC,英文全称为:Block Formatting Context,中文直译为:块格式化上下文,我们逐个分析下这三个单词,
对BFC进行了名词解析,相信你已经理解了什么是BFC,好吧,文章到此结束!啊?还没懂它在css中咋子用?好吧,那我们继续。
2.2 CSS中的BFC
BFC是web页面中 css 布局渲染的一个隔离块(Block),块中有对应的格式化渲染规则。在 css 中创建出 BFC 的方法如下(参考自MDN):
relative
或static
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
的块元素contain
值为layout
、content
或 paint 的元素display
为grid
或inline-grid
元素的直接子元素)column-count
或column-width
不为auto,包括 ``column-count
为1
)MDN 中列举了这么多创建 BFC 的方案,你需要一个个记住吗?其实你只要理解了BFC的概念,你就能理解为什么是这些方案能创建出 BFC,