css入门经典--CSS属性篇（4)—If you love css 是我们从网络上整理出来的一篇文章并归在CSS/Xhtml教程栏目，如果侵犯了您的版权请第一时间联系我们。

本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的要害—盒子模型(Box model). 理解Box model的要害便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的要害. 字串3

注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 假如我们总用汉语词语代替其来解释的话, 到了实际应用时轻易混淆margin和padding的概念. 字串6

假如有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 假如将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.

字串4

1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等; 字串4

2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等; 字串9

3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素. 字串7

块级元素是构成一个html的主要和要害元素, 而任意一个块级元素均可以用Box model来解释说明.

字串4

Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig. 1):

字串2

字串8

该立体图引自:http://www.hicksdesign.co.uk/ (Under the Creative Commons License) 字串9

平面图如下(Fig. 2): 字串9

字串6

根据以上两图, 相信大家对于Box model会有个直观的熟悉.

以下说明margin和padding属性:

字串7

1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:

字串4

margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px; 字串7

根据上, 右, 下, 左的顺时针规则, 简写为

字串5

margin: 40px 40px 40px 40px;

字串8

为便于记忆, 请参考下图:

字串7

字串7

当上下, 左右margin值分别一致, 可简写为: 字串1

margin: 40px 40px;

字串7

前一个40px代表上下margin值, 后一个40px代表左右margin值. 字串8

当上下左右margin值均一致, 可简写为: 字串4

margin: 40px; 字串1