盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深入地探讨CSS盒模型的原理和机制。
盒模型基本概念
所有HTML元素，在页面的呈现过程中，都遵循CSS制定的盒模型。盒模型的几个要素是border、margin、padding、content，如下图，
盒模型
- content：真正包含元素内容的区域
- padding(内边距)：内容和边框之间的一段间距，属于标签内部
- border(边框)：包含边框的区域，扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高
- margin(外边距)：该标签和其他标签之间的间距，设置此内容，不会影响标签的大小
当一个元素既有margin,又有padding,还有边框时，在普通流中所占的空间就是这些值的总和。即横向空间为：marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight，纵向的同理。
盒模型的分类及不同盒模型之间的区别
盒模型分为IE盒模型和W3C标准的盒模型。它们之间的区别在于IE盒模型和W3C标准盒模型计算高度和宽度的方式不同。具体不同表现在以下方面：
W3C标准盒模型（高度的计算类似）：
- 一个元素的宽度=
content - 盒子的总宽度=
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
W3C标准模型
IE怪异盒模型（高度的计算类似）：
- 一个元素的宽度=
content+padding+border - 盒子的总宽度=
margin-left+width+margin-right
IE盒子模型
如何通过CSS设置IE盒模型和W3C标准盒模型
//W3C标准盒模型（浏览器默认）
box-sizing:content-box;
//IE怪异盒模型
box-sizing:border-box;
box-sizing是CSS3的新属性，为了避免在不同的浏览器中表现不同的情况产生，我们可以这样使用
Element {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
JS如何设置盒模型的对应的宽和高
- 如果样式写在行内，可以通过
document.style.width/height获取盒模型的宽或高
<style>
#content{
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
</style>
<div id="content" style="width:100px"></div>
<script type="text/javascript">
var ele=document.getElementById('content');
console.log('content的宽度：'+ele.style.width); //100px
</script>
- 行内样式和外联样式都能取到，只有IE支持
<style>
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
</style>
<div id="content"></div>
<script type="text/javascript">
var ele=document.getElementById('content');
console.log('content的宽度：'+ele.currentStyle.width); //100px
</script>
- 行内样式和外联样式都能取到，主流浏览器几乎都支持
<style>
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
</style>
<div id="content"></div>
<script type="text/javascript">
var ele=document.getElementById('content');
console.log('content的宽度：'+window.getComputedStyle(ele).width); //100px
</script>
- 行内样式和外联样式都能取到，主浏览器几乎都支持
<style>
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
</style>
<div id="content"></div>
<script type="text/javascript">
var ele=document.getElementById('content');
console.log('content的宽度：'+ele.getBoundingClientRect().width); //100px
</script>
用盒模型解释边距重叠
边距重叠也称为外边距合并，指的是块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小时组合到其中的最大的外边距。
发生边距重叠的基本情况有三种：
- 相邻的兄弟姐妹元素：毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟元素外边距合并</title>
<style>
#box1{
width:200px;
height:200px;
border:1px solid red;
margin-bottom:10px;
}
#box2{
width:100px;
height:100px;
border:1px solid blue;
margin-top:30px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
可以发现两个盒子中间的距离不是“上面盒子的下边距”与“下面盒子的上边距”的和，而是两者中的较大值
- 块级元素与其第一个或最后一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父子元素外边距合并</title>
<style>
#box{
width:330px;
height:335px;
background:pink;
}
#box1{
width:200px;
height:200px;
border:1px solid red;
margin:10px;
}
#box2{
width:100px;
height:100px;
border:1px solid blue;
margin-top:30px;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
</html>
可以发现父容器的顶部和上面子容器的顶部合并，父容器的底部和下面子容器的底部合并
- 空块元素
如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存再，此时它的上下外边距将会合并
参考:
网友评论