国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

keithxiaoy / 3581人閱讀

摘要：前言在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。問題如何實(shí)現(xiàn)三欄布局高度固定，左中右的結(jié)構(gòu)假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右寬度均為，中間自適應(yīng)。

前言 
??在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。
問題：如何實(shí)現(xiàn)三欄布局（高度固定，左中右的結(jié)構(gòu)）

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

??看了上面的題目，有經(jīng)驗(yàn)的人也許會(huì)覺得很簡單，仔細(xì)想想，如果我們來寫，能寫出幾種方案呢？一般都會(huì)想到兩種吧，float和position定位，其實(shí)除了這兩種外，還有3種可以寫，下面我就來一一介紹一下：

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

         
         

             

             

             
我是中間的自適應(yīng)元素--浮動(dòng)

原理：左右兩個(gè)div由于浮動(dòng)脫離了文檔流，center就會(huì)上移，造成三欄布局的效果（前提是高度相同）

優(yōu)點(diǎn)：兼容性高

缺點(diǎn)：需要清除浮動(dòng)來防止影響其他元素

如果高度不固定，中間的內(nèi)容會(huì)被撐開，左右兩邊不會(huì)一起撐開

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

         
         

            

            

                我是中間的自適應(yīng)元素--絕對(duì)定位

原理：利用絕對(duì)定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會(huì)有自適應(yīng)的效果

優(yōu)點(diǎn)：快捷

缺點(diǎn)：如果父元素脫離了文檔流，子元素一定會(huì)脫離文檔流，運(yùn)用的場(chǎng)景不多

如果中間元素的高度增加，兩邊元素的高度不會(huì)增加，所以只有中間的div會(huì)撐開

方案三（flex布局） 

         
         

            

            

                我是中間的自適應(yīng)元素--flex布局

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

優(yōu)點(diǎn)：在實(shí)際開發(fā)中常用

缺點(diǎn)：IE8及以下的瀏覽器不支持

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

方案四（table布局） 
    

        
        

            

            

                我是中間的自適應(yīng)元素--table

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

優(yōu)點(diǎn)：兼容性好，可做flex布局在ie8以下的代替

缺點(diǎn)：局限性

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

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

        
        

            

            

                我是中間的自適應(yīng)元素--grid布局

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

優(yōu)點(diǎn)：技術(shù)比較新，方便

缺點(diǎn)：兼容性不是很好

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117284.html

相關(guān)文章

  • 中間自適應(yīng)布局的5種解法

    摘要：前言在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。問題如何實(shí)現(xiàn)三欄布局高度固定，左中右的結(jié)構(gòu)假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右寬度均為，中間自適應(yīng)。 前言 ??在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。 問題：如何實(shí)現(xiàn)三欄布局（高度固定，左中右的結(jié)構(gòu)）...

    MageekChiu 評(píng)論0 收藏0

  • 三列布局（左右固定，中間自適應(yīng)）

    1、定位 我是左邊，我是固定的 我是中間，我是自適應(yīng)的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機(jī)會(huì)擠進(jìn)中間啦！只要我margin一下就沒人會(huì)擋住我啦！我可真是個(gè)小機(jī)靈鬼(同時(shí)，我還是個(gè)自由人，我div寫在開頭中間結(jié)尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

    aboutU 評(píng)論0 收藏0

  • 三欄布局（一）-------左右寬高固定，中間自適應(yīng)

    摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應(yīng)幼圓上下高度固定，中間自適應(yīng)幼圓左寬度固定，右自適應(yīng)幼圓上高度固定，下自適應(yīng)，幼圓下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局左右寬高固定，中間自適應(yīng)幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應(yīng)； 2、上下高度固定，中間自適應(yīng)； 3、左寬度固定，右自適應(yīng)； 4、上高度固定，下自適應(yīng)， 下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局-左右寬...

    Aldous 評(píng)論0 收藏0

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...

    andot 評(píng)論0 收藏0

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...

    JessYanCoding 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<