05 CSS2(盒子模型).pptVIP

CSS的盒子模型 王斌 CSS的盒子模型 盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 CSS的盒子模型 CSS的盒子模型 每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子 元素盒子大小的计算 一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界 由“盒子”堆出来的网页版面 IE quirk模式下盒子的宽度 当将文档声明DOCTYPE删除后，IE对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除DOCTYPE style type=text/css #box1 { background-color: #ddd; margin:15px; padding:5px; } #box2 { color: black; background-color: #aaa;