CSS盒模型:提高你CSS的基础

原作者：Steven Bradley

发布时间：2009年11月16日

原文地址：http://www.instantshift.com/2009/11/16/css-box-model-the-foundation-for-improving-your-css/

翻译：子毅- - - - - 将Javascrip进行到底

CSS盒模型是使用CSS的基础，每个元素由一个矩形框包围的元素定义。理解盒模型的工作原理是理解CSS的关键，并且使你对布局和呈现有更好的控制。现在就让我们开始讨论什么是CSS盒模型、盒模型是怎样影响它周围的盒子的，以及一些常见浏览器在呈现CSS盒子时出现的问题

。

简而言之，CSS盒模型描述的是正在为HTML元素生成的盒子。下面你将学到的技巧和技术，准备地描述了使用CSS盒模型来进行开发的最佳实践。

什么是CSS盒模型

在DOM树中，每个元素被定义为一个矩形框。CSS盒模型描述并定义了每个矩形框的属性。最简单的方式理解盒模型是看下面这张图

每个元素都和它内容相关的高度和宽度，包围在内容周围的内边距，并且有包含内容、内边距的边框。最后，每个元素都有在边框之外的外边距。内边距、边框、外边距在上，右，下，左四面都有相应的值。

元素的边缘从它的border开始，并且用padding值来控制元素的内边距，用margin值来控制它和周围元素之间的空白。请注意，当使用元素的 background属性时，背景会扩展到边框（border），背景并不包括元素的外边距(margin);

块级元素和行内元素的区别

假如你对CSS的display属性熟悉，你知道它有block，inline，none三个值。块盒子和行内盒子是 两种不同类型的模型，他们是盒模型在页面上呈现时的关键区别（ Both adhere to the box model with one key difference in the way each is laid out on the page.）

块级元素在布局是以垂直方式一个跟着一个。假如在html文档中有两个紧挨着的块级元素，第二个元素将在第一个元素的下方显示。然而行内元素在布局时是以

水平方式显示的。如果包含元素有足够的空间，行内元素总是在它前面元素的右边显示。

行内元素将包围足够的空间。它们将在紧接着前一个元素显示，并且尽可能地占据剩下的水品空间。如果超过了一行，它们将移到下一行，再次尽可能填满水平水品空间。然而块级元素会自动地换到下一行，它们并不会去填满剩下的空间。

块级元素和行内元素对应ddsplay的两个属性，nong属性意味着没有元素存在假如你声明任何元素的display属性为none，这个元素会完全从正常流中除去。相反地，假如你将元素的 visibility属性设置为hidden,那么这个元素会根据CSS盒模型规则任然会填满相应的空间。即使及看不见它，但它确实是占据着空间的。

浮动、定位和正常文档流

上面关于块级元素和行内元素的讨论是假定元素存在于正常流中的。被浮动和定位的元素任然是盒子，但是他们以不同的方式从正常流中除去了。它们都该变了其他元素对它们的反应。

正常流--- 在CSS2.1中，正常流包括块级元素、行内元素，相对定位的块级或行内元素，包行在定位元素中的元素。

浮动 ---（译注：原文这里无）

当你为一个元素设置宽和高时，你只是设置了元素内容的区域。包含盒子的宽和高是以下面的是自定义的：

包含块的width = 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right' + 'margin-right'

包含块的height = 'margin-top' + border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + border-bottom-width' + 'margin-bottom'

注意，包行块的宽度和高度包括左和右或 上和下的外边距和内边距，以及边框。

当其中任何一个值没有初始化时，一个跨浏览器开发的冲突是 每个浏览器可能会进行不同值的初始化来定义盒模型。用reset CSS的原因就是保证所有的浏览器都有相同的初始值。

盒模型和IE6的冲突

老版本的IE浏览器包括IE6(没有合适的文档类型)有一个盒模型bug，并且在计算width是不准确

宽度只指元素的内容宽度。老版本的IE和IE6在混杂模式(quirks mode)在计算width时包括了内容区域的宽度、左右内边距的宽度、左右边框的宽度

相似地，在计算高度时，它也包括了内边距、边框的值

在大多时候只要你使用了合适的文档类型，你并不需要处理这个冲突。尽管IE6任然在使用，并且一点你没有声明一个合适的文档类型，IE6将转换到混杂模式，并且不准确地计算高度和宽度，正如上面描述的。

总结

CSS盒模型是其他CSS技术的基础。记住，在文档树中，每个元素被定义为一个矩形框，并被这个矩形框描述。盒模型有两种类型，块级盒子和行内盒子，每种类型都有关于在哪放置，在它后面的元素该怎么放置的规则。

当一个盒子被设置为display：none，这个盒子将不再占据空间。

当一个盒子被设置为visibility：hidden时，这个盒子虽然看不见，但它任占据着它的空间。

浮动和定位元素从正常文档流中去除，并且会影响他们放着在哪里，包围着他们的元素将怎样放置。

老版本的IE浏览器在计算可见内容区域的宽度时，它将包含这个盒子本身。这个问题不会经常遇到，当是不应该忽略它

我希望这篇文章能够帮助你更好地理解盒模型是怎样工作的，但你是，如果你有任何问题都可以在下面留言