CSS网页布局的核心内容:CSS盒模型
|
CSS盒模型 本节的内容非常重要，因为盒模型是CSS定位布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用p元素和列表元素，即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作，读者并不理解布局的原理，常常在布局页面的过程中遇到无法理解的问题，需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后，读者将拥有较完善的布局观，基本可做到在代码编写前就“胸有成竹”。 11.3.1 什么是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 11.3.2 外边距的控制 在CSS中，margin属性可以统一设置，也可以上下左右分开设置。在D:\web\目录下创建网页文件（XHTML1.0），命名为box_margin.htm，编写box_margin.htm文件代码如代码11.17所示。 代码11.17 外边距设置：box_margin.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
