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
*
*/
 

你可能感兴趣的:(css中的盒子概念)