注：全文摘要自网络开发者网站，当然间隔也会整理一些思路和格式排版添加进去。

CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。在理解如何创建 CSS 布局之前，你需要理解框模型。

框属性

文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

【width 和 height】宽度和高度

width 和 height设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。

【padding】内边距

padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。

该层的大小可以通过简写属性padding一次设置所有四个边，或用 padding-top、padding-right、padding-bottom和padding-left 属性一次设置一个边。

• padding-top 是指一个元素在内边距区域（padding area）中上方的高度。

• padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。

• padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。

• padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。

• 内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。

【border】边界边框

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。

border简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black;但这个简写可以被各种普通书写的更详细的属性所覆盖：

• border-top，border-right, border-bottom, border-left : 分别设置某一边的边界厚度／风格／颜色。

• border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。

• 你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。

附：

• border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。

• border-right 是属性border-right-color, border-right-style, 和border-right-width的三者的缩写。这些属性都是在描述一个元素的右边的边框border。

• border-bottom 简写属性把下边框的所有属性： border-bottom-color，border-bottom-style 与 border-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。

• border-left 是属性border-left-color, border-left-style, 和border-left-width的三者的缩写。这些属性都是在描述一个元素的左边的边框border。

• border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

• border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

【margin】外边距

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和margin-left。

注意: 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。

• margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

• margin-top 属性用来设置元素的顶部外边距，你也可以使用负值。

• margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。

• margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

• 竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing.

一些提示及想法

• 默认情况下background-color/background-image 延伸到了border的内边缘。background-clip( background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。) 属性来改变。

• 如果content框变得比示例输出窗口大，它将从窗口溢出，此时会出现滚动条，你可以滚动窗口来查看盒子剩余的内容 。你可以使用overflow（overflow 属性指定当内容溢出其块级容器时,是否剪辑内容，显示滚动条或显示溢出的内容。)属性来控制溢出。

• 框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。

• border也忽略百分比宽度设置。

• 你应该注意的是框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整框模型。使用值