引用:http://blog.sina.com.cn/s/blog_5bba80460100m94l.html
本节的内容非常重要,因为盒模型是CSS定位布局的核心内容。从前面章节中,读者学习了布局网页基本方法,只需利用div元素和列表元素,即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作,读者并不理解布局的原理,常常在布局页面的过程中遇到无法理解的问题,需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后,读者将拥有较完善的布局观,基本可做到在代码编写前就“胸有成竹”。
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 |
盒子高度=margin-top+border-top+padding- top+height+padding-bottom+border -bottom+margin-bottom |