css盒模型可以看成是一个封装html元素的盒子，包括外边距(margin),边框(border),内边距(padding)和内容(content)
标准盒模型：
每个部分都可以设置四个方向的属性值，这里拿外边距（margin）举例：
| 属性值 | 属性描述 |
| margin-top | 上方外边距 |
| margin-bottom | 下方外边距 |
| margin-left | 左方外边距 |
| margin-right | 右方外边距 |
标准盒模型的设置：box-sizing: content-box（默认值）;
此时盒子的宽度应该是设置的width属性值 + padiing + border
代码示例：
<style>
#div1{
width: 200px;
height: 200px;
padding: 100px;
margin: 100px;
border: 50px solid red;
box-sizing: content-box;
}
</style>
<body>
<div id="div1">
</div>
<script>
var element = document.getElementById("div1");
var width = element.offsetWidth;
console.log(width)
</script>
</body>在这段代码中，我获取了该元素的宽度并将其打印在控制台中，输出结果为：
此时宽度就是200px(width)+100px(padding)乘以2+50px(border)乘以2=500px。
乘以2的原因是因为要同时算上左右的内边距和边框。
ie盒模型：
可以看出标准盒模型的width只有正文content，ie盒模型的width是content+padding+border
则ie盒模型的宽度就是设置的width属性值
ie盒模型的设置：box-sizing:border-box
代码示例：
<style>
#div1{
width: 1000px;
height: 200px;
padding: 100px;
margin: 100px;
border: 50px solid red;
box-sizing: border-box;
}
</style>
<body>
<div id="div1">
</div>
<script>
var element = document.getElementById("div1");
var width = element.offsetWidth;
console.log(width)
</script>
</body>此时宽度就是我们设置的width=1000px
2246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
