基于web标准的网页设计

《基于web标准的网页设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web标准网页设计与PHP唐四薪编著清华大学出版社4.4CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示

2、默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE6对网页的解释会进入

3、quirk（怪异）模式，此时盒子的宽度等于左边框＋左填充＋宽度＋右填充＋右边框因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充(padding)值＋里面盒子的边界（margin）值嵌套盒子例题#box1{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10

4、px0px10px;width:100px;}body{border:1pxdotted#FF0000}这是里面的盒子