CSS-盒子模型-邊距合併

java小工匠發表於2017-06-17
CSS模型

1、CSS外邊距合併

CSS外邊距合併，只有上外邊距和下外邊距才會觸發外邊距合併，左外邊距和右外邊距不會。

2、相鄰元素合併-上下

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相鄰合併</title>
    <style type="text/css">
        .div{
            width: 100px;
            height: 100px;
            background: red;
            margin:100px;
        }
    </style>
</head>
<body>
    <div class="div">div1</div>
    <div class="div">div2</div>
</body>
</html>

執行效果如下： div1和div2 根據盒子模型的計算規則，div1下邊距100px和div2上邊距100px，理論應該是200px。實際CSS規則是合併的，因此div1和div2 之間的距離為100px;如果div1的下邊距和div2的上邊距，邊距值不一樣，那麼以最大的邊距為最終取值。

image.png

3、父子元素合併-上下

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>父子元素合併</title>
   <style type="text/css">
       .div1{
           width: 100px;
           height: 100px;
           margin:100px;
           background: blue;
       }
       .div2{
           width: 100px;
           height: 100px;
           margin:100px;
           background: red;
       }
   </style>
</head>
<body>
   <div class="div1">
       <div class="div2">div2</div>
   </div>
</body>
</html>

執行結果： div2是div1的子元素，完全安裝盒子模型，div2應當距離瀏覽器頂部100px+父元素100px =200px。因為上下邊距合併，所以div2距離頂部100px；由於左右邊距不合並，所以div2距離瀏覽器左邊的距離是200px。

image.png

4、Margin穿透問題

4.1 Margin穿透效果演示

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Margin穿透問題</title>
   <style type="text/css">
       body{
           margin: 0px;
       }
       .header{
           height: 100px;
           background: red;
               
       }
       .logo{
           background: blue;
           width: 60px;
           height: 60px;
           margin-top: 40px;
       }
   </style>
</head>
<body>
   <div class="header">
       <div class="logo"></div>
   </div>
</body>
</html>

遠行結果：程式碼本意，header固定在瀏覽器頂部，當給logo的div新增上一個margin-top，header距離瀏覽器頂部由於父子元素合併所以出現了這個問題。

穿透

4.2 解決Margin穿透1-BFC

  可以使用overflow:hidden,觸發BFC模型解決這個問題，有專門章節介紹BFC模型。

4.3 解決Margin穿透2-插入元素

  在父元素中，插入一個高度、寬度都是0px的隱藏元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin穿透問題</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            background: red;
                
        }
        .logo{
            background: blue;
            width: 60px;
            height: 60px;
            margin-top: 40px;
        }
        .before{
            width: 0px;
            height: 0px;
            overflow: hidden;
            visibility: hidden;
             
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="before"></div>
        <div class="logo"></div>
    </div>
</body>
</html>

4.4 解決Margin穿透3-:before

  與插入元素的思路一致，使用偽元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin穿透問題</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            background: red;
                
        }
        .logo{
            background: blue;
            width: 60px;
            height: 60px;
            margin-top: 40px;
        }
        .header:before{
            width: 0px;
            height: 0px;
            display: block;
            content: `clear`;
            overflow: hidden;
            visibility: hidden;
             
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"></div>
    </div>
</body>
</html>

5、空元素合併

原始碼：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>空元素合併</title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 100px;
                background: blue;
            }
            .div2{
                margin-top: 50px;
                margin-bottom: 100px;
            }
            .div3{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
    </html>

執行結果： div2 理論佔據150px=上邊距+下邊距，實際佔用了100px。因為空元素上下邊距合併。如果div2的內容新增文字，顯示效果將會有巨大差異。

image.png

6、左右不合並

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右不合並</title>
    <style type="text/css">
    .div1{
        overflow: hidden;
    }
    .div11{
        margin-right: 100px;
        width: 200px;
        height: 100px;
        float: left;
        border: 1px solid red;
    }
    .div12{
        margin-left: 100px;
        float: left;
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
    .div2{ 
        margin-top: 10px;
        width: 602px;
        border: 1px solid red;
        height: 100px;
    }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div11">margin-right100px</div>
        <div class="div12">margin-left100px</div>
    </div>
    <div class="div2">
        200(div11寬度)+1px(div11右邊框)+100px(div11右邊距)+<br/>
        200(div12寬度)+1px(div12左邊框)+100px(div12左邊距)<br/>
    </div>
</body>
</html>

執行效果：

image.png


相關文章