CSS盒模型[转载]

CSS盒模型

如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）

 

盒模型图解

填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。
CSS内定义的宽（width）和高（height），指的是填充以内的内容范围，因此一个元素：
实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度（width） + 右填充 + 右边框 + 右边界
实际高度 = 上边界 + 上边框 + 上填充 + 内容高度（height） + 下填充 + 下边框 + 下边界
例如有CSS定义如下：

#menu {
background: #9cf;
margin: 20px;
border: 10px solid #039;
padding: 40px;
width: 200px;
}

 

则其实际宽度