首页 > 代码库 > 3.6 盒子在标准流中的定位原则

3.6 盒子在标准流中的定位原则

2024-07-08 20:29:34   225人阅读

如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部。所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系，因此必须要对margin在不同情况下的性质有非常深入的了解。

一、实验1——行内元素之间的水平margin

这里来看两个块并排的情况，如图1所示。

图1 行内元素之间的margin
图1 行内元素之间的margin

当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left，代码如下所示，示例文件位于网页学习网CSS资源“第3章\06.btm”。

  1. <html> 
  2. <head> 
  3. <title>网页学习网——两个行内元素的margin</title> 
  4. <style type="text/css"> 
  5.  
  6. span{  
  7.     background-color:#a2d2ff;  
  8.     text-align:center;  
  9.     font-family:Arial, Helvetica, sans-serif;  
  10.     font-size:12px;  
  11.     padding:10px;  
  12. }  
  13. span.left{  
  14.     margin-right:30px;  
  15.     background-color:#a9d6ff;  
  16. }  
  17. span.right{  
  18.     margin-left:40px;  
  19.     background-color:#eeb0b0;  
  20. }  
  21.  
  22. </style> 
  23. </head> 
  24. <body> 
  25.     <span class="left">行内元素1</span><span class="right">行内元素2</span> 
  26. </body> 
  27. </html> 

执行结果如图2所示，可以看到两个块之间的距离为30+40=70px。

图2 行内元素之间的margin
图2 行内元素之间的margin

二、实验2——块级元素之间的竖直margin

通过上面的实验了解了行内元素的情况，但如果不是行内元素，而是竖直排列的块级元素，情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图3所示。这个现象称为margin的“塌陷”现象，意思是说较小的margin塌陷到了较大的margin中。lodidance.com

图3 块元素之间的margln
图3 块元素之间的margln

这里看一个实验案例，代码如下，示例文件位于网页学习网CSS资源“第3章\07.htm”。

  1. <html> 
  2. <head> 
  3. <title>网页学习网——两个块级元素的margin</title> 
  4. <style type="text/css"> 
  5. <!--  
  6. div{  
  7.     background-color:#a2d2ff;  
  8.     text-align:center;  
  9.     font-family:Arial, Helvetica, sans-serif;  
  10.     font-size:12px;  
  11.     padding:10px;  
  12. }  
  13. --> 
  14. </style> 
  15. </head> 
  16. <body> 
  17.     <div style="margin-bottom:50px;">块元素1</div> 
  18.     <div style="margin-top:30px;">块元素2</div> 
  19. </body> 
  20. </html> 

执行结果如图4所示。倘若将块元素2的margin-top修改为40px，就会发现执行结果没有任何的变化。若再修改其值为60px，就会发现块元素2向下移动了10个像素。

图4 块元素之间的margln
图4 块元素之间的margln

经验：margin-top和margin-bottom的这些特点在实际制作网页时要特别的注意，否则常常会被增加了margin-top或者margin-botlom值时发现块“没有移动”的假象所迷惑。

三、实验3-嵌套盒子之间的margin

除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系．它的margin值对CSS排版也有重要的作用，这就是父子关系。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。其中子块的margin将以父块的content为参考，如图5所示。

图5 父子块的margin
图5 父子块的margin

这里有一个实验案例，代码如下，示例文件位于网页学习网CSS资源“第3章\08.htm”。

  1. <head> 
  2. <title>网页学习网—父子块的margin</title> 
  3. <style type="text/css"> 
  4. <!--  
  5. div.father{                     /* 父div */  
  6.     background-color:#fffebb;  
  7.     text-align:center;  
  8.     font-family:Arial, Helvetica, sans-serif;  
  9.     font-size:12px;  
  10.     padding:10px;  
  11.     border:1px solid #000000;  
  12. }  
  13. div.son{                        /* 子div */  
  14.     background-color:#a2d2ff;  
  15.     margin-top:30px;  
  16.     margin-bottom:0px;  
  17.     padding:15px;  
  18.     border:1px dashed #004993;  
  19. }  
  20. --> 
  21. </style> 
  22. </head> 
  23. <body> 
  24.     <div class="father"> 
  25.         <div class="son">子div</div> 
  26.     </div> 
  27. </body> 

执行的结果如图6所示。可以看到子div距离父div上边为40px(30px margin+l0px padding)，其余3条边都是padding的l0px。

图6 父子块的margin
图6 父子块的margin

另外需要注意IE与Firefox在margin的细节处理上有所区别。倘若设定了父元素的高度height值，如果此时子元素的高度超过了浚height值，二者的显示结果就完全不同。下面进行实验，编写如下代码，示例文件位于网页学习网CSS资源“第3章\09.htm”。

  1. <head> 
  2. <title>网页学习网—设置父块的高度</title> 
  3. <style type="text/css"> 
  4. div.father{                     /* 父div */  
  5.     background-color:#fffebb;  
  6.     text-align:center;  
  7.     font-family:Arial, Helvetica, sans-serif;  
  8.     font-size:12px;  
  9.     padding:10px;  
  10.     border:1px solid #000000;  
  11.     height:40px;                /* 设置父div的高度 */  
  12. }  
  13. div.son{                        /* 子div */  
  14.     background-color:#a2d2ff;  
  15.     margin-top:30px; margin-bottom:0px;  
  16.     padding:15px;  
  17.     border:1px dashed #004993;  
  18. }  
  19. </style> 
  20. </head> 
  21. <body> 
  22.     <div class="father"> 
  23.         <div class="son">子div</div> 
  24.     </div> 
  25. </body> 

上面代码中设定的父div的高度值小于子块的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而Firefox就不会，它会保证父元素的height高度的完全吻合，而这时子元素将超过父元素的范围，如图7所示。lodidance.com

图7 IE与Firefox对待父height的不同处理
图7 IE与Firefox对待父height的不同处理
 

从CSS的标准规范来说，IE的这种处理方法是不合规范的。它这种方式，本应该由min-height（最小高度）属性承担。

CSS规范中有4个相关属性min-height、max-heght、min-width、max-width．分别用于设置最大、最小宽度和高度，IE没有实现对这4个属性的支持，而Firefox可以非常好地支持它们。本教程后面的复杂案例中还会用到相关的内容。

四、实验4——将margin设置为负值

从CSS的标准规范来说，IE的这种处理方法是不合规范的。它这种方式，本应该由min-height（最小高度）属性承担。

上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后面的章节中都会陆续体现出来。这里先分析margin设为负数时产生的排版效果。

当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。在前面例子的基础上，编写代码如下，示例文件位于网页学习网CSS资源“第3章\10.htm”。

  1. <head> 
  2. <title>网页学习网—margin设置为负数</title> 
  3. <style type="text/css"> 
  4. span{  
  5.     text-align:center;  
  6.     font-family:Arial, Helvetica, sans-serif;  
  7.     font-size:12px;  
  8.     padding:10px;  
  9.     border:1px dashed #000000;  
  10. }  
  11. span.left{  
  12.     margin-right:30px;  
  13.     background-color:#a9d6ff;  
  14. }  
  15. span.right{  
  16.     margin-left:-53px;          /* 设置为负数 */  
  17.     background-color:#eeb0b0;  
  18. }  
  19. </style> 
  20. </head> 
  21. <body> 
  22.     <span class="left">行内元素1</span><span class="right">行内元素2</span> 
  23. </body> 

执行效果如图8所示，右边的块移动到了左边的块上方，形成了重叠的位置关系。

图8 margin设置为负数
图8 margin设置为负数

当块之间是父子关系时，通过设置子块的margin参数为负数，可以将子块从父块中“分离”出来。关于它的应用在后面的章节中还会有更详细的介绍。

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

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/671.html


联系
我们