給你一份詳細的CSS布局指南,請查收

（給前端大學(xué)加星標，提升前端技能.）

作者：catboy

https://juejin.im/post/5e91a8a56fb9a03c9037928f

在我們前端開發(fā)過程中，寫CSS（包括sass, less, stylus這樣的預(yù)處理器）進行設(shè)計稿的樣式還原是一項重要的工作，而其中，關(guān)于頁面布局的部分，又是書寫樣式代碼時候的重點和難點，這篇文章就盡可能的去總結(jié)常見的一些頁面布局實現(xiàn)方案(并不是全部，布局實現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?/span>

在開始正題之前，有一點要說明：CSS布局中遇到的一個繞不開的問題就是瀏覽器兼容性，下面方案會遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內(nèi)容，在不同場景，大家選擇合適的布局實現(xiàn)方案即可。

1. 居中相關(guān)的布局

1.1 水平居中布局

效果圖如下：

方案一. inline-block + text-align

分析：display設(shè)置為inline-block的元素，具有文本元素的性質(zhì)，其父元素可以通過設(shè)置文本對齊屬性text-align來控制其在行內(nèi)的對齊方式，text-align: center即為水平對齊

注意：text-align屬性是具有繼承性的，會導(dǎo)致自己元素內(nèi)部的文本也是居中顯示的，需要自身設(shè)置text-align覆蓋

方案二. 定位 + transform

分析：父元素開啟定位（relative，absolute,fixed都可以）后，子元素設(shè)置絕對定位absolute后，left設(shè)置為50%，再使用transform: translateX(-50%)將子元素往反方向移動自身寬度的50%，便完成水平居中。

注意：父級元素是否脫離文檔流，不影響子元素水平居中效果，但是transform是css3屬性，存在瀏覽器兼容問題

方案三. display: block + margin: 0 auto

分析：這個方法只需要對子元素進行設(shè)置就可以實現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會自動分配，實現(xiàn)來外邊距等分效果。

注意：這里子元素設(shè)置display為block或者table都是可以的，如果子元素脫離文檔流（浮動，定位），會導(dǎo)致margin屬性的值無效。

1.2 垂直居中布局

效果圖如下：

方案一. 定位 + transform

這種方案和之前水平居中布局的方案二是同樣的原理，不在贅述

方案二. display: table-cell + vertical-align

分析：設(shè)置display: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實現(xiàn)子元素的垂直居中。

注意：vertical-align屬性具有繼承性，導(dǎo)致父元素內(nèi)文本也是垂直居中顯示的。

1.3 水平垂直居中布局

效果圖如下：

前面分別總結(jié)了一些水平居中和垂直居中的布局方式，那么進行水平垂直居中的布局，也就沒什么特別要說的了，直接上代碼：

方案一.定位 + transform

方案二. 結(jié)合水平布局方案三，垂直布局方案二

1.4 使用flex進行居中布局

分析：使用flex，水平垂直居中會變得非常容易，默認情況下，align-items: center垂直居中（交叉軸排列方式），justify-content: center水平居中（主軸排列方式）注意：需要考慮瀏覽器兼容性問題。

2. N列布局

2.1 兩列布局

這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應(yīng)。比如，我們實現(xiàn)做列定寬，右列自適應(yīng)的布局。

效果圖如下：

方案一. 左邊元素浮動，定寬，右邊元素設(shè)置margin-left

分析：一個最簡單的做法，左邊元素設(shè)置浮動，定寬，右邊元素的margin-left設(shè)置為左邊元素寬度大小，可以實現(xiàn)效果。

注意：我們左邊元素使用了浮動，但是右邊元素沒有浮動

    
定寬    
自適應(yīng)

方案二. 左邊元素浮動，定寬，右邊元素設(shè)置overflow:hidden

分析：右邊元素由于設(shè)置overflow:hidden開啟BFC，與外界隔離，所以能實現(xiàn)效果

注意：overflow:hidden的設(shè)置也使得右邊元素內(nèi)容超出隱藏。這里如果不設(shè)置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動元素蓋住，不是我們要的結(jié)果，雖然看起來沒什么區(qū)別。

    
定寬    
自適應(yīng)

方案三.將左右元素用一個display:table的元素包裹，左右元素設(shè)置為display: table-cell

分析：這里主要是基于表格元素，在沒有設(shè)置寬度時，會自動分配寬度來實現(xiàn)布局的。

注意：設(shè)置為表格后，在某些瀏覽器可能會受到表格本身特有行為的影響，比如表格邊框等等。

    
        
定寬        
自適應(yīng)    

方案四. flex布局

分析：父容器采用flex布局，左邊元素定寬之后，右邊元素，因為只有一個，所以flex屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會占滿剩余空間。

注意：依然是，注意兼容性問題。

       
         
定寬         
自適應(yīng)     
 

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個實際上和前面的兩列布局是類似的。

效果圖如下：

方案一. 定寬 + overflow:hidden

分析：這個方案和兩列布局方案二是相同的。

    
定寬    
定寬    
自適應(yīng)

方案二. flex布局

分析：這里布局原理和兩列布局中flex布局方式是相同的。

      
         
定寬         
定寬         
自適應(yīng)     
 

2.2.2. 圣杯布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素不需要嵌套子元素）

效果圖如下：

方案一. 左右兩側(cè)浮動，中間元素使用margin

分析：這種方法就是左右兩邊浮動，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實現(xiàn)比較簡單。

注意：這種方式，需要在書寫html結(jié)構(gòu)時，將右側(cè)元素寫在中間元素的前面，因為如果右側(cè)元素在中間元素后面，由于浮動元素位置上不能高于（或平級）前面的非浮動元素，導(dǎo)致右側(cè)元素會下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于SEO。

    
定寬    
定寬    
自適應(yīng)

方案二. 父容器使用margin，左中右元素均浮動，利用定位和margin移動到正確位置

分析：這種方法將中間元素c放置在最前面，有利于SEO。

注意：實現(xiàn)細節(jié)在參考下面代碼中的注釋。

    
        
自適應(yīng)        
定寬        
定寬    

2.2.3. 雙飛翼布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素內(nèi)部增加子元素用于放置內(nèi)容）

效果圖如下：

方案一. 中間元素子元素設(shè)置margin，左中右元素均設(shè)置浮動，左右元素通過margin移動到正確位置

分析：這種方法為中間元素增加子元素作為內(nèi)容區(qū)域，通過子元素設(shè)置margin完成。

注意：和圣杯布局對照，有相似處，也有不同，實現(xiàn)的結(jié)果是一樣的。

    
        
自適應(yīng)    
    
定寬    
定寬

2.2.4. flex布局實現(xiàn)（中間自適應(yīng)，左右等寬）

分析：flex實現(xiàn)就很簡單了，可以參照普通三列布局flex實現(xiàn)。

注意：還是要注意瀏覽器兼容性問題。

    
        
定寬        
自適應(yīng)        
定寬    

2.3 多列等分布局

所謂多列等分布局，就是若干列在容器中自適應(yīng)等分寬度，我們以五列等分布局為例。

效果圖如下：

方案一. 浮動 + 百分數(shù)平分

分析：這種方案就是每一列浮動，之后按照百分比平分寬度，實現(xiàn)簡單。

方案二. 使用display: table布局

分析：父容器指定display: table，設(shè)置布局行為table-layout: fixed，指定每個表格等寬。

注意：table-layout: fixed是需要設(shè)置的，默認情況下，列寬度由單元格內(nèi)容設(shè)定，設(shè)置之后，列寬由表格寬度和列寬度設(shè)定。

方案三. 使用column布局

分析：使用column布局，指定內(nèi)容區(qū)域需要分為5列即可。

注意：瀏覽器兼容性問題。

方案四. 使用flex布局

分析：使用flex布局十分簡單，指定每一列所占空間相同即可

2.4 多列等高布局

所謂多列等高布局，就是多類內(nèi)容可能不一樣，但是保證每一列的高度是相同的，這個高度應(yīng)該由內(nèi)容最多的那一列決定。

效果圖如下：

方案一. 使用display: table布局

分析：父元素設(shè)置display: table，子元素設(shè)置display: table-cell，這樣布局就是按照表格行為布局，表格單元格默認等高。

       
         
啊啊啊啊啊啊啊啊啊啊啊啊         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊         
         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊     
 

方案二. 使用flex布局

分析：默認情況下，display: flex的元素align-items屬性值為stretch，如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

       
         
啊啊啊啊啊啊啊啊啊啊啊啊         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊         
         
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊     
 

3. 全屏布局

所謂全屏布局，就是實現(xiàn)經(jīng)典的頭部，內(nèi)容區(qū)，底部三大區(qū)域占滿全屏的布局，這種布局很常見。

實現(xiàn)效果如下：

分析：這里采用的方案是，頭部底部使用fixed定位，中間使用之前講到的兩列布局技術(shù)。

注意：頭部底部可以使用header, footer標簽，內(nèi)容區(qū)域結(jié)構(gòu)與布局都是多種多樣的。

本篇文章總結(jié)了一些常見布局的實現(xiàn)方案，css布局的實現(xiàn)方案很多，需要我們平時多去積累，選擇合適的方案。

最后，希望隨著時間的推移，兼容性不再成為我們技術(shù)實現(xiàn)的障礙，愿世界越來越美好。

分享前端好文，點亮?在看?