3.7 CSS中的几何题

浏览数：30 / 时间：2015年06月09日

经过前面的学习．对标准流中的盒子排列方式应该已经很清楚了，下面来做一个习题。

假设有一个网页，其显示结果如图1所示，现在要读者精确地回答出从字母a到x对应的宽度是多少个像素。习题文件位于网页学习网CSS教程资源“第3章\04.htm”。

图1 计算图中各个字母代表的宽度（高度）是多少像素

网页的完整代码如下：lodidance.com

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页教学网-盒子模型的演示</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:宋体;
font-size:12px;
}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 没有设置边框 */
}
li {
color: black; /* 黑色文本 */
background: #aaa; /* 浅灰色背景 */
margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
list-style: none /* 取消项目符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 设置边框为2像素 */
border-color: black;
margin-top:20px；
}
</style>
</head>
<body>
<ul>
<li>第1个列表的第1个项目内容</li>
<li class="withborder">第1个列表的第2个项目内容，
内容更长一些，目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li class="withborder">第2个列表的第2个项目内容，
内容更长一些，目的是演示自动折行的效果。</li>
</ul>
</body>
</html>

下面是具体的计算过程和答案。

先来计算水平方向的宽度，计算过程如下。

① 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文档对应的，在此基础上充分理解“标准流”的概念。只有先明白在“标准流”中盒子的布局行为，才能更容易地学习在下一章中将讲解的浮动和定位等相关知识。

点击下载第1~7章CSS教程资源返回《CSS教程布局之道》教程列表

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/673.html

3.7 CSS中的几何题,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

3.7 CSS中的几何题