区分怪异盒模型和W3C盒模型
直接说我的理解
怪异盒模型和w3c模型的主要区别：
w3c标准的盒模型中的实际width/height = content + padding + border
而怪异盒模型当中：
实际的width/height = 直接定义的width和height
对于怪异盒模型换一种说法来说就是：
在怪异盒模型中设置的padding和border，盒子的实际大小不会变，通过减少content的宽度和高度来补上所设置的padding和border
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: skyblue;
padding: 20px;
border: 5px solid blueviolet;
box-sizing: content-box;
margin: 0 auto
}
#div2{
width: 200px;
height: 200px;
background-color: #bbffaa;
padding: 20px;
border: 5px solid gray;
box-sizing: border-box;
margin: 0 auto;
}
#a111{
height: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="a111"></div>
<div id="div2"></div>
</body>
</html>
效果图如下：
在代码中我给两个盒子都设置了相同的宽、高、border和padding，但是盒子出现不同大小的主要原因是因为第二个盒子的box-sizing属性设置为了boder-box，打开谷歌浏览器按下f12我们可以看到这个盒子的属性
图中，content的大小由原来的给定的200 * 200，现在变成了150*150，在把盒子的box-sizing设置为boder-box后，就会从原本的200*200的大小剥离50px的空间出来分配给设置padding和border（因为padding值是20，border值是5 ，两边都有就是（20+5）*2 = 50px）。也就是我之前所提到的 实际的width/height = 直接定义的width和height
以上这个情况也就是怪异盒模型，有些地方也叫做IE盒模型。
接下来我们来看看W3C盒模型
如图所示，在给W3C盒模型添加padding和border后，盒子的内容区content并没有改变，依旧还是200，添加的padding和border所占用的空间往外填充，此时盒子的实际width/height = content + padding + border
如有错误，欢迎指正
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
