标签：
盒模型的二次理解。
1定义
所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。
1.1排布
这些盒子们都要按照可见版式模型在页面上排布，版式模型由position,display,float这三个属性来控制，position属性控制页面上元素间的位置关系，用于定位；display属性控制元素显示的本质（inline:默认值，显示为内联元素；block：块级元素；inline-block:行内块级；table:作为块级表格来显示；none:不会被显示......）这些值可以令元素轻松拥有其他属性的特点~float属性也是作用于元素的位置关系，不过和position相比貌似调皮了一些，浮动是完全脱离文档流，定位的值中只有absolute,fixed完全脱离了文档流，默认值static即在常规文档流中，相对定位relative是相对于它原来在文档流中的位置（或者默认位置）。
1.2属性
默认情况下每个盒子的边框不可见，背景也是透明的，属性可分为三组：边框（border）,内边框(padding)，外边框(margin)。
CSS为边框，内边框和外边框分别规定了简写属性，这样对不同边框样式相同的就可以一条声明设定了。但是不同样式的最好单独声明，利于后期的单独更改和语义化表达，如{margin:1px 2px 3px 4px;}最好用{margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;}，也可以将两者混合使用，这样只需要把不同的那一个属性单独拿出来写就可以了，可以很大程度上减小工作量，注意css文件的读取顺序。
2 盒子边距
2.1 The basic
盒子的内边距（padding）指盒子内容区与盒子边框之间的距离，盒子的外边距相对来说就复杂一些了，因为盒子之间的距离会出现“垂直方向上叠加”的情况，eg:有3个段落我们设置 p{margin-top:10px;margin-bottom:20px;}，那么第一个段落和第二段落，以及第二个和第三段落之间的距离是多少？（10+20=30）吗？实际距离是20px,也就是说值较大的外边距决定两个元素最终的距离，垂直外边距叠加，直到一个元素的外边距碰到令一个元素的边框为止。不过要注意的是叠加只是用于垂直方向的哦，水平的相邻的元素他们之间的距离是相邻外边距之和。
2.2 The extend
为文本元素设置外边距时通常需要混合使用不同的单位，eg:一个段落的左右外边距可以使用像素，这样该段文本始终与包含元素边界保持固定间距，不受字号变化的影响。然而对于上下边距，以em,rem(rem是相对与body字体的相对字体，em是相对与父级字体的相对字体，所以使用rem更好控制一些)当字体变大时，段间距也会相应变大，就比较和谐了。
3盒子有多大
3.1不同盒子模型
盒子模型有两种，分别是 IE 盒子模型和标准 W3C盒子模型。他们对盒子模型的解释各不相同。标准盒子模型的宽度只是内容的宽度，IE的盒子模型宽度包括内容，内边距(padding),边框(border)。所以在占据位置相同的情况下，盒子的大小是不同的。so~我们需要在网页的顶部加上doctype声明，这样就能避免不同浏览器按自己想法理解盒子模型进而出现不同浏览效果的情况了。
3.2盒子的宽度
如果不设置块级元素的width属性，那么这个属性的默认值就是auto,结果会让元素的宽度扩展到与父元素同宽。添加水平边框，内边距和外边距，会导致内容宽度减少，减少的量为添加的水平边框，内边距和外边距的和。设定宽度值后，添加内边距元素的width值不变，但是元素占的地方比之前宽了2倍内边距。说明width属性只是盒子内容区的宽度，而非盒子所占的宽度。
标签：
原文地址：http://www.cnblogs.com/s-z-y/p/4805576.html
