看到这个标题,你的脑海第一时间浮现的下面场景吗😂
好了,不给你看饿了😂
回到正文,想到kfc也要回想起BFC这个字节考点
01| 引入:“核”模型
1. 盒子模型(Box Model)
CSS中的盒子模型决定了每个元素的大小和位置。
每个元素都可以视为一个矩形框,这个框由内容区域(content)、内边距 (padding)、边框(border)和外边距(margin)组成。
-
box-sizing属性:该属性是区分两种盒模型的方式,定义了如何计算元素的宽度和高度。
- content-box(标准盒模型):默认值。元素的宽度和高度只包括内容区域,不包括内边距和边框。例如,
width
和height
只会计算内容区域的尺寸,内边距和边框是额外加上的。 - border-box(IE盒模型):元素的宽度和高度包括内容、内边距和边框。这意味着设置的宽度会包括内边距和边框的空间,实际内容区域会根据剩余空间自动调整。
- content-box(标准盒模型):默认值。元素的宽度和高度只包括内容区域,不包括内边距和边框。例如,
<style>
* {
margin: 0;
padding: 0;
}
/* 盒模型 + 块级 */
.box, .box2 ,.box3{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid red;
background-color: green;
}
.box2 {
/* border 盒子大小 IE怪异盒模型 */
box-sizing: border-box;
}
.box3 {
/* 默认,标准盒模型,content 盒子大小 w h */
box-sizing: content-box;
}
</style>
下面三个box盒子,box本身默认使用标准盒模型content-box
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
结合上面这张图,这里显示IE盒模型,包含boder,padding的
2. 标准盒模型 vs IE盒模型
-
标准盒模型(
box-sizing: content-box
):width
= 内容区域的宽度height
= 内容区域的高度
-
IE盒模型(
box-sizing: border-box
):width
= 内容区域的宽度 + 内边距 + 边框height
= 内容区域的高度 + 内边距 + 边框
如果你希望设置元素的宽度和高度时,边框和内边距不影响最终尺寸,可以使用border-box
。(注意这里强调元素宽高,不是内容~)
3.区分行内和块级
- 文档流:是浏览器默认的元素排列方式。在文档流中,块级元素(如
<div>
)会从上到下排列,而行内元素(如<span>
)则是从左到右排列。 - 块级元素:块级元素的宽度默认是100%。这意味着它会填满其父容器的宽度。
- 行内元素:行内元素的宽度由其内容决定,不能通过
width
和height
来控制。
点好KFC了,开BFC畅饮🤩🤩
02| BFC(块级格式化上下文)
BFC(块级格式化上下文)是一个独立的渲染区域,可以视为元素的一种特性。在这个区域内的元素与外部其他元素互不干扰。BFC内的元素按块级格式化规则进行排列,其中包括该上下文中的子元素,但不包括新创建的BFC子元素。
<div class="box1">
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>
假设box1,box3是BFC容器,box1这个区域只包含box2,box3(注意:不会包含box4,box5),而新的box3区域包含box4,box5
2.如何触发BFC
- 浮动元素:float 除了none其他值
- display:inline-block , flex ,(表格单元)table-cells,(表格标题)table-captions), grid,inline-grid等
- 块级元素 overflow: 除visable 其他值(hidden,auto,scroll)
- 绝对定位 position :absolute 或 fixed
- 根元素 html
3.BFC布局规则(重!重要!下文应用场景会选择下面规则)
- 1,内部Box会在垂直方向,一个接一个放置
- 2,Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。
- 3,每个元素margin box 左边,与包含块border box 左边相接触(对左到右的格式化,否则相反)。存在浮动也是一样
- 4,BFC是页面上一个独立容器,容器里面子元素不会影响外面元素。反之也是
- 5,BFC计算高度时,浮动元素也进行计算,
- 6,BFC区域不会与float box重叠
03| BFC应用场景
1,解决垂直高度坍塌
根据第1条和第2条BFC布局规则
- 内部Box会在垂直方向,一个接一个放置
- Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直高度坍塌</title>
<style>
.box{
width: 50px;
height: 100px;
border: 1px solid black;
}
.box1 {
background-color: lightcoral;
margin-bottom: 50px;
}
.box2 {
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box box1">Box1</div>
<div >
<div class="box box2" >Box2</div>
</div>
</body>
</html>
这里使用margin-top=30px 和 margin-bottom=50px 模拟外边距。从图片看,显示两个盒子之间只有50px
的距离(边距坍塌时取最大的那个margin),不是想要的两个margin之和。外边距发生重叠,这时候我们要找BFC来处理
<body>
<div class="box box1">Box1</div>
<div style="overflow: hidden;">
<div class="box box2" >Box2</div>
</div>
</body>
建立新的BFC,根据BFC布局规则
- BFC是页面上一个独立容器,容器里面子元素不会影响外面元素。反之也是
box2
的父元素 div
的 style
属性设置为 overflow: hidden;
,这满足了上述第3点条件,因此这个 div
会创建一个新的 BFC。这意味着 box2
所在的 BFC 与 box1
所在的 BFC 是不同的,它们之间的垂直外边距不会发生折叠。
2,清除浮动
我们知道浮动元素会脱离文档流,使得后面元素环绕在它周围。如果不设置宽度,还有默认100%宽度,并且浮动元素会再普通流元素之上显示。在下面这个例子中,.float-left
类的元素设置了 float: left;
,因此它会向左浮动,后面的 .margin-box
元素会环绕在它的右侧,并且.float-left
在上面。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
border: 2px solid #000;
padding: 1px;
}
.float-left {
float: left; /*Formating context*/
width: 150px;
background-color: lightblue;
margin: 10px;
}
.margin-box {
width: 200px;
height: 100px;
background-color: lightgreen;
margin: 20px 0 10px 100px; /*左边有外边距*/
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">这是一个左浮动的元素</div>
</div>
<div class="margin-box">这是有左侧外边距的盒子是有左侧外边距的盒子</div>
</body>
</html>
当父元素只包含浮动元素,这导致父元素高度坍塌为0。所以要解决这个问题我们也可以使用BFC
,因为BFC计算高度时,浮动元素也进行计算
// 修改style里面的container
.container {
border: 2px solid #000;
padding: 1px;
overflow: hidden; /*增加,触发bfc*/
}
3,浮动不重叠
我们来使用这条规则——> BFC区域不会与float box重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 2px solid black;
padding: 10px;
}
.float-box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.bfc-box {
width: 300px;
height: 100px;
background-color: lightgreen;
overflow: auto; /* 创建 BFC */
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">这是一个左浮动的盒子</div>
<div class="bfc-box">这是一个创建了 BFC 的盒子</div>
</div>
</body>
</html>
// 修改bfc-box 类
.bfc-box {
width: 300px;
height: 100px;
background-color: lightgreen;
overflow: auto;/* 创建 BFC */
}
效果就是两者在父元素box里面 分离,.bfc-box
不会抢着浮动元素的位置。这里就不再演示了。读者可以自行实践运用一下
本例子扩展
这里如果再取消float-box
的margin,就可以看到包含块bfc-box其实左边和他是重叠的。
这是规则:每个元素margin box 左边,与包含块border box 左边相接触(对左到右的格式化,否则相反)。存在浮动也是一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 2px solid black;
padding: 10px;
}
.float-box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
/* 取消margin */
}
.bfc-box {
width: 210px;
height: 100px;
background-color: lightgreen;
/* 没有触发bfc */
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">这是一个左浮动的盒子</div>
<div class="bfc-box">这是一个创建了 BFC 的盒子</div>
</div>
</body>
</html>
没有触发bfc,bfc-box盒子因为宽度210px,float-box盒子是150px,存在重叠并且会有环绕
这时候我们在bfc-box
里面触发新的bfc,使用overfloat
。下面给出bfc-box修改代码:
.bfc-box {
width: 210px;
height: 100px;
background-color: lightgreen;
overflow: hidden;
}
效果出来了
值得注意了解的是:文档流就当成柜子,按一个顺序进行每种FC
的布局。
弹性布局(Flexbox)会打破传统的BFC规则。弹性布局本身会创建一个Flex Formatting Context(FFC),与传统的BFC不同。Flex容器内的元素按Flex规则布局,而不是按照传统的块级元素规则。
总结
理解盒子模型和BFC有助于更精准地控制网页的布局。通过使用适当的box-sizing
和BFC设置,你可以有效地解决元素排列和浮动问题,创建出符合需求的页面结构。在CSS布局中,不仅要了解如何设置宽高,还要明白如何利用BFC来实现更复杂的布局和避免元素重叠的情况。
好了,今天没尝尝KFC,先搞搞BFC吧😂
下面BFC规则进行记忆:
- 1,内部Box会再垂直方向,一个接一个放置
- 2,Box垂直方向是margin决定。属于同一个BFC的两个相邻margin会发生重叠。
- 3,每个元素margin box 左边,与包含块border box 左边相接触(对左到右的格式化,否则相反)。存在浮动也是一样
- 4,BFC是页面上一个独立容器,容器里面子元素不会影响外面元素。反之也是
- 5,BFC计算高度时,浮动元素也进行计算,
- 6,BFC区域不会与float box重叠
码了好久,本人能力有限,可能有理解不当的地方,欢迎大家指出。如果觉得文章还行,还请点赞+关注,带你“不迷路”🤩🤩