bfc块级格式化上下文
BFC:格式化上下文 是独立渲染的一个区域 bfc内部盒子的布局不会影响区域外元素的布局
触发条件:
display: flex inline-block table-cell table-caption
根元素 -html
float 不会none
overflow 不为visible
bfc 内盒子特性:
盒子是垂直布局
垂直布局的盒子 相邻的两个盒子之间的距离用margin设置,margin 会重叠
计算bfc区域的高度 自动检测浮动盒子的高度
bfc区域内的盒子 的左外边缘margin-left 会触碰bfc区域的左边缘border-left
浮动盒子不会和bfc区域产生交集 ,而是紧贴bfc区域
左右固定,中间自适应(左右固定宽高,进行浮动,中间 overflow: hidden)
left 和 right 必须在center 前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 800px;
height: 400px;
background: #0eb40b;
}
.left {
float: left;
width: 100px;
height: 100px;
background: #1122b9;
}
.right {
float: right;
width: 100px;
height: 100px;
background: #dc104d;
}
.center{
height: 200px;
background: #bd661f;
overflow: hidden;
}
</style>
<body>
<!-- left 和 right 必须在center 前面 -->
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
flex
父级开启flex 中间 flex:1 两侧固定宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
display: flex;
width: 800px;
height: 400px;
background: #0eb40b;
}
.left {
width: 100px;
height: 100px;
background: #1122b9;
}
.right {
width: 100px;
height: 100px;
background: #dc104d;
}
.center{
flex: 1;
height: 200px;
background: #bd661f;
}
</style>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
定位
子绝父相 父盒子设置左右padding值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
position: relative;
width: 800px;
height: 400px;
background: #0eb40b;
padding: 0 100px;
}
.left, .right {
position: absolute;
top:0;
width: 100px;
height: 100px;
}
.left{
left: 0;
background: #1122b9;
}
.right {
right: 0;
background: #dc104d;
}
.center{
height: 200px;
background: #bd661f;
}
</style>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>