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

資訊專欄INFORMATION COLUMN

【CSS】三欄/兩欄寬高自適應布局大全

isaced / 2983人閱讀

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。

頁面布局

注意方案多樣性、各自原理、各自優缺點、如果不定高呢、兼容性如何

三欄自適應布局,左右兩側300px,中間寬度自適應

(1) 給出5種方案

方案一: float (左右浮動,中間不用給寬,設置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定位 (中間設置left 300 right 300 ,寬度就自適應了)

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%;
        }

方案四: 表格布局 (設置父元素為display:table,子元素都是display:table-cell;然后給兩邊設置width,中間不設置就自動了,記得父元素給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%;
        }

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

html部分不變,center居中

        

            
left

            
content

            
right

css部分十分簡潔

        .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) 各自的優缺點。

方案一、方案二:

float和position方案的有點是兼容性好,因為都是比較老的解決方案了,
缺點是float之后需要清除浮動造成的影響,
定位的話就是絕對定位之后脫離文檔流了,你要注意用position:relative包裹一下

方案三:

flex是目前移動端主流的方案,css的語法,缺點就是IE8以下不支持。

方案四:

語義化不太好,

方案五:

有嚴重的兼容性問題

(3) 如果不定高,哪些方案會有問題

如果不定高float / 定位的方案會有問題

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

方案一: 定位

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;
        }

方案三: 網格布局grid (設置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;
        }
兩欄自適應,右側固定,左側自適應

方案一: 利用BFC的渲染規則,BFC不會和浮動的元素互相重疊
html

    

        
right

        
left

css 避免左側侵入到右側,給左側div創建一個BFC,因為BFC的渲染機制就是獨立的容器,不會和浮動的元素重疊

        .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;
        }

方案四: 表格布局,注意給父元素表格要設置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網格布局

css

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

html


        
left

        
right
兩欄自適應,上側固定,下側自適應

方案一: 定位

設置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設置flex: 1

html

        

            
top

            
content

css

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

方案三: grid網格布局

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

html

     

            
top

            
content

css

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113067.html

相關文章

  • 【CSS】三欄/兩欄寬高自適應布局大全

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

    jindong 評論0 收藏0

  • CSS三欄布局的經典實現方法

    摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    neuSnail 評論0 收藏0

  • CSS三欄布局的經典實現方法

    摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    Forelax 評論0 收藏0

  • 兩種方式實現CSS雙飛翼布局

    摘要：雙飛翼布局，就是兩端固定寬高，中間自適應的三欄布局先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區域是寬高自適應方式一通過彈性布局來實現看代碼結構，是中間的自適應區域先簡單粗暴的解決一下瀏覽器的默認樣式使用，盒模型好計算，媽媽再 雙飛翼布局，就是兩端固定寬高，中間自適應的三欄布局 先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區域是寬高自適應 showImg(https:/...

    ghnor 評論0 收藏0

  • CSS入門指南-4：頁面布局

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

    ethernet 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<