css中的盒子概念

这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助

CSS 中有个重要的概念，就是盒子模式 (Box model)。

胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。

先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。

盒子里由外至里依次是：

• margin 边距
• border 边框
• padding 间隙 (也有人称做补丁)
• content (内容，比如文本，图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

 

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。

 

附：Internet Explorer 6 中的 CSS 增强功能

http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx?mfr=true

Internet Explorer 6 与更早版本间 width 和 height 属性计算方式的区别的图示说明

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。 对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

  

• margin：层的边框以外留的空白     
• background-color：背景颜色     
• background-image：背景图片     
• padding：层的边框到层的内容之间的空白      
• border：边框      
• content：内容     

边框(border)边距(margin)和间隙(padding)属性的区别

　　边框属性(border)用来设定一个元素的边线。
　　边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　间隙属性(padding)是用来设置元素内容到元素边界的距离。
　　这三个属性都属于CSS中box类型的属性。

　　下面这个示意图，很形象地体现了三者之间的区别。

margin语法：

margin : auto | length
说明：

检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

Mozilla建议的CSS书写顺序

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/