CSS—盒模型(3分钟结合示例精通盒模型)
个人博客：haichenyi.com。感谢关注
1. 目录
- 1–目录
- 2–概念
- 3–内容
- 4–内边距
- 5–边框
- 6–外边距
- 7–类型
概念
在HTML中，每一个元素都可以看作一个矩形的盒子。如图
如上图所示，一个一个的矩形都可以堪称一个元素。矩形有大有小，边有粗有细，离HTML四周的边距有近有远。在HTML里面，一个盒子的大小，边的粗细，离四周的距离这都是盒模型的组成要素。
我们以边为分界线，把一个盒模型分为"里面"，“边”，和"外面"。
在HTML中，"里面"又分为内容(content)，内边距(padding)；"边"叫边框(border)；"外面"叫外边距(margin)。
内边距(padding)就是边框距离内容的距离。
如上图，第一个元素所示，红色部分就是元素的内容(content)，绿色部分就是元素的内边距(padding)，黑色边部分就是元素的边框(border)，黑色的边框到html边的距离，类似于紫色线条部分就是外边距(margin)，外边距也是分四周的，并不是只有左边。这里只是拿左边举个例子。
综上，一个盒子的四个主要组成部分。由内到外，依次是：内容(content)——内边距(padding)——边框(border)——外边距(margin)。
内容(content)
定义：元素实际的显示给用户看的东西。比方说，img标签的图片，div显示的文本。等等
设置：在css中，可以通过width和height属性来设置内容区域的大小。设置代码放在后面。
内边距(padding)
定义，内容和边框之间的距离，让内容不会紧挨着边框，内边距是无法设置颜色的，它的颜色由内容的背景色定。
特点：
1. 可以设置上下左右四个方向上的值。
2. 不可以为负值
设置：设置代码放在后面
影响：在默认类型下，添加padding值会导致盒子变大。
边框(border)
定义：围绕在内容和内边距的外面，用于给盒子添加一个可视边界，也可以不设置。
设置：设置代码放在后面
外边距(margin)
定义：位于边框的外面，控制盒子与盒子之间的距离。
特点：
1. 可以设置上下左右四个方向上的值。
2. 可以为负值
3. 在垂直方向上存在"外边距塌陷"的问题。也就是，上面盒子的marginBottom:10px;下面盒子的marginTop:20px;那么，他们之间的距离取较大的20px，而不是两者相加的30px。
4. "外边距塌陷"的另一个表现，当父view没有设置边框、内边距或overflow属性时，子view设置的marginTop的值会传递给父View，导致父View整体往下移动。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS盒模型</title>
<style>
/* 清除默认值 */
* {
margin: 0px;
padding: 0px;
}
.content-test {
/*设置盒子宽度*/
width: 100px;
/*设置盒子高度*/
height: 100px;
/*设置盒子外边距*/
margin: 10px auto 20px;
/*设置文本水平居中显示*/
text-align: center;
/*设置盒子背景色*/
background-color: aqua;
/*设置盒子边框*/
border: 10px solid red;
/*设置盒子内边距*/
padding: 10px;
}
.content-test1 {
/*设置盒子宽度*/
width: 100px;
/*设置盒子高度*/
height: 100px;
/*设置盒子外边距*/
margin: 10px auto 0px;
/*设置文本水平居中显示*/
text-align: center;
/*设置盒子背景色*/
background-color: aqua;
/*设置盒子边框*/
border: 10px solid red;
/*设置盒子内边距*/
padding: 10px;
}
.parent {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: brown;
/* padding: 5px; */
/* border: 3px solid black; */
/* overflow: hidden; */
}
.child {
width: 50px;
height: 50px;
background-color: cadetblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="content-test">哈哈哈</div>
<div class="content-test1">哈哈哈1</div>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
类型
盒模型分为两种类型：标准盒模型和IE盒模型。这两者怎么区分呢？box-sizing属性。
那么，两者有什么区别呢？在说结论之前，直接看案例说话。在上面代码的基础上，增加如下代码
<!--样式-->
.normal {
width: 100px;
height: 100px;
padding: 30px;
border: 5px solid black;
margin: 10px;
/* 正常模型 */
box-sizing: content-box;
background-color: coral;
}
.ie {
width: 100px;
height: 100px;
padding: 30px;
border: 5px solid black;
margin: 10px;
/* ie模型 */
box-sizing: border-box;
background-color: red;
}
<!--元素-->
<div class="normal"></div>
<div class="ie"></div>
如上图所示，简单来说，标准模型元素设置的width和height只是content的宽高。而ie模型元素设置的width和height设置的宽高是content+padding+border的总体宽高。
再来结合css样式仔细看看上面两张图右边的盒子标注。
标准模型的宽高：宽度=我们设置的width(100px)+左右内边距(各30，也就是60px)+左右边框(各5，也就是10px)+左右外边距(各10，也就是20px，外边距看不见)=100+60+10+20=190px。高度同理
ie模型的宽高：宽度=我们设置的width(100px)+左右外边距(各10，也就是20px)=100+20=120px。高度同理。那么，我们设置padding和border的宽度呢？
一个简单的数学题。已知总宽度为100px，左右padding各为30px，左右border各位5px。求内容区域的宽度。
公式：宽度=左border+左padding+content+右padding+右border。
100=5+30+content+30+5，content=100-5-30-30-5=30
所以，内容的宽度就只有30了。也就符合图上面的标注信息了。
这就是标准盒模型和IE盒模型的区别。
PS:整篇文章，精炼一下，如下
- 盒模型由:content+padding+border+margin组成。
- 盒模型有两种:正常盒模型和IE盒模型，通过box-size区分。不设置该属性就是默认值content-box(正常盒模型)，设置为border-box，则为IE盒模型
- 两种盒模型的区分就是：
正常盒模型大小=content+padding+border+margin
IE盒模型大小=content(content+padding+border)+margin