頁面布局解決方案

XiNGRZ 發布于2019-08-29 13:03 / 2589人閱讀

摘要：頁面布局解決方案居中布局水平居中子元素相對于父元素居中且子元素寬度可變。優點兼容性好支持，以下版本需要調整頁面結構至優點絕對定位脫離文檔流，不會對后續元素的布局造成影響。下面列出了兩種布局方案，草案并不穩定，瀏覽器支持也并不理想。

頁面布局解決方案 居中布局 水平居中

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

除了另外聲明，HTML結構為以下內容：


    Demo

inline-block + text-align

.parent {
    text-align: center;
}

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

優點

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

table + margin


    Demo


.parent {
    text-align: center;
}

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

NOTE: display: table 在表現上類似 block 元素，但是寬度為內容寬度。

優點

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

NOTE：兼容 IE8 以下版本需要調整為

的結果。

absolute + transform

.parent {
    position: relative;
    text-align: center;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /*寬度可變*/
    background: #ffff00;
}

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。

子元素設置絕對定位 position: absolute;，父元素設置相對定位 position: relative; 是典型的定位方法，多用于為子元素設置定位的參考點。

缺點

transform 為 CSS3 屬性，有兼容性問題。

NOTE：transform屬性的translateX和translateY對元素進行旋轉、縮放、移動或傾斜，其中移動功能可以用于定位。

flex + justify-content

.parent {
    display: flex;
    justify-content: center;
    text-align: center;
}

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

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

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

優點

只需設置父元素屬性，無需設置子元素。

優點

flex有兼容性問題。

垂直居中

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

table-cell + vertical-align

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    background: #ffff00;
}

優點

兼容性好（支持 IE8，以下版本需要調整頁面結構至 table）

absolute + transform

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ffff00;
}

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

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。

缺點

transform 為 CSS3 屬性，有兼容性問題。

flex + align-items

.parent {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    width: 200px;
    height: 200px;
    background: #ffff00;
}

優點

只需設置父節點屬性，無需設置子元素

缺點

有兼容性問題

水平與垂直居中

水平與垂直居中的一般性布局在另一篇文章中有過總結，可以作為參考學習。

子元素相對于父元素水平垂直居中且其（子元素與父元素）高度寬度均可變。

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

優點

兼容性好

absolute + transform

.parent {
    position: relative;
    width: 300px; /*寬度和高度均可變*/
    height: 300px;
    background: #ffff00;
}

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

}

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。

缺點

transform 為 CSS3 屬性，有兼容性問題。

flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px; /*寬度和高度均可變*/
    height: 300px;
    background: #ffff00;
}

優點

只需設置父節點屬性，無需設置子元素

多列布局

多列布局在網頁中很常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列自適應，還有等分布局等。

一列定寬，一列自適應

除了另外聲明，HTML結構為以下內容：


    
        left
    
    
        right
        right

float + margin

p {
    margin: 0; /*清掉 p 標簽的默認margin*/
}

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

.right {
    margin-left: 100px;
    background: #c7254e;
}

float + margin + (fix) 改造版


    
        left
    
    
        
            right
            right
        
    


p {
    margin: 0; /*清掉 p 標簽的默認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：此方法不會存在 IE6 中3像素的 BUG，但 .left 不可選擇，需要設置 .left {position: relative} 來提高層級。此方法可以適用于多版本瀏覽器（包括 IE6）。缺點是多余的 HTML 文本結構。

float + overflow

p {
    margin: 0; /*清掉 p 標簽的默認margin*/
}

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

.right {
    overflow: hidden;
    background: #c7254e;
}

設置 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式化文本。 BFC 中的內容與外界的元素是隔離的。

overflow: hidden; 除了隱藏溢出內容外，還具有清除浮動的功能，具體實現是觸發 BFC 或者 IFC，而這也是很常用的方法。overflow: hidden;對與父元素顯示區域重疊部分進行切割，只在 BFC 區域顯示，從而實現浮動的清除。

clear: both; 是經典的清除浮動方法，但它與 overflow: hidden;有很大的區別。clear: both;是清除父元素同一側的浮動元素，即同一側不允許存在其他浮動內容，子元素需換行顯示。如果布局目標是同側有其他浮動元素，可以選擇 overflow: hidden;。這個特性稱為浮動元素閉合。如果有對這個特性感興趣或者研究透徹的朋友請多多指教，這個在解決高度坍塌、觸發BFC等方面應用廣泛，且非常實用。

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; 可加速渲染，也是設定布局優先。

NOTE：table-cell 中不可以設置 margin 但是可以通過 padding 來設置間距。

flex

.parent {
    display: flex;
}

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

.right {
    flex: 1;
    background: #c7254e;
}

NOTE：flex-item 默認為內容寬度。

缺點

低版本瀏覽器兼容問題。

性能問題，只適合小范圍布局。

兩列定寬，一列自適應

除了另外聲明，HTML結構為以下內容：


    
        left
    
    
        center
    
    
        right
        right

p {
    margin: 0; /*清掉 p 標簽的默認margin*/
}

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

.right {
    overflow: hidden;
    /*等價于*/
    /*flex: 1 1 0;*/
    background: #c7254e;
}

多列定寬的實現可以根據單列定寬的例子進行修改與實現。

一列不定寬 + 一列自適應

不定寬的寬度為內容決定，下面為可以實現此效果的方法：

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

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

flex，此方法在 IE9及其以下版本中有兼容性問題

多列不定寬 + 一列自適應

其解決方案同一列不定寬加一列自適應相仿。

多列等分布局

除了另外聲明，HTML結構為以下內容：

float

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

.column {
    float: left;
    width: 25%;
    box-sizing: border-box;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法結構和樣式具有耦合性。

table


    
        
            1
        
        
            2
        
        
            3
        
        
            4
        
    


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

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

.column {
    display: table-cell;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：缺點是多了文本結果

flex

.parent {
    display: flex;
}

.column {
    flex: 1;
    background: #c7254e;
}

NOTE：flex 的特性為分配剩余空間。 NOTE+：兼容性有問題。

兩列等高布局

除了另外聲明，HTML結構為以下內容：


    
        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

兩列布局，一列定寬，一列自適應

.parent {
    display: flex;
}

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

.right {
    flex: 1;
    background: #c7254e;
}

float

.parent {
    overflow: hidden;
}

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

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

.right {
    overflow: hidden;
    background: #c7254e;
}

NOTE：此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等。 NOTE+：此方法兼容性較好。

全屏布局

除了另外聲明，HTML結構為以下內容：

定寬需求

實現方案

position 常規方案

flex CSS3 新實現

position


    
    
    
    


html, body, .parent {
    height: 100%;
    /*用于隱藏滾動條*/
    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%;
    /*用于隱藏滾動條*/
    overflow: hidden;
    margin: 0;
    padding: 0;
}

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

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

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

.middle {
    /*居中自適應*/
    display: flex;
    flex: 1;
    /*flex-direction: row 為默認值*/
}

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

.right {
    flex: 1;
    overflow: auto;
    background: #5cb85c;
}

百分比寬度需求

只需把定寬高（px 為單位的值）的實現改成百分比（%）既可。

內容自適應

只有右側欄占據剩余位置，其余空間均需根據內容改變。所以 postion 的定位方法不適合實現此方案。下面列出了兩種布局方案：

flex

grid，W3C 草案并不穩定，瀏覽器支持也并不理想。

flex

只有不給寬和高進行限制，即可對其中的內容做出自適應的布局。把定寬實現方案中設置了寬度和高度的部分去掉。

云服務器 GPU云服務器頁面布局 html頁面布局 aspx頁面布局 php開發頁面布局

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

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

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
微信小程序新單位rpx與自適應布局

摘要：布局上面四個方法，各有優缺點，現在回頭看看微信的，相信大家已經有所啟發，實際上就是系統級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據屏幕寬度進行自適應，在rpx出現之前，web頁面的自適應布局已經有了多種解決方案，為什么微信...

LeviDing 2019-08-29 11:27 評論0 收藏0
微信小程序新單位rpx與自適應布局

摘要：布局上面四個方法，各有優缺點，現在回頭看看微信的，相信大家已經有所啟發，實際上就是系統級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據屏幕寬度進行自適應，在rpx出現之前，web頁面的自適應布局已經有了多種解決方案，為什么微信...

thursday 2019-08-20 11:42 評論0 收藏0
微信小程序新單位rpx與自適應布局

摘要：布局上面四個方法，各有優缺點，現在回頭看看微信的，相信大家已經有所啟發，實際上就是系統級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據屏幕寬度進行自適應，在rpx出現之前，web頁面的自適應布局已經有了多種解決方案，為什么微信...

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