摘要：頁面布局解決方案居中布局水平居中子元素相對于父元素居中且子元素寬度可變。優(yōu)點(diǎn)兼容性好支持，以下版本需要調(diào)整頁面結(jié)構(gòu)至優(yōu)點(diǎn)絕對定位脫離文檔流，不會(huì)對后續(xù)元素的布局造成影響。下面列出了兩種布局方案，草案并不穩(wěn)定，瀏覽器支持也并不理想。

子元素相對于父元素居中且子元素寬度可變。

除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    
Demo

inline-block + text-align

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    width: 300px; /*寬度可變*/
    background: #ffff00;
}

優(yōu)點(diǎn)

兼容性好（甚至可以兼容 IE6 和 IE7）

table + margin

    
Demo


.parent {
    text-align: center;
}

.child {
    display: table;
    margin: 0 auto;
    width: 200px; /*寬度可變*/
    background: #ffff00;
}

NOTE: display: table 在表現(xiàn)上類似 block 元素，但是寬度為內(nèi)容寬度。

優(yōu)點(diǎn)

不需要設(shè)置父元素樣式 （支持 IE8 及其以上版本）

NOTE：兼容 IE8 以下版本需要調(diào)整為 
 的結(jié)果。
absolute + transform
.parent {
    position: relative;
    text-align: center;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /*寬度可變*/
    background: #ffff00;
}
優(yōu)點(diǎn)
絕對定位脫離文檔流，不會(huì)對后續(xù)元素的布局造成影響。
子元素設(shè)置絕對定位 position: absolute;，父元素設(shè)置相對定位 position: relative; 是典型的定位方法，多用于為子元素設(shè)置定位的參考點(diǎn)。
缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問題。
NOTE：transform屬性的translateX和translateY對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜，其中移動(dòng)功能可以用于定位。
flex + justify-content
.parent {
    display: flex;
    justify-content: center;
    text-align: center;
}

.child {
    width: 200px; /*寬度可變*/
    background: #ffff00;
}

/* 下面的方法，可以達(dá)到一樣的效果 */
.parent {
    display: flex;
    text-align: center;
}

.child {
    margin: 0 auto;
    width: 200px; /*寬度可變*/
    background: #ffff00;
}
優(yōu)點(diǎn)
只需設(shè)置父元素屬性，無需設(shè)置子元素。
優(yōu)點(diǎn)

flex有兼容性問題。
垂直居中
子元素相對于父元素居中且子元素高度可變。
table-cell + vertical-align
.parent {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    background: #ffff00;
}
優(yōu)點(diǎn)
兼容性好（支持 IE8，以下版本需要調(diào)整頁面結(jié)構(gòu)至 table）
absolute + transform
.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
優(yōu)點(diǎn)
絕對定位脫離文檔流，不會(huì)對后續(xù)元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會(huì)失去高度。
缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問題。
flex + align-items
.parent {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    width: 200px;
    height: 200px;
    background: #ffff00;
}
優(yōu)點(diǎn)
只需設(shè)置父節(jié)點(diǎn)屬性，無需設(shè)置子元素
缺點(diǎn)
有兼容性問題
水平與垂直居中
水平與垂直居中的一般性布局在另一篇文章中有過總結(jié)，可以作為參考學(xué)習(xí)。
子元素相對于父元素水平垂直居中且其（子元素與父元素）高度寬度均可變。
inline-block + text-align + table-cell + vertical-align
.parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 300px; /*寬度和高度均可變*/
    height: 300px;
    background: #ffff00;
}

.child {
    display: inline-block;
}
優(yōu)點(diǎn)
兼容性好
absolute + transform
.parent {
    position: relative;
    width: 300px; /*寬度和高度均可變*/
    height: 300px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
優(yōu)點(diǎn)
絕對定位脫離文檔流，不會(huì)對后續(xù)元素的布局造成影響。
缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問題。
flex + justify-content + align-items
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px; /*寬度和高度均可變*/
    height: 300px;
    background: #ffff00;
}
優(yōu)點(diǎn)
只需設(shè)置父節(jié)點(diǎn)屬性，無需設(shè)置子元素
多列布局
多列布局在網(wǎng)頁中很常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應(yīng)， 或者多列不定寬一列自適應(yīng)，還有等分布局等。
一列定寬，一列自適應(yīng)
除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    

        
left
    
    

        
right
        
right
    
float + margin
p {
    margin: 0; /*清掉 p 標(biāo)簽的默認(rèn)margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}
float + margin + (fix) 改造版

    

        
left
    
    

        

            
right
            
right
        
    


p {
    margin: 0; /*清掉 p 標(biāo)簽的默認(rèn)margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
    position: relative;
}

.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}
NOTE：此方法不會(huì)存在 IE6 中3像素的 BUG，但 .left 不可選擇， 需要設(shè)置 .left {position: relative} 來提高層級。 此方法可以適用于多版本瀏覽器（包括 IE6）。缺點(diǎn)是多余的 HTML 文本結(jié)構(gòu)。
float + overflow
p {
    margin: 0; /*清掉 p 標(biāo)簽的默認(rèn)margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}
設(shè)置 overflow: hidden 會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級格式化文本。 BFC 中的內(nèi)容與外界的元素是隔離的。
overflow: hidden; 除了隱藏溢出內(nèi)容外，還具有清除浮動(dòng)的功能，具體實(shí)現(xiàn)是觸發(fā) BFC 或者 IFC，而這也是很常用的方法。overflow: hidden;對與父元素顯示區(qū)域重疊部分進(jìn)行切割，只在 BFC 區(qū)域顯示，從而實(shí)現(xiàn)浮動(dòng)的清除。
clear: both; 是經(jīng)典的清除浮動(dòng)方法，但它與 overflow: hidden;有很大的區(qū)別。clear: both;是清除父元素同一側(cè)的浮動(dòng)元素，即同一側(cè)不允許存在其他浮動(dòng)內(nèi)容，子元素需換行顯示。如果布局目標(biāo)是同側(cè)有其他浮動(dòng)元素，可以選擇 overflow: hidden;。這個(gè)特性稱為浮動(dòng)元素閉合。如果有對這個(gè)特性感興趣或者研究透徹的朋友請多多指教，這個(gè)在解決高度坍塌、觸發(fā)BFC等方面應(yīng)用廣泛，且非常實(shí)用。
table
.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    width: 100px;
    background: #ffff00;
}

.right {
    display: table-cell;
    /*寬度為剩余寬度*/
    background: #c7254e;
}
table 的顯示特性為每列的單元格寬度和一定等于表格寬度。 table-layout: fixed; 可加速渲染，也是設(shè)定布局優(yōu)先。
NOTE：table-cell 中不可以設(shè)置 margin 但是可以通過 padding 來設(shè)置間距。
flex
.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}
NOTE：flex-item 默認(rèn)為內(nèi)容寬度。
缺點(diǎn)
低版本瀏覽器兼容問題。
性能問題，只適合小范圍布局。
兩列定寬，一列自適應(yīng)
除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    

        
left
    
    

        
center
    
    

        
right
        
right
    
p {
    margin: 0; /*清掉 p 標(biāo)簽的默認(rèn)margin*/
}

.left, .center {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    /*等價(jià)于*/
    /*flex: 1 1 0;*/
    background: #c7254e;
}
多列定寬的實(shí)現(xiàn)可以根據(jù)單列定寬的例子進(jìn)行修改與實(shí)現(xiàn)。
一列不定寬 + 一列自適應(yīng)
不定寬的寬度為內(nèi)容決定，下面為可以實(shí)現(xiàn)此效果的方法：

float + overflow，此方法在 IE6 中有兼容性問題

table，此方法在 IE6 中有兼容性問題

flex，此方法在 IE9及其以下版本中有兼容性問題
多列不定寬 + 一列自適應(yīng)
其解決方案同一列不定寬加一列自適應(yīng)相仿。
多列等分布局
除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
float
.parent {
    /*margin-left: -20px;*/
}

.column {
    float: left;
    width: 25%;
    box-sizing: border-box;
    /*padding-left: 20px;*/
    background: #c7254e;
}
NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法結(jié)構(gòu)和樣式具有耦合性。
table

    

        

            
1
        
        

            
2
        
        

            
3
        
        

            
4
        
    


.parent-fix {
    /*margin-left: -20px;*/
}

.parent {
    display: table;
    width: 100%;
    /*可以布局優(yōu)先，也可以單元格寬度平分在沒有設(shè)置的情況下*/
    table-layout: fixed;
}

.column {
    display: table-cell;
    /*padding-left: 20px;*/
    background: #c7254e;
}
NOTE：缺點(diǎn)是多了文本結(jié)果
flex
.parent {
    display: flex;
}

.column {
    flex: 1;
    background: #c7254e;
}
NOTE：flex 的特性為分配剩余空間。 NOTE+：兼容性有問題。
兩列等高布局
除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    

        
left
    
    

        
right
        
right
    
table
table 的特性為每列等寬，每行等高可以用于解決此需求。
.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    background: #ffff00;
}

.right {
    display: table-cell;
    background: #c7254e;
}
flex
兩列布局，一列定寬，一列自適應(yīng)
.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}
float
.parent {
    overflow: hidden;
}

.left, .right {
    padding-bottom: 99px; 
    /*此處設(shè)置 9999px 很大的值，實(shí)際滿足一定大小即可*/
    margin-bottom: -99px;
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}
NOTE：此方法為偽等高（只有背景顯示高度相等），左右真實(shí)的高度其實(shí)不相等。 NOTE+：此方法兼容性較好。
全屏布局
除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容：

    

    

        

        

    
    

定寬需求
實(shí)現(xiàn)方案

position 常規(guī)方案

flex CSS3 新實(shí)現(xiàn)
position

    

    

    

    



html, body, .parent {
    height: 100%;
    /*用于隱藏滾動(dòng)條*/
    overflow: hidden;
}

.top {
    /*相對于 body 定位*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #ffff00;
}

.left {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 50px;
    width: 200px;
    background: #c7254e;
}

.right {
    position: absolute;
    left: 200px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    background: #5cb85c;
}

.bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: #2a6496;
}
Flex
html, body, .parent {
    height: 100%;
    /*用于隱藏滾動(dòng)條*/
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.parent {
    display: flex;
    flex-direction: column;
}

.top {
    height: 100px;
    background: #ffff00;
}

.bottom {
    height: 50px;
    background: #2a6496;
}

.middle {
    /*居中自適應(yīng)*/
    display: flex;
    flex: 1;
    /*flex-direction: row 為默認(rèn)值*/
}

.left {
    width: 200px;
    background: #c7254e;
}

.right {
    flex: 1;
    overflow: auto;
    background: #5cb85c;
}
百分比寬度需求
只需把定寬高（px 為單位的值）的實(shí)現(xiàn)改成百分比（%）既可。
內(nèi)容自適應(yīng)
只有右側(cè)欄占據(jù)剩余位置，其余空間均需根據(jù)內(nèi)容改變。 所以 postion 的定位方法不適合實(shí)現(xiàn)此方案。下面列出了兩種布局方案：
flex

grid，W3C 草案并不穩(wěn)定，瀏覽器支持也并不理想。
flex
只有不給寬和高進(jìn)行限制，即可對其中的內(nèi)容做出自適應(yīng)的布局。把定寬實(shí)現(xiàn)方案中設(shè)置了寬度和高度的部分去掉。

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               頁面布局
                                                                                                           html頁面布局
                                                                                                           aspx頁面布局
                                                                                                           php開發(fā)頁面布局
                                                         
                 
               
              

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112335.html
               

                 
                                  
上一篇：CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）
  
                                                
                                       
下一篇：使用 canvas 實(shí)現(xiàn)精靈動(dòng)畫
                                  

                
相關(guān)文章
                

                             
                                                                    

                                                

                          
移動(dòng)端布局與適配
                                                     
摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。

grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面
CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。
移動(dòng)端頁面適配—...
                                                   
                          

                                

                                    Clect
                                    2019-08-29 14:08
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
微信小程序新單位rpx與自適應(yīng)布局
                                                     
摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。

rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...
                                                   
                          

                                

                                    LeviDing
                                    2019-08-29 11:27
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
微信小程序新單位rpx與自適應(yīng)布局
                                                     
摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。

rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...
                                                   
                          

                                

                                    thursday
                                    2019-08-20 11:42
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
微信小程序新單位rpx與自適應(yīng)布局
                                                     
摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。

rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...
                                                   
                          

                                

                                    Java_oldboy
                                    2019-08-01 15:50
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              

                  
                  
發(fā)表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               

                

                  
0條評論
   
                
 
                      

              

              
 
                

                    
                    
XiNGRZ
                    
男|高級講師
                    

                     
                                                                      我要關(guān)注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
tensorflow-serving
                            
閱讀 3112·2023-04-25 20:22
                                                       
BFC(塊級格式化上下文)的特點(diǎn)和應(yīng)用場景
                            
閱讀 3409·2019-08-30 11:14
                                                       
頁面布局解決方案
                            
閱讀 2655·2019-08-29 13:03
                                                       
前端面試--性能優(yōu)化
                            
閱讀 3253·2019-08-26 13:47
                                                       
發(fā)布訂閱模式-實(shí)現(xiàn)公眾號訂閱/內(nèi)容發(fā)布/取消訂閱功能
                            
閱讀 3299·2019-08-26 10:22
                                                       
JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁的各種寬高屬性
                            
閱讀 1329·2019-08-23 18:26
                                                       
看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件
                            
閱讀 681·2019-08-23 17:16
                                                       
區(qū)塊鏈項(xiàng)目如何俘獲用戶芳心，這些用戶心聲你值得聽一聽
                            
閱讀 1969·2019-08-23 17:01
                                                
                      
                

                   
              
  

                  
最新活動(dòng)
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           

      
    

         
閱讀需要支付1元查看
  
         
支付并查看
     
       

<