CSS盒模型

世雄

无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口)，然后就会折行。

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

无宽度浮动盒子

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

内联元素也是盒子

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

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

亲眼目睹一下

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

* {

border: 1px solid red !important;

}

上一页  [1] [2] 

上一页  [1] [2]