两种盒子模型的理解

作者：Gausst松鼠会 | 2024-05-27 08:59:58

踩

两种盒子模型

一.先用代码和效果图来说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒模型</title>
</head>
<style type="text/css">
.content {
	width: 300px;
	height: 400px;
	border: 5px solid #005500;
	padding: 20px;
	background-color: #898989;
}
</style>
<body>
	<div class="content" id="zwkkkk1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

啊啊啊啊啊啊啊
这里我们会发现明明我们设置了300400长宽比，呈现出来的是一个350450的盒子.
打开调试页面可以看出来:
在这里插入图片描述
设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）
由此可见:
1.margin(外边距) - 清除边框外的区域，外边距是透明的。
2.border(边框) - 围绕在内边距和内容外的边框。
3.padding(内边距) - 清除内容周围的区域，内边距是透明的。
4.content(内容) - 盒子的内容，显示文本和图像。
可以得出:

width(350)=300(content)+202(padding)+52(border)
height(450)=400(content)+202(padding)+52(border)
即为:
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

二.两种盒子模型:

1.标椎盒子模型:

在这里插入图片描述
2.IE(怪异盒子模型):

不同之处:在IE盒子模型中width是content+padding+border这三个部分的宽度,在IE盒模型中，我们设置的height,width值包含：(content)+填充(padding)+边框(border) 这三个部分，而标准盒模型中height,width值只是content部分；

然后就是:
box-sizing的使用狂可以切换盒模型

box-sizing: content-box /**是W3C盒子模型 */
 box-sizing: border-box /**是IE盒子模型*/

/**box-sizing的默认属性是content-box*/
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/630819