关于css盒模型的解说在网上到处都有详细的讲解,相信大家都有所了解了吧。今天借着与同事一起讨论关于css的一些难点问题,最后发现还是对css的核心了解的不是很透彻。借此雅兴重新谈谈css盒模型究竟是个什么玩意。

请看图(1):

Margin
Padding
Content
(图1)

(图1)是通过CSS的background,padding,margin,color,border,text-align,width,height等属性进行样式化后得到的一个类似与css盒模型的表示图。

以下代码是图1部分的css样式表:

[code lang=”css”]

.out-div {
color: red;
border: 1px dashed #aaa;
width: 400px;
height: 300px;
margin: 0 auto;
text-align: center;
background: #fff;
}
.padding-div {
border: 1px solid #000;
height: 240px;
margin: 0 20px 20px;
padding: 0 20px 20px;
background: #eee;
}
.content-div {
border: 1px dashed #aaa;
height: 100px;
margin: 10px 0 0 0;
padding-top: 100px;
background: #fddfdf;
}

[/code]

以下是图1部分的html结构:

[code lang=”html”]

Margin
Padding
Content

[/code]

那么究竟什么才是css盒模型呢?
我们都知道网页都是有HTML元素组成的,而每一个HTML元素都是一个长方形的盒子(Everthing is box),因此我们可以把网页看成是一个有众多有规则的盒子经过某种排列组成的。

现在回到图1可以清楚的看到一个盒子是通过padding,border,content三部分组成的。(如果是FireBug的用户的话,应该很明白图1所表达的意思了。)

注意图1中例子,margin 是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的

宽度(WIDTH): BORDER-LEFT + PADDING-LEFT + CONTENT + PADDING-RIGHT + BORDER-RIGHT

高度(HEIGHT): BORDER-TOP + PADDIN-TOP + CONTENT + PADDING-BOTTOM + BORDER-BOTTOM

下面谈谈在以下几种情况下盒子的宽度和高度问题:

1.值未声明的情况

如果未声明 padding 或者 border,那他们或者值为零(当对浏览器的默认值进行重置的情况下,例如(使用reset,* {margin:0; padding:0;})),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)

2.块级盒的默认宽度

如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。

但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。(注:通常只给块级元素固定宽度是指css盒模型中的content的宽度,因此再对它进行padding和border设置,将使用盒子变大。)

3.无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。由于绝对定位改变了文档流因此它们的宽度只需要适合它们所包含的内容。也就是说绝对定位的盒子的宽度随着内容的多少在变化,可以灵活运用在宽度自适应中。

由于这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。

对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。

4.无宽度浮动盒子

同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒 子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包 含它的宽度,你就是在自找麻烦。

5.内联元素也是盒子

在网页结构中,似乎大部分我们都是用块级元素来构建的。因此很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。前面已提到过每个元素都是盒子(everything is box),而对于内联元素来说,它的表现没有块级元素那里显眼罢了。(我们可以把内联元素的盒子想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding 和 border。

如果还没有理解everything is box,请大家安装firefox的FireBug 和 Web Developer 可以更深入的理解css盒模型了。

点击这里安装:最新版FireBug

点击这里安装:最新版Web Developer