搞定css三欄布局（六種方法）

evin2016 發布于2019-08-30 13:59 / 1477人閱讀

摘要：塊級元素生成一個矩形框，作為文檔流的一部分行內元素則會創建一個或多個行框，置于父級元素中。元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。元素框不再占有文檔流位置，并且相對于視窗進行定位。

談到布局，首先就要想到定位，當別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時候回歸本質，看定義了。

1. 定位 1.1 position

position有六個屬性值：static、relative、absolute、fixed、sticky和inherit。

static（默認）：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分；行內元素則會創建一個或多個行框，置于父級元素中。

relative：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。發生偏移的時候，可能會覆蓋其他元素。

absolute：元素框不再占有文檔位置，并且相對于包含塊進行偏移（所謂包含塊就是最近一級外層元素position不為static的元素）。

fixed：元素框不再占有文檔流位置，并且相對于視窗進行定位。

sticky：css3新增屬性值，粘性定位，相當于relative和fixed的混合。最初會被當作是relative，相對原來位置進行偏移；一旦超過一定的閾值，會被當成fixed定位，相對于視口定位。

2. 三列布局

三列布局，其中一列寬度自適應，在PC端最常用之一，搞定了三列布局，其他一樣的套路。

2.1 方式一：浮動布局

缺點：html結構不正確,當包含區域寬度小于左右框之和，右邊框會被擠下來



    
        我是浮動布局左框
    
    
        我是浮動布局右框            
    
    
        我是浮動布局中間框

2.2 方式二：定位布局

缺點：要求父級要有非static定位，如果沒有，左右框容易偏移出去



    
        我是浮動定位左框
    
    
        我是浮動定位中間框
    
    
        我是浮動定位右框

2.3 方式三：表格布局

缺點：沒什么缺點，恐懼table



    
        我是表格布局左框
    
    
        我是表格布局中間框
    
    
        我是表格布局右框

2.4 方式四：flex彈性布局

缺點：兼容性



    
        我是flex彈性布局左框
    
    
        我是flex彈性布局中間框
    
    
        我是flex彈性布局右框

2.5 方式五：grid柵格布局

缺點：兼容性 Firefox 52, Safari 10.1, Chrome 57, Opera 44



    
        我是grid柵格布局左框
    
    
        我是grid柵格布局中間框
    
    
        我是grid柵格布局右框

2.6 方式六：圣杯布局

缺點：需要多加一層標簽，html順序不對，占用了布局框的margin屬性



    
        
            我是圣杯布局中間框
        
    
    
        我是圣杯布局左框
            
    
        我是圣杯布局右框

3. 實現效果：

GPU云服務器云服務器三欄布局 html5 三欄布局 ps去除水印的六種方法 css布局

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

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

實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

Hegel_Gu 2019-08-23 12:52 評論0 收藏0
兩招搞定三欄布局——圣杯布局、雙飛翼布局

摘要：如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局這是一道經典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設置的左右來實現的。如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 評論0 收藏0