css盒模型知识点梳理

最新推荐文章于 2022-09-20 16:39:26 发布

shuuy

最新推荐文章于 2022-09-20 16:39:26 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/YS182118/article/details/117472685

版权

css盒子模型有关知识：

首先盒子模型就是网页中放置网页内容的一个容器，css盒子模型又两种：第一种：标准的w3c盒子模型第二种IE盒子模型。
首先一个盒子模型包括了内容的宽和高，盒子padding值，盒子的边框，盒子的margin值。
两种不同的盒子模型中的widht 和 height 定义是不一样的。
- 在标准盒子模型中：widht 就是里面内容的宽度， height 就是内容的高度。（不包括盒子的padding值和boder值）
- 在IE盒子模型中： widht 是内容宽度 + padding-left + padding-right + boder-left宽度 + boder-right宽度(包含了内容的宽度，padding值，boder值)
标准盒子模型：图示：（来自牛客面经侵删）

IE盒子模型：图示：（来自牛客面经侵删）
在css3中引入了box-sizing box-sizing 属性定义了浏览器如何计算一个元素的总宽度和总高度。
- content-box(默认值)
  - 使用标准盒子模型来计算宽和高，只包括元素内容的宽和高。
- boder-box
  - width和height属性包括内容，内边距，和边框就是引用了IE盒子模型
下面给出两种模型的对比：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒子模型</title>
	<style>
		#stanard {
			width: 100px;
			height: 100px;
			border: 20px solid red;
			margin: 20px;
			padding: 20px;
		}
		#IE {
			width: 100px;
			height: 100px;
			border: 20px solid red;
			margin: 20px;
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div id ="stanard">
		这个标准盒子模型
	</div>
	<div id = "IE">
		这个是IE盒子模型
	</div>
</body>
</html>