首页 > 代码库 > 5.17学习笔记

5.17学习笔记

关闭边栏Div+Css教程模板无忧>建站教程>Div+Css教程>Div+CSS教程>收藏分享查看评论Div+CSS教程大中小margin在垂直取值时取最大值_Div+CSS教程3/512345编辑Tag赚U币教程Tag:margin最大值添加
企业网站必备神器!获取访客联系方式买空间 买主机,就选网硕互联! 获取访客QQ,手机号码!margin在垂直取值的时候是重叠的,如果上下盒模型分别都有margin,那么取较大值。这一点是值得大家注意的了,平时如果在上下两个容器都设置了margin时,注意垂直取值时并不是两个值相加,而是取较大值。

    一个div盒子如果设置了margin,并且该div设置了float浮动,那么在IE6下便会产生双边距问题:如果设置 float:left 那么左边距会是原来margin的两倍;如果是float:right,那么右边距会是原来margin的两倍。

        代码如下:

   

[html] view plain copy print?
01.<html> 
02.          <head> 
03.                  <style> 
04.                        body{ 
05.                                margin:0px; 
06.                                padding:0px; 
07.                        } 
08.                        #box{ 
09.                                float:left; 
10.                                margin:10px; 
11.                                width:200px; 
12.                                height:200px; 
13.                                background:#696969; 
14.                        } 
15.                  </style> 
16.          </head> 
17.          <body> 
18.                   <div id="box"></div> 
19.          </body> 
20.</html> 
    <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>


如下是各浏览器的效果图(左侧为chrome  中间为firefox  右侧是IE6):

 

        从上面图中可以看到,最右侧的IE6的左边距是原本边距的2倍。

       

关于IE6以下版本兼容问题

解决方法:

        在2004年以前,IE6这个双边距问题一直没有得到一种很好的解决方法,普遍的做法是把边距设置为目标边距的1/2,以错对错的方法去实现。2004年之后,有一个工程师发现了一个简单的解决方法,到现在也是一直用这个方法来消除IE6双边距问题的。方法很简单:只需要给id为box的这个div加上一条简单的css代码就够了。

 


解决代码:

           


[html] view plain copy print?
01.<html> 
02.             <head> 
03.                     <style> 
04.                           body{ 
05.                                   margin:0px; 
06.                                   padding:0px; 
07.                           } 
08.                           #box{ 
09.                                   _display:inline; 
10.                                   float:left; 
11.                                   margin:10px; 
12.                                   width:200px; 
13.                                   height:200px; 
14.                                   background:#696969; 
15.                           } 
16.                     </style> 
17.             </head> 
18.             <body> 
19.                      <div id="box"></div> 
20.             </body> 
21.   </html> 
 <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    _display:inline;
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>

 

 如下是IE6的测试效果图:

 

5.17学习笔记