CSS布局--兩欄固定中間自適應的幾種方法

目錄

• CSS布局--兩欄固定中間自適應的幾種方法
  • HTML結構
  • 一: 浮動 + 相對定位 + margin負值
  • 二: 👍絕對定位+CSS3新盒子
  • 三: 絕對定位 + 過度約束
  • 四: 👍使用flex
  • 五: 使用grid

HTML結構

   <div class="container">
        <div class="left"></div>
        <div class="middle">djflajflajdflaksdjflksdjflkdjaslkfjlsadk</div>
        <div class="right"></div>
    </div>

最終效果圖

一: 浮動 + 相對定位 + margin負值

這種結構要改一下, middle要放在第一位. 使用margin負值來讓元素處於同一行

重點: 浮動和margin負值的使用 👈
缺點: 在中間元素寬度被壓到很小的時候結構會混亂,需要給容器設置最小寬度

    <style>
        body{
            height: 100vh;
        }
        .container {
            position: relative;
            /* 設置padding,留出兩側元素的位置 */
            padding: 0 100px;
            height: 200px;
            background-color: lightskyblue;
            word-break: break-all;
        }
        .container div {
            /* 使用相對定位和浮動 */
            position: relative;
            float: left;
        }
        .left, .right {
            height: 200px;
            width: 100px;
            background-color: lightslategray;
        }
        .left {
            /* 這里100%為父元素content的寬度,這樣可以讓元素浮上去 */
            /* 左邊元素會浮動到父元素content區域的最左側 */
            margin-left: -100%;
            /* 讓元素向后移動100px(這里要用負值), 移動到padding位置里里去 */
            left: -100px;
        }
        .right {
            /* 右邊元素只需要將 margin-right設為-100% 就可浮動到指定位置 */
            /* 因為left還占着100px位置(相對定位) */
           margin-right: -100%;
        }
        .middle {
            /* 設置中間元素寬高(100% == 父元素content寬度) */
            height: 100%;
            width: 100%;
            background-color: lightpink;
        } 
    </style> 

二: 👍絕對定位+CSS3新盒子

利用新盒子 width = content + padding + border 特性 🎈

    <style>
        body{
            height: 100vh;
        }
        .container {
            position: relative;
            height: 200px;
            background-color: lightskyblue;
            word-break: break-all;
        }
        .container div {
            /* 使用絕對定位來控制元素 */
            position: absolute;
        }
        .left, .right {
            height: 200px;
            width: 100px;
            background-color: lightslategray;
        }
        .right {
            right: 0;
        }
        .middle {
            /* 控制padding來放置兩側元素, content寬度會自動計算 */
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            /* 兩端填充100px, 用來放兩側固定元素 */
            padding: 0 100px;
            background-color: lightpink;
        }
    </style>

三: 絕對定位 + 過度約束

過度約束: margin + border + padding + content = 父元素content寬度

• 文檔流中塊級元素滿足橫向過度約束 ✨
  • margin, padding, width 可以設置為 auto, 且width優先於margin和padding
  • 在沒有手動設置情況下, width默認auto, 所以默認情況下塊級元素寬度=父元素content寬度

    margin-left/right + border-left/right + padding-left/right + width = 父元素content寬度

• 絕對定位中(脫離文檔流) 🪁
  • 橫向和縱向都滿足過渡約束, 並且橫向要加上left, right; 縱向要加上 top, bottom

    // 橫向
    margin-left/right + border-left/right + padding-left/right + width + left + right = 父元素content寬度
    // 縱向
    margin-top/bottom + border-top/bottom + padding-top/bottom + height + top + bottom = 父元素content高度

• 利用這種特性可以實現元素的垂直居中,水平居中,水平垂直居中

     <style>
        body{
            height: 100vh;
        }
        .container {
            position: relative;
            /* 讓容器垂直居中, 類似 top + transform */
            /* 父元素高度一半 - 容器高度一半 */
            top: calc(50% - 100px);
            height: 200px;
            background-color: lightskyblue;
            word-break: break-all;
        }
        .container div {
            position: absolute;
        }
        .left, .right {
            height: 200px;
            width: 100px;
            background-color: lightslategray;
        }
        .right {
            right: 0;
        }
        .middle {
            /* 使用絕對定位的過渡約束,自動擴充 width和height */
            /* 脫離文檔流, 所有元素寬高都由內容撐開, 類似行內塊.所以寬高都需要設置 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            /* 元素兩側向內擠100px, 留出兩側元素位置 */
            margin: 0 100px;
            background-color: lightpink;
        }
    </style>

四: 👍使用flex

通過改變 flex-grow和 flex-shrink實現

    <style>
        body{
            height: 100vh;
        }
        .container {
            display: flex;
            flex-direction: row;
            height: 200px;
            background-color: lightskyblue;
            word-break: break-all;
        }
        .left, .right {
            /* 左右固定長度 */
            flex-basis: 100px;
            /* 將增長比和縮小比都設置為 0 ,避免寬度變化 */
            flex-grow: 0;
            flex-shrink: 0;
            background-color: lightslategray;
        }
        .middle {
            /* 中間自動適應 */
            flex-grow: 1;
            flex-shrink: 1;
            background-color: lightpink;
        }
    </style>

五: 使用grid

grid表格系統可以輕松實現各種布局,就像棋盤,你可以將棋子落到任何一個格子上 🎉

• grid 是對 flex的提升, 設置flex的元素可以在主軸方向上伸縮,而grid可以在兩個方向伸縮
• 缺點就是兼容性不好😥

    <style>
        body{
            height: 100vh;
        }
        .container {
            display: grid;
            /* 設置列: 1,3列寬100px, 中間列寬度auto */
            grid-template-columns: 100px auto 100px;
            /* 設置行: 1行, 高200px */
            grid-template-rows: 200px;
            background-color: lightskyblue;
            word-break: break-all;
        }
        .left, .right {
            background-color: lightslategray;
        }
        .right {
            /* 將right元素設置到第三列 */
            grid-column: 3;
            /* 位於第一行 */
            grid-row: 1;
        }
        .left {
            /* 設置到第一列 */
            grid-column:1/2;
            grid-row: 1;
        }
        .middle {
            /* 設置到第二列 */
            grid-column: 2/3;
            background-color: lightpink;
        }
    </style>

暫時只想到這么多. 歡迎指出錯誤或者可以改進的地方!!! 🚴‍♀️🚴‍♂️(。・ω・。)