css之旅（一）css盒模型

一天一丢丢

已于 2022-04-05 17:21:56 修改

阅读量410

点赞数

分类专栏： css 文章标签： css

于 2020-07-09 00:05:27 首次发布

本文链接：https://blog.csdn.net/letianxf/article/details/107217724

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文讲解css中w3标准盒模型和IE标准盒模型的区别。
所有的html元素都可以看做是一个盒子，它包括边距margin，边框border，填充padding，内容content几部分组成。
css中的盒模型分为两种，分别为w3标准盒模型和IE盒模型，它们的区别在于大小不同。

w3标准盒模型的width，height就是指content的区域
IE标准盒模型的width，height指的是content + padding + border

一、w3标准盒模型

w3标准盒模型的width，height就是指content的区域。

<!DOCTYPE html>
<html>
<head>
	<style>
		.w3{
			width: 150px;
			height: 20px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
		}
	</style>
</head>
<body>
	<div class="w3" >
		W3标准盒模型
	</div>
</body>
</html>

在这里插入图片描述
可以看到，width为150，height为20,都是在content区域。

二、IE标准盒模型

IE标准盒模型的width，height指的是content + padding + border。

<!DOCTYPE html>
<html>
<head>
	<style>
		.ie{
			width: 150px;
			height: 20px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="ie" >
		IE标准盒模型
	</div>
</body>
</html>

在这里插入图片描述
可以看到，width 150 = content 110 + padding-left 10 + padding-right 10 + border 20; 而高度设置为20，content直接变成了0（没变成负的）；

三、两种盒模型之间的切换

css有个box-sizing属性，可以切换盒模型

w3标准盒模型（默认值）：content-box
IE标准盒模型：border-box

<!DOCTYPE html>
<html>
<head>
	<style>
		.w3{
			width: 150px;
			height: 50px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: content-box;
		}

		.ie{
			width: 150px;
			height: 50px;
			border: 10px solid black;
			padding: 10px;
			margin: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="w3" >
		W3标准盒模型
	</div>
	<div class="ie" >
		IE标准盒模型
	</div>
</body>
</html>

一天一丢丢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之旅（一）css盒模型

本文讲解css中w3标准盒模型和IE标准盒模型的区别。所有的html元素都可以看做是一个盒子，它包括边距margin，边框border，填充padding，内容content几部分组成。css中的盒模型分为两种，分别为w3标准盒模型和IE盒模型，它们的区别在于大小不同。w3标准盒模型的width，height就是指content的区域IE标准盒模型的width，height指的是content + padding + border一、w3标准盒模型w3标准盒模型的width，height就是
复制链接

扫一扫