(border-box)盒子模型w3c、IE的区别

最新推荐文章于 2024-07-20 22:27:34 发布

火兰

最新推荐文章于 2024-07-20 22:27:34 发布

阅读量2.9k

点赞数 3

分类专栏： CSS 文章标签：前端 css html css3

本文链接：https://blog.csdn.net/qq_47443027/article/details/126070705

版权

CSS 专栏收录该内容

24 篇文章 8 订阅

订阅专栏

主要看这两种盒子模型的优缺点及适用场景

一、区别

盒模型: 内容(content)、填充(padding)、边界(margin)、边框(border)；

标准 W3C 盒子模型的 content 部分不包含其他部分。
IE 盒子模型的 content 部分包含了 border 和 padding。(IE 6-用的自家模型，IE6,7 怪异， 8+已经和W3C 同步了)

区别:

IE的 width = border + padding + content（即：宽度固定，增加border或padding会向内挤压content）
W3C (标准盒子模型）width = content

用代码对比演示一下，就很明显啦！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				padding: 10px;
				margin: 10px;
				border: 10px solid peru;
				background-color: pink;
				box-sizing: content-box;   /* 默认样式，W3C盒子/标准盒子 */
			}
			#box2{
				width: 100px;
				height: 100px;
				margin: 10px;
				padding: 10px;
				border: 10px solid peru;
				background-color: skyblue;
				box-sizing: border-box; /* IE盒子 */
			}
		</style>
	</head>
	<body>
		<div id="box">
			content-box（默认）
		</div>
		<div id="box2">
			border-box
		</div>
	</body>
</html>

在这里插入图片描述

二、标准盒子与IE盒子的优劣

标准盒子的好处在于比较符合人定义元素的宽高度，但IE 盒子更适合布局和表单。有一个场景会比较常见，比如有两个div，各占50% ，很明显如果设定padding border margin ，这两个div就不会在一行了。所以IE 盒子更适合布局。目前css3有个属性 box-sizing 可以设定div 的盒子模型类别。如下：