成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【CSS】三欄/兩欄寬高自適應(yīng)布局大全

isaced / 2991人閱讀

摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語(yǔ)法缺點(diǎn)就是以下不支持。

頁(yè)面布局

注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何

三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng)

(1) 給出5種方案

方案一: float (左右浮動(dòng),中間不用給寬,設(shè)置margin左右留出位置)

html部分,center放到后面

        

            
left

            
right

            
content

css部分

        .wrapper {
            height: 100px;
        }
        .left {
            float: left;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            float: right;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            background: skyblue;
            height: 100%;
            margin: 0 300px;
        }

方案二: position定位 (中間設(shè)置left 300 right 300 ,寬度就自適應(yīng)了)

html不變

        

            
left

            
right

            
content

css部分

        .wrapper {
            position: relative;
            height: 100px;
        }
        .left {
            position: absolute;
            left: 0;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            position: absolute;
            right: 0;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            position: absolute;
            left: 300px;
            right: 300px;
            background: skyblue;
            height: 100%;
        }

方案三: flex伸縮布局

html不變

        

            
left

            
right

            
content

css部分

        .wrapper {
            display: flex;
            height: 100px;
        }
        .left {
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            flex: 1;
            background: skyblue;
            height: 100%;
        }

方案四: 表格布局 (設(shè)置父元素為display:table,子元素都是display:table-cell;然后給兩邊設(shè)置width,中間不設(shè)置就自動(dòng)了,記得父元素給width:100%)

html部分,將center改到中間位置

        

            
left

            
content

            
right

css部分

       .wrapper {
            display: table;
            width: 100%;
            height: 100px;
        }
        .left {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            display: table-cell;
            background: skyblue;
            height: 100%;
        }

方案五: 網(wǎng)格布局 Grid第一個(gè)專門為解決布局問(wèn)題而創(chuàng)建的CSS模塊 (設(shè)置容器類型,然后設(shè)置列寬和行高)

html部分不變,center居中

        

            
left

            
content

            
right

css部分十分簡(jiǎn)潔

        .wrapper {
            display: grid;
            width: 100%;
            grid-template-rows: 200px 100px 10px;
            grid-template-columns: 300px auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: yellow;
        }
        .content {
            background: skyblue;
        }

(2) 各自的優(yōu)缺點(diǎn)。

方案一、方案二:

float和position方案的有點(diǎn)是兼容性好,因?yàn)槎际潜容^老的解決方案了,
缺點(diǎn)是float之后需要清除浮動(dòng)造成的影響,
定位的話就是絕對(duì)定位之后脫離文檔流了,你要注意用position:relative包裹一下

方案三:

flex是目前移動(dòng)端主流的方案,css的語(yǔ)法,缺點(diǎn)就是IE8以下不支持。

方案四:

語(yǔ)義化不太好,

方案五:

有嚴(yán)重的兼容性問(wèn)題

(3) 如果不定高,哪些方案會(huì)有問(wèn)題

如果不定高float / 定位的方案會(huì)有問(wèn)題

三欄自適應(yīng)布局,上下固定,中間高度自適應(yīng) (自適應(yīng)的地方設(shè)置top300 bottom300,高度就自適應(yīng)了)

方案一: 定位

html

    

        
top

        
content

        
bottom

css

        .wrapper {
            height: 800px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
            background: red;
        }
        .bottom {
            position: absolute;
            bottom: 0 ;
            height: 100px;
            width: 100%;
            background: blue;
        }
        .content {
            position: absolute;
            top: 100px;
            bottom: 100px;
            width: 100%;
            background: skyblue;
        }

方案二: flex布局

html

    

        
top

        
content

        
bottom

css

        .wrapper {
            display: flex;
            height: 700px;
            flex-direction: column;
        }
        .top {
            height: 100px;
            background: red;
        }
        .bottom {
            height: 100px;
            background: blue;
        }
        .content {
            flex: 1;
            background: skyblue;
        }

方案三: 網(wǎng)格布局grid (設(shè)置grid-template-rows: 300px auto 300px)

html不變

    

        
top

        
content

        
bottom

css

      .wrapper {
            display: grid;
            height: 700px;
            grid-template-rows: 100px auto 100px;
        }
        .top {
            background: red;
        }
        .bottom {
            background: blue;
        }
        .content {
            background: skyblue;
        }
兩欄自適應(yīng),右側(cè)固定,左側(cè)自適應(yīng)

方案一: 利用BFC的渲染規(guī)則,BFC不會(huì)和浮動(dòng)的元素互相重疊
html

    

        
right

        
left

css 避免左側(cè)侵入到右側(cè),給左側(cè)div創(chuàng)建一個(gè)BFC,因?yàn)锽FC的渲染機(jī)制就是獨(dú)立的容器,不會(huì)和浮動(dòng)的元素重疊

        .left {
            height: 200px;
            background: red;
            overflow: hidden;
        }
        .right {
            float: right;
            width: 300px;
            background: blue;
        }

方案二: 定位

html

    

        
left

        
right

css

        .wrapper {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            right: 300px;
            background: red;
        }
        .right {
            position: absolute;
            width: 300px;
            right: 0;
            background: blue;
        }

方案三: flex

html

    

        
left

        
right

css

      .wrapper {
            display: flex;
        }
        .left {
            flex: 1;
            background: red;
        }
        .right {
            width: 300px;
            background: blue;
        }

方案四: 表格布局,注意給父元素表格要設(shè)置width:100%

html

    

        
left

        
right

css

        .wrapper {
            display: table;
            width: 100%;
        }
        .left {
            display: table-cell;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            background: blue;
        }

方案五: grid網(wǎng)格布局

css

        .wrapper {
            display: grid;
            grid-template-columns: auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: blue;
        }

html


        
left

        
right
兩欄自適應(yīng),上側(cè)固定,下側(cè)自適應(yīng)

方案一: 定位

設(shè)置content部分的top: 100px botton: 0

html

        

            
top

            
content

css

        .wrapper {
            position: relative;
            height: 100%;
            width: 100%;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            background: red;
            width: 100%;

        }
        .content {
            position: absolute;
            width: 100%;
            top: 100px;
            bottom: 0;
            background: skyblue;
        }

方案二: flex

top高度100px,然后content設(shè)置flex: 1

html

        

            
top

            
content

css

               display: flex;
               height: 800px;
           }
           .top {
               height: 100px;
               background: red;
   
           }
           .content {
               flex: 1;
               background: skyblue;
           }

方案三: grid網(wǎng)格布局

思路,就是設(shè)置display:grid后 設(shè)置列寬或者行高,有多少列就設(shè)置多少個(gè)參數(shù),多少行就設(shè)多少參數(shù)。

html

     

            
top

            
content

css

     .wrapper {
            display: grid;
            height: 800px;
            grid-template-rows: 100px auto;
        }
        .top {
            background: red;
        }
        .content {
            background: skyblue;
        }

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

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

相關(guān)文章

  • 【CSS】三欄/兩欄寬高自適應(yīng)布局大全

    摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語(yǔ)法缺點(diǎn)就是以下不支持。 頁(yè)面布局 注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何 三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案 方案一: float (左右浮動(dòng),中間...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過(guò)于圣杯布局和雙飛翼布局。而雙飛翼布局方法無(wú)需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過(guò)來(lái)實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見(jiàn)的一種布局模式，顧名思義，就是將網(wǎng)頁(yè)內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過(guò)于圣杯布局和雙飛翼布局。而雙飛翼布局方法無(wú)需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過(guò)來(lái)實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見(jiàn)的一種布局模式，顧名思義，就是將網(wǎng)頁(yè)內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • 兩種方式實(shí)現(xiàn)CSS雙飛翼布局

    摘要：雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局先來(lái)張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)方式一通過(guò)彈性布局來(lái)實(shí)現(xiàn)看代碼結(jié)構(gòu)，是中間的自適應(yīng)區(qū)域先簡(jiǎn)單粗暴的解決一下瀏覽器的默認(rèn)樣式使用，盒模型好計(jì)算，媽媽再 雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局 先來(lái)張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng) showImg(https:/...

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

  • CSS入門指南-4：頁(yè)面布局

    摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計(jì)指南》的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對(duì)于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...

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

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

0條評(píng)論

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