CSS盒子模型分为标准盒子和IE盒子，那么两者有什么区别呢。我们运行下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
#box{
width:300px;
height:100px;
border:5px solid red;
padding:10px;
}
</style>
<body>
<div id="box"></div>
</body>
</html>我们将.box的高度设为了100px，宽度设为了300px，并添加了5px的边框、10px的内边距。使用Chrome浏览器运行代码。
可以看到.box实际尺寸是330*130，为什么是330*130呢？下面我们看下此时.box的布局信息。
标准盒模型总宽度为：width+padding+border;以上.box的总宽度即为300+(10+5)*2=350。
下面我们看下IE盒模型是如何布局的：
使用box-sizing属性将.box转换为IE盒模型，即添加box-sizing:border-box
border-sizing:inherit | content-box| border-box;
inhert表示继承父元素的border-sizing值；
content-box表示标准盒模型；
border-box表示IE盒模型；
再次运行代码，效果如下所示。
.box实际尺寸变为了300*100，该模式下的.box布局如下：
我们发现蓝色部分也就是content的宽度变为了270。
IE盒模型对.box的宽度是这样计算的：width=content+padding+border;所以box的宽度为300px。
也就是说我们通过在css中定义的width/height,标准盒模型和IE盒模型渲染是不一样的。标准盒子将我们设定的width/height应用到内容的宽度/高度，而IE盒子将我们设定的width/height应用到了元素的边框。
下面我们使用JS获取.box占用的空间大小。
在原来代码中运行如下JS：
var boxElement = document.getElementById("box");
console.log(boxElement.offsetWidth);在标准盒模型模式下，以上代码打印330；在IE盒模型下打印300。
扫一扫
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
