【分享】说说标准——你真的了解盒子模型(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的角度去看一个元素被渲染后的抽象形态。是讲一个元素自身的构成部分，不同于布局：多个元素在页面上的定位。
有图有真相：
一大堆名词解释，比较让人头疼的部分……
上面的大框，代表一个元素生成的矩形区域，也就是 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>margin: 1px 2px 3px 4px;
margin-top: 1pxmargin-right: 2pxmargin-bottom: 3pxmargin-left: 4px
margin: 1px 2px;
margin-top: 1pxmargin-right: 2pxmargin-bottom: 1pxmargin-left: 2px
<div style="border:1px solid red;"> <span style="margin:100px; background:gray;">ddd</span></div>
<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> box 1 <div> box 2 <div> box 3 <div> box 4 content </div> </div> </div></div>
[解决办法]