CSS盒子模型

引用：http://blog.sina.com.cn/s/blog_5bba80460100m94l.html 

CSS盒模型

本节的内容非常重要，因为盒模型是CSS定位布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用div元素和列表元素，即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作，读者并不理解布局的原理，常常在布局页面的过程中遇到无法理解的问题，需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后，读者将拥有较完善的布局观，基本可做到在代码编写前就“胸有成竹”。

  什么是CSS盒模型

XHTML中大部分的元素（特别是块状元素）都可以看做一个盒子，而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，最需要关注的是盒子尺寸计算、是否流动等要素
。
为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和一个盒子非常相似，如图11.18所示。

图11.18  盒模型示意图

大多数XHTML元素的结构都类似于图11.18所示，除了包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。读者在布局网页和定位XHTML元素时要充分地考虑到这些要素，才可以更自如地摆弄这些盒子。

外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（左边外边距）和margin-right（右边外边距）。CSS的边框属性（border）和内边距属性（padding）同样可拆分为4边。在Web标准中，CSS的width属性即为盒子所包含内容的宽度，而整个盒子的实际宽度即为：

盒子宽度=padding-left+border-left+margin- left+width+padding-right+border- right+margin-right

相应地，CSS的height属性即为盒子所包含内容的高度，而整个盒子的实际高度即为：

盒子高度=margin-top+border-top+padding- top+height+padding-bottom+border -bottom+margin-bottom

()