css中心自適應(yīng)布局的5種解法詳解

前言

在做網(wǎng)頁時(shí)，我們每每會(huì)遇到網(wǎng)頁布局相干的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于網(wǎng)頁布局的內(nèi)容。

題目：如何實(shí)現(xiàn)三欄布局（高度固定，左中右的結(jié)構(gòu)）

假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右寬度均為300px，中心自適應(yīng)。

看了上面的標(biāo)題，有經(jīng)驗(yàn)的人大概會(huì)覺得很簡(jiǎn)單，細(xì)心想想，假如我們來寫，能寫出幾種方案呢？一樣平常都會(huì)想到兩種吧，float和position定位，其實(shí)除了這兩種外，還有3種可以寫，下面我就來逐一介紹一下：

方案一（float浮動(dòng)）

<section class='layout float'>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中心的自適應(yīng)元素--浮動(dòng)</div>
         </article>
     </section>

• 原理：左右兩個(gè)div因?yàn)楦?dòng)離開了文檔流，center就會(huì)上移，造成三欄布局的結(jié)果（前提是高度雷同）

• 好處：兼容性高

• 瑕玷：必要消滅浮動(dòng)來防止影響其他元素

• 假如高度不固定，中心的內(nèi)容會(huì)被撐開，左右兩邊不會(huì)一路撐開

方案二（絕對(duì)定位）

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自適應(yīng)元素--絕對(duì)定位
            </div>
            <div class="right"></div>
         </article>
     </section>

• 原理：行使絕對(duì)定位以及寬度，將左右兩邊的div固定住，中心div的寬度就會(huì)有自適應(yīng)的結(jié)果

• 好處：快捷

• 瑕玷：假如父元素離開了文檔流，子元素肯定會(huì)離開文檔流，運(yùn)用的場(chǎng)景不多

• 假如中心元素的高度增長，兩邊元素的高度不會(huì)增長，所以只有中心的div會(huì)撐開

方案三（flex布局）

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自適應(yīng)元素--flex布局
            </div>
            <div class="right"></div>
         </article>
     </section>

• 原理：將父元素設(shè)置為flex布局，然后中心元素設(shè)置flex為1，達(dá)到自適應(yīng)的結(jié)果

• 好處：在現(xiàn)實(shí)開發(fā)中常用

• 瑕玷：IE8及以下的欣賞器不支持

• 假如高度不固定，中心內(nèi)容的高度撐開后，兩邊也會(huì)隨之撐開

方案四（table布局）

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自適應(yīng)元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

• 原理：將父元素設(shè)置為table布局，然后每個(gè)子元素都是teble-cell，給左右兩個(gè)格子設(shè)置固定的寬度，中心的格子就可以達(dá)到自適應(yīng)的結(jié)果

• 好處：兼容性好，可做flex布局在ie8以下的代替

• 瑕玷：局限性

• 假如高度不固定，中心被撐開時(shí)，左右兩邊也會(huì)被撐開，和flex類似

方案五（網(wǎng)格布局）

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右兩格都是300px，中心是自適應(yīng)*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自適應(yīng)元素--grid布局
            </div>
            <div class="right"></div>
        </article>
    </section>

• 原理：將父元素設(shè)置為網(wǎng)格布局，然后規(guī)定每格的高度以及每格的寬度，只用分別給每格單獨(dú)設(shè)置顏色即可

• 好處：技術(shù)比較新，方便

• 瑕玷：兼容性不是很好

• 假如高度不固定，中心元素添加文本，也不會(huì)撐開

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。