當(dāng)前位置:圖趣網(wǎng)(Tuquu) > 網(wǎng)頁設(shè)計(jì)教程 > 移動(dòng)前端 > css中心自適應(yīng)布局的5種解法詳解

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)。

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd502.html
CSS3之2D與3D變換的實(shí)現(xiàn)方法
CSS3移動(dòng)端vw+rem不依靠JS實(shí)現(xiàn)相應(yīng)式布局的方法
圖趣網(wǎng)微信
建議反饋
×