盒模型是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获取盒模型的宽或高
#content{
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
var ele=document.getElementById('content');
console.log('content的宽度:'+ele.style.width); //100px
行内样式和外联样式都能取到,只有IE支持
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
var ele=document.getElementById('content');
console.log('content的宽度:'+ele.currentStyle.width); //100px
行内样式和外联样式都能取到,主流浏览器几乎都支持
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
var ele=document.getElementById('content');
console.log('content的宽度:'+window.getComputedStyle(ele).width); //100px
行内样式和外联样式都能取到,主浏览器几乎都支持
#content{
width:100px;
height:200px;
border:2px solid blue;
padding:20px;
margin:20px;
}
var ele=document.getElementById('content');
console.log('content的宽度:'+ele.getBoundingClientRect().width); //100px
用盒模型解释边距重叠
边距重叠也称为外边距合并,指的是块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小时组合到其中的最大的外边距。
发生边距重叠的基本情况有三种:
相邻的兄弟姐妹元素:毗邻的两个兄弟元素之间的外边距会塌陷(除非后者兄弟姐妹需要清除过去的浮动)。示例:
兄弟元素外边距合并#box1{
width:200px;
height:200px;
border:1px solid red;
margin-bottom:10px;
}
#box2{
width:100px;
height:100px;
border:1px solid blue;
margin-top:30px;
}
可以发现两个盒子中间的距离不是“上面盒子的下边距”与“下面盒子的上边距”的和,而是两者中的较大值
块级元素与其第一个或最后一个子元素
父子元素外边距合并#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;
}
可以发现父容器的顶部和上面子容器的顶部合并,父容器的底部和下面子容器的底部合并
空块元素
如果存在一个空的块级元素,其border、padding、inline content、height、min-height都不存再,此时它的上下外边距将会合并
参考: