【分享】说说标准——你真的了解盒子模型(box model)吗？

首先，想像一下，页面的构成元素都有什么？恩～～，SPAN DIV TABLE INPUT IMG 等等等等。
这些元素在页面上都是怎么放置的呢？像 SPAN IMG INPUT 这样的元素是行内元素，放置的时候可以在一行，而DIV会独占一行放置……
但是不管它们这些元素怎么放置，有一点是肯定的，那就是，每个元素的形状都是矩形的，严格的说，元素形成了一个矩形的区域，这个区域，被称作box，也就是盒子(把它翻译成盒子还有一个原因，盒子能装东西，呵呵)，页面上所有的元素都会形成一个矩形的区域，不信你试试，你那儿要能出来椭圆的，那你的浏览器就太牛了！附加一点，这些矩形肯定都是规规矩矩的水平的放置的，没有斜的，放心放心，不会斜的。

今天要说的就是这个矩形区域的构成，各个部分的划分等。

盒模型
总述
为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型（是讲元素怎么在页面上定位及布局的，包括 position 和 float 等等，visual formatting model）为每个元素生成四个嵌套的矩形框，分别称作content box、padding box、border box 和margin box，它们是不可分割的，并可能会重合，这就是 CSS规范中描述的“盒模型”（box model），也就是以CSS的角度去看一个元素被渲染后的抽象形态。 是讲一个元素自身的构成部分，不同于布局：多个元素在页面上的定位。
有图有真相：
[img=https://lh5.googleusercontent.com/8MVeabSmb8ECbjldEXXXpdIwS0hUirQenaStphttNCaUpmWXXRIleKA8BgLGallGtXEcPk79-w6-zdnzJrlLtF_FV2mcOQ1TAapxZ0Xk92eyx691][/img]
一大堆名词解释，比较让人头疼的部分……
上面的大框，代表一个元素生成的矩形区域，也就是 box，每一个 box 都包括一个 content 区域（元素的内容，如文本，图形等）以及环绕其四周的 padding(元素的内边距，填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。
padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示（“LM”代表left margin，“RP”代表right padding，“TB”代表top border……）。

边界
上述四个区域（content、 padding、border和margin）分别有他们自己的边界，细化来说，每个区域都有top、right、bottom、left四个边界。
    ⃟ content 边界/内边界
     Content 边界环绕在由该元素的宽和高决定的一个矩形上，这个尺寸通常由该元素渲染后的内容决定。这四个content边界组成的矩形框就是该元素的 content box。
    ⃟ padding 边界
     Padding 边界环绕在该元素的 padding区域的四周，顾名思义，填充背景色，在此范围内有效。如果padding的宽度为0，则padding边界与content边界重合。这四个padding边界组成的矩形框就是该元素的padding box。
    ⃟ border 边界
     Border 边界环绕在该元素的border区域的四周，如果border的宽度为0，则border边界与padding边界重合。这四个border边界组成的矩形框就是该元素的 border box。
    ⃟ margin 边界/外边界
     Margin 边界环绕在该元素的margin区域的四周，如果margin的宽度为0，则margin边界与border边界重合。这四个
margin边界组成的矩形框就是该元素的 margin box。

下面分别说一下各个部分。
一个简单的例子，来自 W3C 官方：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

<HEAD>

    <TITLE>Examples of margins, padding, and borders</TITLE>

    <STYLE type="text/css">

        UL {

            background: yellow;

            margin: 12px 12px 12px 12px;

            padding: 3px 3px 3px 3px; 

                                    /* No borders set */

        }

        LI {

            color: white; /* text color is white */

            background: blue; /* Content, padding will be blue */

            margin: 12px 12px 12px 12px;

            padding: 12px 0px 12px 12px; /* Note 0px padding right */

            list-style: none /* no glyphs before a list item */

                            /* No borders set */

        }

        LI.withborder {

            border-style: dashed;

            border-width: medium; /* sets border width on all sides */

            border-color: lime;

        }

    </STYLE>

</HEAD>

<BODY>

<UL>

    <LI>First element of list</LI>

    <LI class="withborder">Second element of list is

        a bit longer to illustrate wrapping.</LI>

</UL>

</BODY>

</HTML>

示意图：
[img=https://lh6.googleusercontent.com/Ueux0WAp4GL2E95lqFseKwDkHqXTUD9kersHjfpJgoiTLTL0mhG2XpH_uljxPWQHTCf9YxTKChNLYye6m44kdROKzXpN5WMi8W-JSkLV1XD_2O7K][/img]

margin
简介
'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。

它的值
可以是宽度值、百分比值或 ‘auto’这3者之一，注意：宽度值必须带有单位。

margin简写
1. 以上、右、下、左的顺序给以上四个值赋值。如：

margin: 1px 2px 3px 4px;

等价于：

margin-top: 1px

margin-right: 2px

margin-bottom: 3px

margin-left: 4px

记住，从上面开始，顺时针旋转一圈。

2. 以上下、左右的顺序赋值

margin: 1px 2px;

那么相当于：

margin-top: 1px

margin-right: 2px

margin-bottom: 1px

margin-left: 2px

这种赋值方式，适合下面讲到的 *-top，*-right，*-bottom，*-left的简写的赋值，如padding，border-width，border-color等，下面不再说明。

可以应用在什么元素上
非 table 类型的元素，以及 table 类型中 table-caption, table 和 inline-table这3类。例如 TD TR TH等，margin是不适用的。

什么时候无效
对于行内非替换元素（例如 SPAN），垂直方向的margin不起作用。
例如：

<div style="border:1px solid red;">

    <span style="margin:100px; background:gray;">ddd</span>

</div>

可以看到，DIV 的上下 border 紧贴着灰色的SPAN元素。

margin 折叠
垂直方向上的不同元素的相邻的margin在某些情况下，会发生折叠的现象。比如，两个 div ，上下相邻，上面 DIV 的margin-bottom 会和下面 DIV 的 margin-top 产生折叠的现象，两个重叠成一个，具体宽度取较大的。
例如：

<div style="background-color:green; width:100px; height:100px;margin-bottom:100px;">

</div>

<div style="background-color:red; width:100px; height:100px; margin-top:50px;">

</div>

上下两个 DIV 最终相距100px，而不是 150px。

padding
简介：
padding是 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的缩写。赋值的方法跟margin相同，只是没有 ‘auto’ 值。默认值是0。

它可以应用到的元素：
除 display 值是 ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。

border
border是个比较复杂的东西。它是'border- top', 'border-right', 'border-bottom', 'border-left'。
千万别认为它跟前面的padding还有 margin一样只是设置width就好了。
border包含3个部分，’border-width’，’border- color’，’border-style’，分别用来设置它的宽度，颜色和样式。适用于任何元素。
border-width是 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'。默认值是0。可用值有‘thin’，‘medium’，‘thick’，以及常用的数值带单位的宽度值。
border-color是'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'的简写。默认值是 ‘color’ 特性的值。
border-style是'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'的简写。默认值是 none 特性的值。可用值有：’none’，’hidden’，’dotted’，’dashed’，’solid’，’double’，’groove’，’ridge’，’inset’，’outset’，有兴趣的可以逐个试试效果。

这篇里面专业名词好多，我写的都有点儿恶心……
快中暑了……

喜欢原汁原味的可以来这里看： http://www.w3.org/TR/CSS2/box.html

更多说说标准系列见：【分享】说说标准系列目录

115 个解决方案

#1

顶一下..

#2

说真的! 我也不懂！！

#3

该回复于2010-12-03 10:16:10被版主删除

#4

该回复于2010-07-09 14:54:19被版主删除

#5

写的不错，顶一下~！

#6

顶一下。。。。。

#7

我的第一次（回帖）。。送你了很好！

#8

Mark

#9

顶一下

#10

好文，支持一下

#11

绝对要支持

#12

不错的文章

#13

顶一下，虽然我不懂

#14

....

#15

恩，不错！

#16

说真的! 我也不懂！！

#17

学习咯！！@！

#18

niu a maibf

#19

顶个先~~~~~~~~~~~

#20

很好，盒模型，我看了很多篇，在写页面时还有时会出错，说明我还没内化到

#21

好，不错

#22

呵呵这个还是了解的不是很多啊

#23

路过,路过,学习

#24

盒模型，学习了

#25

原文

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;

怎么lz理解成 “分别称作 content box、padding box、border box 和margin box，”

明明是一个box包含一个内容区域和可选的padding，border，margin区域

怎么成4个box了？

4个box那应该是4个嵌套的元素吧？

<div> box 1

   <div> box 2

   <div> box 3

     <div> box 4

      content

     </div>

    </div>

  </div>

</div>

#26

关注中

#27

好东西

#28

学习一下

#29

学习了一下！！！

#30

该回复于2010-07-09 09:08:36被版主删除

#31

引用 25 楼 r_swordsman 的回复:

原文

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;

怎么lz理解成 “分别称作content box、padding box、border box 和margin box，”

明明是一个bo……

注意，那是综述部分，不是直译，直译的部分在图的下面
-------------------------------------------------
上面的大框，代表一个元素生成的矩形区域，也就是 box，每一个 box 都包括一个 content 区域（元素的内容，如文本，图形等）以及环绕其四周的 padding(元素的内边距，填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。

#32

学习啰，谢谢LZ

#33

学习啰，谢谢LZ

#34

还是不太明白！有没有更加详细一点的说明啊！

#35

10分可用分！小技巧：教您如何更快获得可用分

#36

学习了。。。。。

#37

写的不错，顶一下

#38

该回复于2010-07-09 14:19:32被版主删除

#39

好东西啊。。现在都是只知道怎么用去了。。而这种理论的东西不多了。收藏了

#40

哇哈哈

#41

学习了！·········

#42

不懂，学习来的~！

#43

顶一下

#44

哦。基础

#45

- -看不懂

#46

CSS有必要系统的学习一下。学习要点：盒子模型、浮动和定位。学成之后，结合javascript可以自行实现一些很炫的特效，比如：滚动门、转花灯、拉洋片、拖动效果……

#47

深~~~

#48

看不懂,顶一下

#49

引用 46 楼 luzhen328 的回复:

CSS有必要系统的学习一下。学习要点：盒子模型、浮动和定位。学成之后，结合javascript可以自行实现一些很炫的特效，比如：滚动门、转花灯、拉洋片、拖动效果……

这些东西，后续都会慢慢跟大家分享的……

#50

刚开始学习web，不是很明白，先占个位

#1

顶一下..

#2

说真的! 我也不懂！！

#3

该回复于2010-12-03 10:16:10被版主删除

#4

该回复于2010-07-09 14:54:19被版主删除

#5

写的不错，顶一下~！

#6

顶一下。。。。。

#7

我的第一次（回帖）。。送你了很好！

#8

Mark

#9

顶一下

#10

好文，支持一下

#11

绝对要支持

#12

不错的文章

#13

顶一下，虽然我不懂

#14

....

#15

恩，不错！

#16

说真的! 我也不懂！！

#17

学习咯！！@！

#18

niu a maibf

#19

顶个先~~~~~~~~~~~

#20

很好，盒模型，我看了很多篇，在写页面时还有时会出错，说明我还没内化到

#21

好，不错

#22

呵呵这个还是了解的不是很多啊

#23

路过,路过,学习

#24

盒模型，学习了

#25

<div> box 1

   <div> box 2

   <div> box 3

     <div> box 4

      content

     </div>

    </div>

  </div>

</div>

#26

关注中

#27

好东西

#28

学习一下

#29

学习了一下！！！

#30

该回复于2010-07-09 09:08:36被版主删除

#31

引用 25 楼 r_swordsman 的回复:

原文

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;

怎么lz理解成 “分别称作content box、padding box、border box 和margin box，”

明明是一个bo……

#32

学习啰，谢谢LZ

#33

学习啰，谢谢LZ

#34

还是不太明白！有没有更加详细一点的说明啊！

#35

10分可用分！小技巧：教您如何更快获得可用分

#36

学习了。。。。。

#37

写的不错，顶一下

#38

该回复于2010-07-09 14:19:32被版主删除

#39

好东西啊。。现在都是只知道怎么用去了。。而这种理论的东西不多了。收藏了

#40

哇哈哈

#41

学习了！·········

#42

不懂，学习来的~！

#43

顶一下

#44

哦。基础

#45

- -看不懂

#46

#47

深~~~

#48

看不懂,顶一下

#49

引用 46 楼 luzhen328 的回复:

CSS有必要系统的学习一下。学习要点：盒子模型、浮动和定位。学成之后，结合javascript可以自行实现一些很炫的特效，比如：滚动门、转花灯、拉洋片、拖动效果……

这些东西，后续都会慢慢跟大家分享的……

#50

刚开始学习web，不是很明白，先占个位