css拾遗(3)-外边距折叠
2022-03-30 本文已影响0人
姜治宇
<!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>Document</title>
<style>
.bg{
background:coral;
}
.bg2{
background:yellow;
}
</style>
</head>
<body>
<div class="bg">
<h1 >测试1</h1>
</div>
<div class="bg2">
<p>测试2</p>
</div>
</body>
</html>
折叠.png
我们希望容器可以完全包裹住内部元素，而不希望容器外发生折叠，应该是这样的：
去折叠.png
应该如何去除呢？
去掉折叠的办法
1、flex布局
<!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>Document</title>
<style>
.bg{
background:coral;
}
.bg2{
background:yellow;
}
.add-flex{
display: flex;
}
</style>
</head>
<body>
<div class="bg add-flex">
<h1 >测试1</h1>
</div>
<div class="bg2 add-flex">
<p>测试2</p>
</div>
</body>
</html>
2、overflow
<div class="bg" style="overflow:hidden;">
<h1 >测试1</h1>
</div>
<div class="bg2" style="overflow:auto;">
<p>测试2</p>
</div>
3、border
<div class="bg" style="border:1px solid #ccc;">
<h1 >测试1</h1>
</div>
<div class="bg2" style="border:1px solid #ccc;">
<p>测试2</p>
</div>
4、padding
<div class="bg" style="padding:10px;">
<h1 >测试1</h1>
</div>
<div class="bg2" style="padding:10px;">
<p>测试2</p>
</div>
5、浮动元素、内联块
6、绝对或固定定位
绝对或固定定位不会出现外部折叠，但relative相对定位不行。
