CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。也可以理解成定义网页中各个元素的排列方式，把元素按照正确的大小放在合适的位置。传统PC端有三种布局方式，常规流、浮动、定位。而常规流又被称作标准流也就是我们所熟知的盒子模型。本次分享CSS布局中的盒模型。
网页中的每一个标签，都可以看做一个“盒子”，而浏览器渲染网页时，会将网页中的元素看做一个个矩形区域，也称为“盒子”。
CSS中的盒子模型由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。抽象具象化，我们可以把盒子模型理解成一个包装良好的物品，content区域就是你所购买的物品本身，例如 精华、粉底、机械键盘、4090。Padding区域就是物品外面的防护层，例如 泡沫，border区域就是物品本身的包装，而margin区域就是两个物品之间的距离。
常见的标准流元素为：
1、块级元素：独占一行，其密度和父级相同，可以设置宽高，不设置宽度会是父级的100%，高度将由内容撑开。
2、行内元素：一行可以显示多个，不可以设置宽高（设置宽高并不会显示）。
<!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>
span{
background-color: greenyellow;
}
</style>
</head>
<body>
<span>1111</span>
<span>2222</span>
</body>
</html>
<!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>
/* 设置宽高不生效 背景色宽高和字体宽高一样 */
span{
width: 300px;
height: 300px;
background-color: greenyellow;
}
</style>
</head>
<body>
<span>1111</span>
<span>2222</span>
</body>
</html>
3、行内块元素：一行可以显示多个，并且可以设置宽高。
注意：可以利用display转化元素显示模式。
浏览器中的某些标签会有默认的padding和margin，针对此现象有两种解决方法，第一种所需要消除默认内外边距的标签并集，然后设置margin和padding为0。第二种，‘*’选中所有标签，然后设置margin和padding为0。（代码如下，可以自行尝试）
<!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>
/* 第一种 */
p,h1{
margin: 0;
padding: 0;
}
/* 第二种 */
/* *{
margin: 0;
padding: 0;
} */
</style>
</head>
<body>
<p>pppppp</p>
<h1>h1h1h1</h1>
</body>
</html>
外边距有两种常见的折叠现象：
1、合并问题：垂直布局的块级元素上下margin会合并（结果为margin最大值）。解决方案：只给一个margin设置所需的值，不采取相加方式。
2、塌陷问题：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。解决方法：第一种，父元素设置border-top或者padding-top（分隔父元素和子元素之间的margin-top）；第二种，父元素设置overflow: hidden;第三种，转成行内块元素；第四种，设置浮动。
