一、盒子模型（box model）
一个盒子又4部分组成：content（内容）、padding（填充）、border（边框）和margin（外边界）
盒子模型有两种：
（1）标准W3C盒子模型
（2）IE盒子模型（content包含padding和border）
为了统一标准，让网页能兼容各个浏览器，必须使用标准W3C盒子模型
如何才算使用？答：在网页的顶部加上DOCTYPE声明
二、盒子模型结构详解
1、CSS边框（border）属性
border有3个属性：border-width（宽度）、border-style（样式）、border-color（颜色）
（1）width：
(1) 单位数值（1px）或关键词（thin、medium、thick）
(2) 如果不设置，默认是medium，一般浏览器解析为2px
(3) 建议用单位数值来绝对定义
（2）style：
none、solid、hidden、dotted、dashed、double、groove、ridge、inset、outset等
3种写法：
（1）border：width style color（4边相同）
例如：border：1px solid #000000
（2）border-left：width style color（4边不同）
例如：border-left：1px solid #000000
（3）border-left-width：【（2）的另一种写法】
border-left-style：
border-left-color：
例如：
border-left-width：1px;
border-left-style：solid;
border-left-color：#000000;
注：
在页面应用中，设置的border也会占据页面空间。所以，当精确计算版面时，
即使在border为1px的情况下，也一定要把border对宽度和高度的影响因素考虑进去。
2、CSS填充（padding）属性
属性：padding（padding-top、padding-right、padding-bottom、padding-left）
属性值：单位数值或百分比
2种写法：
（1）padding：top right bottom left（上右下左——按顺时针方向）
例如：padding：10px 20px 30px 40px;
（2）padding-top：
padding-right：
padding-bottom：
padding-left：
例如：
padding-top：10px;
padding-right：20px;
padding-bottom：30px;
padding-left：40px;
3、CSS外边界（margin）属性
属性：margin（margin-top、margin-right、margin-bottom、margin-left）
属性值：单位数值或百分比
2种写法：
（1）margin：top right bottom left（上右下左——按顺时针方向）
例如：margin：10px 20px 30px 40px;
（2）margin-top：
margin-right：
margin-bottom：
margin-left：
例如：
margin-top：10px;
margin-right：20px;
margin-bottom：30px;
margin-left：40px;
注：
margin是一个非常有用的CSS属性，在实际应用中，还可以将它的值设为负数，以达到页面版面的要求。
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记
原文地址：http://blog.csdn.net/cherry_vicent/article/details/41650461
