2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系
块级格式化上下文
全称Block Formatting Context,简称BFC
它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局,不同的BFC区域,它们进行渲染时互不干扰,创建BFC的元素,隔绝了内部与外部的联系,内部的渲染不会影响到外部
这里注意:是针对常规流块盒的布局,所以什么行盒、浮动元素定位布局就不在此讨论了
常规流块盒在水平方向上,必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻,则进行外边距合并
常规流块盒的自动高度和摆放位置,无视浮动元素
BFC渲染区域:以下元素会在其内部创建BFC区域(常见的)
- 根元素-html,意味着html创建的BFC区域包含了网页中所有的元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
具体的规则:
- 创建BFC的元素,它的自动高度需要计算浮动元素
- 创建BFC的元素,它的边框盒子不会与浮动元素冲重叠
- 创建BFC的元素,不会和它的子元素进行外边距合并
BFC与高度塌陷
常规流的元素是看不见浮动元素的,如果内部有浮动元素,会形成高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFC与高度塌陷</title>
<style>
.container {
background-color: skyblue;
}
.item {
float: left;
margin: 20px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
这里形成了父元素的高度塌陷,有两个解决方法:
第一种是加伪元素clear:both
.clearfix::after {
content: "";
display: block;
clear: both;
}
第二种是给父元素设置BFC
.clearfix {
overflow: hidden;
}
BFC与浮动元素
常规流元素是看不见浮动元素的,完全忽视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFC与浮动元素</title>
</head>
<style>
.float {
width: 200px;
height: 200px;
background-color: red;
margin: 20px;
float: left;
}
.container {
height: 500px;
background-color: aqua;
}
</style>
<body>
<div class="float"></div>
<div class="container"></div>
</body>
</html>
这里常规流元素是会忽视浮动元素的,可以给其创建BFC,这样就会计算浮动元素的布局了,这样它的边框盒子不会与浮动元素重叠
.container {
height: 500px;
background-color: aqua;
overflow: hidden;
}
注意:这里给container设置margin-left作用不大,因为其是针对float元素的,需要给float元素设置margin-right
BFC与外边距合并
其实可以这么理解:处在不同BFC中的元素,它们的外边距是不可能合并的,只有相处同一个BFC中的元素,外边距才可能合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BFC与外边距</title>
</head>
<style>
.container {
height: 500px;
background-color: skyblue;
margin-top: 20px;
}
.child {
height: 100px;
background-color: red;
margin: 50px;
}
</style>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
此时,处于同一个BFC-html下的两个元素外边距合并了,这时只要设置父元素为BFC即可
.container {
height: 500px;
background-color: skyblue;
margin-top: 20px;
overflow: hidden;
}
CSS中的层叠规则
层叠规则是样式计算(Computing Style
)里面解决样式冲突的,按照以下排序:
-
优先级
作者样式表 !important 默认样式表 !important 作者样式表 默认样式表
-
特殊性
算出来是四个数字(?,?,?,?),比较是从高位开始到低位 第一个数字只能是0或1,内联样式是1,其他三个数字都是0如(1,0,0,0);选择器样式是0如(0,?,?,?) 第二个数字只能是选择器样式生效,表示id选择器的数量 第三个数字表示class选择器、伪类选择器和属性选择器的数量 第四个数字表示元素选择器(如a)、伪元素选择器(如::after)的数量
特殊性的看法:
-
源次序
在源代码中的书写顺序,后写的覆盖前面的
转载自:https://juejin.cn/post/7240289965522911288