css盒子模型理解

最新推荐文章于 2022-03-06 17:29:13 发布

qq_43101834

最新推荐文章于 2022-03-06 17:29:13 发布

阅读量119

点赞数

分类专栏： html和css 实习学习

本文链接：https://blog.csdn.net/qq_43101834/article/details/113625097

版权

实习学习同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html和css

14 篇文章 0 订阅

订阅专栏

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

上面都是学习网站摘抄的专业术语，盒子模型我理解为是盛放元素的容器，它规定了我们要在在浏览器展示一个元素所需要的展示规则，但是因为浏览器种种原因，盒子模型分为了正经盒子模型，和不正经盒子模型（怪异盒子模型）。
先说正经盒子模型。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			#box1 {
				padding: 20px;
				background-color: greenyellow;
				width: 100px;
				height: 100px;
				margin:10px;
				border: 20px skyblue solid;
			}
		</style>
	</head>
	<body>
		<div id="box1">我是正经的</div>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
上面正经盒子模型应该呈现的展示情况，整个盒子占地儿宽度为
自身100+左右padding40+左右border40+左右margin20 = 200
占地儿高度计算同上。
所以当我们想要展示某个元素，这个元素除了设置自身宽度外，还设置了其他框属性，那这个元素最终要占的地方大小是把所有的边边框框宽度都加起来得结果。
那么如果在屏幕上预留了300 * 300 的空地来装盒子，就应该计算好盒子宽度高度不能超过300，不然就装不下了。

那么不正经的盒子啥样呢

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			#box1 {
				padding: 20px;
				background-color: greenyellow;
				width: 100px;
				height: 100px;
				margin:10px;
				border: 20px skyblue solid;
				box-sizing:border-box;
			}
		</style>
	</head>
	<body>
		<div id="box1">我是不正经的</div>
	</body>
</html>

在这里插入图片描述

看上面的截图，不正经的盒子字都装不下。最后一张截图的结构可以看到，中间蓝色的块块就只有20，可是代码里面不是设置了width为100吗？这就是盒子的怪异，其实它是将100的宽度分给了左右padding和左右border还有内容本身，所以最终怪异盒子的占地儿宽度就成了
100+左右margin10 = 120。
这就很麻烦了，给我300的地儿展示元素，正经盒子下我就一顿加不超过300就完事了。但是不正经的盒子还需要我去计算怪异宽度。（上面没提高度，因为高度同理，和宽度同等对待）

总结一下
标准盒模型下盒子的大小 = content + border + padding + margin
怪异盒模型下盒子的大小=width（content + border + padding） + margin

查过资料说一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 < !DOCTYPE html>即可。

自己电脑上的浏览器呈现的盒子模型都是正常的，之所以能模拟出不正常的效果，我用了一个属性。

可以通过属性box-sizing来设置盒子模型的解析模式

可以为box-sizing赋三个值：

1content-box：默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

2 border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

3 padding-box：将padding算入width范围

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

在怪异盒子代码中，我添加了box-sizing:border-box，所以能模拟出不正经盒子的状态，属实因为当前经验太少，不清楚正式项目中如何解决这个问题。我的想法是直接用这个属性，改变值来控制页面盒子的状态，或者子元素避免用padding、border，让父元素元素去控制，不过想了想好麻烦，好多计算的东西。