首页 > 代码库 > 3.7 CSS中的几何题

3.7 CSS中的几何题

2024-07-08 20:34:01   224人阅读

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

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

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

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

  1. <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.  
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  7. <title>网页教学网-盒子模型的演示</title> 
  8.     <style type="text/css"> 
  9.     body{  
  10.     margin:0 0 0 0;  
  11.     font-family:宋体;  
  12.     font-size:12px;  
  13.       
  14.     }  
  15.       ul {   
  16.         background: #ddd;   
  17.         margin: 15px 15px 15px 15px;  
  18.         padding: 5px 5px 5px 5px;  
  19.                                      /* 没有设置边框 */  
  20.       }  
  21.       li {   
  22.         color: black;                /* 黑色文本 */   
  23.         background: #aaa;            /* 浅灰色背景 */  
  24.         margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/  
  25.         padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */  
  26.         list-style: none             /* 取消项目符号 */  
  27.                                      /* 未设置边框 */  
  28.       }  
  29.       li.withborder {  
  30.         border-style: dashed;  
  31.         border-width: 5px;          /* 设置边框为2像素 */  
  32.         border-color: black;  
  33.         margin-top:20px；   
  34.       }  
  35.     </style> 
  36.   </head> 
  37.   <body> 
  38.     <ul> 
  39.       <li>第1个列表的第1个项目内容</li>        
  40.       <li class="withborder">第1个列表的第2个项目内容，
  41. 内容更长一些，目的是演示自动折行的效果。</li> 
  42.     </ul> 
  43.     <ul> 
  44.       <li>第2个列表的第1个项目内容</li> 
  45.       <li class="withborder">第2个列表的第2个项目内容，
  46. 内容更长一些，目的是演示自动折行的效果。</li> 
  47.     </ul> 
  48.   </body> 
  49. </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


联系
我们