<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 四、外邊距折疊問題

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link  type="text/css" rel="stylesheet" href="test.css">
    </head>
    <body>
    <div class="main">
        <div class="d"></div>
        <div class="e"></div>
    </div>
    </body>
    </html>
    .main {
        background-color: gray;
        margin: 50px;
    }
    .d{
        background-color: red;
        width: 200px;
        height: 200px;
        margin: 50px;
    }
    .e{
        background-color: blue;
        width: 200px;
        height: 200px;
        margin: 50px;
    }

    效果如下:

     

     

     

     

    容器外部折疊的解決方法

    1.為容器建立BFC,使其生成一個與外部上下文隔離開來的獨立區域。這種方法的副作用最小。

    .main {
        background-color: gray;
        margin: 50px;
        overflow: auto;
    }

    2.在條件允許的情況下,為容器或者內部元素設置邊框或者內邊距,防止它們折疊。

    3.將容器設置為浮動元素(float)內聯塊(inline--block)絕對定位(absolute)或者固定定位(fixed),外邊距不會在它外面折疊。

     

    4.在瀏覽器版本兼容的條件下,使用彈性盒布局(flex),將容器設置為彈性容器,其內部的彈性元素不會發生外邊距折疊;網格布局同理。

    5.可以使用偽元素選擇器,為容器的首部和尾部添加一個元素,并設置為display:table 或table-cell,在元素內隱式創建了一個表格(內部包含單元格)或一個單元格,因為外邊距無法通過單元格元素折疊

    .main::before{
        display: table-cell;
        content: "";
    }
    .main::after{
        display: table;
        content: "";
    }

     

    效果如下:

     

     

     

    容器內部元素間縱向外邊距折疊的解決方法

    可以為每個內部元素建立一個BFC,例如在HTML源碼中,在每個元素外面嵌套一層容器,為這個新的嵌套容器建立BFC。

    <div class="main">
        <div class="wrap">
            <div class="d"></div>
        </div>
        <div class="wrap">
            <div class="e"></div>
        </div>
    </div>
    .wrap{
        overflow: auto;
    }

     

     

     

     

     

     

     

     

     

       

    posted @ 2022-06-28 16:21  ˙鯊魚辣椒ゝ  閱讀(1)  評論(0編輯  收藏  舉報
    国产美女a做受大片观看