【转载】CSS盒子模型

 

  盒子模型(Box Model)是从CSS诞生之时便产生的一个概念,对网页中的大部分对象,实际呈现形式就是一个盒子形状对象(即块状对象),对于这个基础又重要的概念,只要掌握盒子模型的尺寸及占位的标准技术方法,那就可以灵活驾驭盒子模型了!

  

CSS盒子模型

  网页设计中的每个元素都是长方形的盒子。怎样精确的计算盒子的尺寸?请看下面一幅图:

  

  盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。

  如果你是一个Firebug的用户,就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。

  

  注意到上面两个例子中,margin都是白色的,margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。
  盒子本身的大小是这样计算的:

Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom

  

值为声明的情况

  如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)。

  如果未声明盒子的width(而且这个盒子是一个块级元素),那么事情就变得有点怪异,我们先看这点,然后再看一下其他优秀的关于盒子模型的资料。

  

块级盒的默认宽度

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

  如果明确的确定宽度为100%,那么padding就会向外扩展。

  

  从这个例子可以看出,盒子的默认宽度并不是100%,也可能是其他值,应该了解这种特别有价值的情况,因为在现存的很多情况下,它对于设置/不设置宽度是很多帮助的。

  我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的”cols”属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延 展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。

  

无宽度的绝对定位盒子

  未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。

  

  这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。
对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。

  

  

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

内联元素也是盒子
  我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding 和 border。

    

  折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。

  

亲眼目睹一下

  想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:  

* { border: 1px solid red !important; }

 

   

 

  英文原文:The CSS Box Model
  中文原文:CSS 盒模型

 

 

posted @ 2010-01-04 14:22  漫凯维奇  阅读(...)  评论(... 编辑 收藏