关于CSS盒模型-CSDN博客

本文链接：https://blog.csdn.net/shisiio/article/details/110134320

什么是CSS盒模型

在我们使用css进行网页布局的时候，我们一定会用到的就是盒子模型，那么盒模型是有两个标准的，一个是标准盒模型，一个是IE盒模型(怪异盒模型)
而在讨论标准盒模型之前首先要把盒模型的写法知道

内容属性

属性	实际作用
width	设置内容的宽度
height	设置内容的高度
max-width	设置内容的最大宽度
max-height	设置内容的最大高度
min-width	设置内容的最小宽度
min-height	设置内容的最小高度

边框属性

属性	实际作用
border	复合式写法，用于把针对四个边的属性设置在一个声明
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width	用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-color	设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-bottom	用于把下边框的所有属性设置到一个声明中
border-left	用于把左边框的所有属性设置到一个声明中
border-right	用于把右边框的所有属性设置到一个声明中
border-top	用于把上边框的所有属性设置到一个声明中

内边距属性

属性	实际作用
padding	复合式写法，在一个声明中设置元素的所有内边距属性
padding-bottom	设置元素的下内边距
padding-left	设置元素的左内边距
padding-right	设置元素的右内边距
padding-top	设置元素的上内边距

外边距属性

属性	实际作用
margin	复合式写法，在一个声明中设置元素的所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距

标准盒模型

标准盒模型构造结构如下

width:内容的宽度的体现，盒子的内容以及文本和图像
padding:盒子的内边距，主要清除内容周围的区域，内边距是透明，也有资料将其翻译为填充
boder:盒子的边框，围绕在盒子周围的边框
margin：盒子的外边距，主要清除盒子周围的区域，外边距是透明的，也有资料将其翻译为空白或空白边

w3c标准盒子模型

在下面的代码中分别对块级元素div和行内元素span分别设置了同样的属性，让我们来看看他的效果吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS的盒子模型</title>
		<style type="text/css">
			.content{
				/* 设置盒子的宽  */
				width: 200px;
				/* 设置盒子的高  */
				height: 100px;
				/* 设置盒子的宽内边距  */
				padding: 40px;
				/* 设置盒子的边框大小 样式 颜色  */
				border: 2px solid #FF0000;
				/* 设置 盒子的 外边距  */
				margin: 20px;
				/* 设置盒子的颜色  */
				background: #00BBFF;
			}
			.element{
				width: 200px;
				height: 100px;
				padding: 40px;
				border: 2px solid #FF0000;
				margin: 20px;
				background: #00BBFF;
			}
		</style>
	</head>
	<body>
		<div class="content"></div>
		<br />
		<br />
		<span class="element"></span>
	</body>
</html>

效果图：

div的盒子示意图：
div盒子示意图
span盒子示意图：
sapn盒子示意图
由此可以看出在同样的属性当中块级元素和行内元素即使设置了同样的属性也不会以同样的方式显示
那么在浏览器中行内元素span到底少了什么样的属性呢？
根据示意图在浏览器中的选中不难看出以下两点

对行内元素设置height以及width是无效的
对行内元素设置margin后只有margin-left以及margin-right会生效

而对于div这类似的块级元素根据示意图可以看出他实际的盒子宽度与高度

盒子的实际宽度：200(width) + 40*2(padding-left/padding-right) + 2*2(boder-left/boder-right) + 20*2(margin-left/margin-right)
盒子的实际高度：100(height) + 40*2(padding-left/padding-right) + 2*2(boder-left/boder-right) + 20*2(margin-left/margin-right)

IE盒模型(怪异盒模型)

IE盒模型构造结构如下：

width:内容不仅包括content，还有padding以及border
margin：盒子的外边距，主要清除盒子周围的区域

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，如图：

注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
那么如何解决外边距合并呢？