日期:2019-07-29 15:27作者:北大青鸟西安华清校区
对一个网页来说,基本上页面上所有的元素对象,其实际的呈现形式都是一个盒子形状的抽象。如下图,
从图中可以看出,这个所谓的盒子其实就一个长方形(或者正方形)的抽象。从外到内,他由4层东西组成,分别是margin(间距),border(边框),padding(填充),content(内容)。他们的结构特征是一层包裹着一层。
另外一点就是,有点css基础的朋友应该都知道,css盒模型是区分方向的。请记住上右下左这个顺序。css中一些具有四项取值的属性(比如margin
,padding
等)都是按照这个顺序进行赋值的。
每当我们谈论css盒模型的时候,往往会涉及到盒模型延伸出来的两个问题,
业界的前端工程师们往往都不怎么青睐IE系的浏览器,甚至对比嫌弃无比。哈,我们这里不讨论这些历史遗留原因,只讨论W3C标准盒模型和IE盒模型各自的原理。
对于盒子,我们最关心莫过于盒子的尺寸:这家伙要占多大地皮?
这里仍然拿上一节中的图片来说,
假设我们这个盒子的css属性如下,
.box {
width: 200px;
height: 180px;
border: 5px solid #666;
margin: 10px;
padding: 10px;
}
那么,这个盒子需要占据的尺寸为,
宽度 = margin.left + border.left + padding.left + content.width + padding.right + border.right + margin.right
= 10 + 5 + 10 + 200 + 10 + 5 + 10
= 300
高度 = margin.top + border.top + padding.top + content.height + padding.bottom + border.bottom + margin.bottom
= 10 + 5 + 10 + 180 + 10 + 5 + 10
= 280
而盒子的实际大小为,
宽度 = border.left + padding.left + content.width + padding.right + border.right
= 5 + 10 + 200 + 10 + 5
= 280
高度 = border.top + padding.top + content.height + padding.bottom + border.bottom
= 5 + 10 + 180 + 10 + 5
= 260
简单的概括就是,盒子在页面占据的大小包括了margin
,border
,padding
以及content
。而盒子的实际大小(这里的实际大小,通过调试工具inspect可以看出来)包括border
,padding
以及内容区域content
,但是不包括margin
。
另一点需要说明的是,我们通过JavaScript代码获取某一个元素的大小时,所得到的width
和height
其实是盒子模型中的content
的大小。
IE家的盒模型跟W3C标准有点不同,如下图所示
从图中可以看出,IE盒模型也包含margin
,border
,padding
以及content
这几部分。(图中的offset
指的是元素的位置偏移,后面会说到这个问题。)
IE盒模型与标准盒模型的核心差异是:IE盒模型的content
部分包含了border
和padding
。
同样的,假设我们这个盒子的css属性如下,
.box {
width: 200px;
height: 180;
border: 5px solid #666
margin: 10px
padding: 10px;
}
那么,这个盒子需要占据的尺寸为,
宽度 = margin.left + content.width + margin.right
= 10 + 200 + 10
= 220
高度 = margin.top + content.height + margin.bottom
= 10 + 180 + 10
= 200
而盒子的实际大小为,
宽度 = content.width
= 200
高度 = content.height
= 180
ps:IE家的东西非要跟别人家的东西不一样,这是为什么呢?
如果一个块级元素未声明明确的宽度,并且是static
或者relative
定位,那么他的宽度将会保持100%的宽度(这里的100%指的是其最近父层元素),同时盒子的padding
和border
会向内推动而不是向外扩展。
但是,如果一旦明确设置了宽度为100%,那么padding
将会向外延伸。如下图,
从图中可以看出,很明显前者没有明确设置宽度的情况下,padding
将会向内推动,此时虽然黑底白字区域的宽度默认为100%,但是他的实际宽度是比其父层元素小的(没有300px)。
而后者明确设置了宽度为100%,此时padding
将会向外延展,从而保证了元素的实际大小为100%(即300px),但是此时盒子的大小已经超过300px了。