区分怪异盒模型和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
如有错误,欢迎指正