HTML和CSS的关键:盒子模型(Box model)

概述原文：http://jorux.com/archives/property-4-if-you-love-css/本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中…

原文：http://jorux.com/archives/property-4-if-you-love-CSS/

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

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

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

Block-level element: 指能够独立存在,一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p,ul等; Inline element: 指依附其他块级元素存在,紧接于被联元素之间显示,而不换行. 常用的内联元素包括: img,span,br等; top-level element: 包括HTML,body,frameset,表现如Block-level element,属于高级块级元素.

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

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

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

平面图如下(fig. 2):

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

总结

以上是内存溢出为你收集整理的HTML和CSS的关键:盒子模型(Box model)全部内容，希望文章能够帮你解决HTML和CSS的关键:盒子模型(Box model)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。