|
经过前面的学习．对标准流中的盒子排列方式应该已经很清楚了，下面来做一个习题。 假设有一个网页，其显示结果如图1所示，现在要读者精确地回答出从字母a到x对应的宽度是多少个像素。习题文件位于网页学习网CSS教程资源“第3章\04.htm”。  图1 计算图中各个字母代表的宽度（高度）是多少像素 网页的完整代码如下：lodidance.com
下面是具体的计算过程和答案。 先来计算水平方向的宽度，计算过程如下。 ① a：由于body的magin设置为0，因此a的值为ul的左margin．即15像素。 ② b：ul的左padding加li的左margin，即25像素。 ③ c：第2个li的border，即5像素。 ④ d：li的左padding，即10像素． ⑤ e：计算完其他项目后再计算这个宽度，注意这里文字和右边框之间没有间隔，因为右padding为0。 ⑥ f．第2个li的border，即5像素。 ⑦ g：ul的右padding加上li的右margin，即25像素。 ⑧ h：ul的右margin，即15像素。 现在来计算e的宽度。把水平方向除e之外的各项加起来，等于100像素，因此e的宽度为浏览器窗口的宽度减去100像素。 然后计算竖直方向的宽度。 ① i：由于body的magin设置为0，因此i的值为ul的上margin，即15像素。 ② j：ul的上padding加上li的上marin，即25像素。 ③ k：li的上下margin加上文本高度，即34像素。 ④ l：两个li相邻，因此上面的li的下margin和下面的li的上margin相遇，发生“塌陷”现象，因此l的值为二者中较大者，二者现在相同，因此l的值为20像素。 ⑤ m：第2个li的border，即5像素。 ⑥ n：li的上下padding就是上两行文字的高度，即48像素。 ⑦ o：第2个li的border，即5像素。 ⑧ p: ul的下padding加上li的下margin，即25像素。 ⑨ q：两个ul相邻，因此上面的ul的下margin和下面的ul的上margin相遇，发生“塌陷”现象．因此q的值为二者中较大者，二者现在相同，因此q的值为15像素。 接下来，从r始就前面的相同了，这里不再赘述。 最后，对于盒子的宽度再强调说明一下，上面的这个例子中所有的盒子都没有设置width属性，在没有设置width属性时，盒子会自动向右伸展，直到不能伸展为止。如果某个盒子设置了width属性，那么盒子的宽度就以该值为准。而盒子实际占据的宽度是width+padding+boarder+margin的总宽度。 注意：在lE 6/7/8和Firefox中都遵循上述原划，但是低版本的IE对于宽度的计算与此不同。不过现在使用低于IE 6的浏览器的人已经非常少了，一般不用考虑，这里就不做细致讲解了。如果读者希望了解，可以到互联网上搜索一下，相关内容有很多。 本章重点
盒子模型是CSS控制页面的基础。学习本章之后，读者应该能够清楚在这里“盒子”的含义是什么，以及盒子的组成。 此外，应该理解DOM的基本概念，以及DOM树是如何与一个HTML文档对应的，在此基础上充分理解“标准流”的概念。只有先明白在“标准流”中盒子的布局行为，才能更容易地学习在下一章中将讲解的浮动和定位等相关知识。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/673.html |
