蜜桃午夜视频网页,久久久熟妇熟女网站

一、水平居中

(1)文本/行內元素/行內塊級元素

#parent{
    text-align: center;
}

優(yōu)缺點

優(yōu)點：簡單快捷，容易理解，兼容性非常好
缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；如果子元素寬度大于父元素寬度則無效，只有后代行內內容中寬度小于設置text-align屬性的元素寬度的時候，才會水平居中

(2)單個塊級元素

#son{
    width: 100px; /*必須定寬*/
    margin: 0 auto;
}

優(yōu)缺點

優(yōu)點：簡單；兼容性好
缺點：必須定寬，并且值不能為auto；寬度要小于父元素，否則無效

(3)多個塊級元素

#parent{
    text-align: center;
}
.son{
    display: inline-block; /*改為行內或者行內塊級形式，以達到text-align對其生效*/
}

優(yōu)缺點

優(yōu)點：簡單，容易理解，兼容性非常好
缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；塊級改為inline-block換行、空格會產(chǎn)生元素間隔

(4)使用絕對定位實現(xiàn)

#parent{
    height: 200px;
    width: 200px;  /*定寬*/
    position: relative;  /*父相*/
    background-color: #f00;
}
#son{
    position: absolute;  /*子絕*/
    left: 50%;  /*父元素寬度一半,這里等同于left:100px*/
    transform: translateX(-50%);  /*自身寬度一半,等同于margin-left: -50px;*/
    width: 100px;  /*定寬*/
    height: 100px;
    background-color: #00ff00;
}

優(yōu)缺點

優(yōu)點：使用margin-left兼容性好；不管是塊級還是行內元素都可以實現(xiàn)
缺點：代碼較多；脫離文檔流；使用margin-left需要知道寬度值；使用transform兼容性不好（ie9+）

(5)任意個元素(flex)

#parent{
    display: flex;
    justify-content: center;
}

優(yōu)缺點

優(yōu)點：功能強大；簡單方便；容易理解
缺點：PC端兼容性不好，移動端（Android4.0+）

二、垂直居中

(1)單行文本/行內元素/行內塊級元素

#parent{
    height: 150px;
    line-height: 150px;  /*與height等值*/
}

優(yōu)缺點

優(yōu)點：簡單；兼容性好
缺點：只能用于單行行內內容；要知道高度的值

(2)多行文本/行內元素/行內塊級元素

#parent{  /*或者用span把所有文字包裹起來，設置display：inline-block轉換成圖片的方式解決*/
    height: 150px;
    line-height: 30px;  /*元素在頁面呈現(xiàn)為5行,則line-height的值為height/5*/
}

優(yōu)缺點

優(yōu)點：簡單；兼容性好
缺點：只能用于行內內容；需要知道高度和最終呈現(xiàn)多少行來計算出line-height的值，建議用span包裹多行文本

(3)圖片

原理：vertical-align和line-height的基友關系

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle;} /*默認是基線對齊，改為middle*/

優(yōu)缺點

優(yōu)點：簡單；兼容性好
缺點：需要添加font-size: 0; 才可以完全的垂直居中；不過需要主要，html#parent包裹img之間需要有換行或空格

(4)單個塊級元素

//html代碼:

<div id="parent">
    <div id="son"></div>
</div>

(4-1) 使用tabel-cell實現(xiàn):

#parent{
    display: table-cell;
    vertical-align: middle;
}

優(yōu)缺點

優(yōu)點：簡單；寬高不定；兼容性好（ie8+）
缺點：設置tabl-cell的元素，寬度和高度的值設置百分比無效，需要給它的父元素設置display: table; 才生效；table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height；設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢出時會自動撐開父元素

(4-2) 使用絕對定位實現(xiàn):

/*原理：子絕父相，top、right、bottom、left的值是相對于父元素尺寸的，然后margin或者transform是相對于自身尺寸的，組合使用達到水平居中的目的*/
#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子絕*/
    top: 50%;  /*父元素高度一半,這里等同于top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,這里等同于margin-top:-25px;*/
    height: 50px;
}

/*優(yōu)缺點
- 優(yōu)點：使用margin-top兼容性好；不管是塊級還是行內元素都可以實現(xiàn)
- 缺點：代碼較多；脫離文檔流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/

或

/*原理：當top、bottom為0時,margin-top&bottom會無限延伸占滿空間并且平分*/
#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

/*優(yōu)缺點
- 優(yōu)點：簡單;兼容性較好(ie8+)
- 缺點：脫離文檔流*/

(4-3) 使用flex實現(xiàn):

#parent{
    display: flex;
    align-items: center;
}

或

#parent{display: flex;}
#son{align-self: center;}

或
/*原理：這個尚未搞清楚，應該是flex使margin上下邊界無限延伸至剩余空間并平分了*/
#parent{display: flex;}
#son{margin: auto 0;}

優(yōu)缺點

優(yōu)點：簡單靈活；功能強大
缺點：PC端兼容性不好，移動端（Android4.0+）

(5)任意個元素(flex)

#parent{
    display: flex;
    align-items: center;
}

或

#parent{
    display: flex;
}
.son{
    align-self: center;
}

或 

#parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

優(yōu)缺點

優(yōu)點：簡單靈活；功能強大
缺點：PC端兼容性不好，移動端（Android4.0+）

三、水平垂直居中

(1)行內/行內塊級/圖片

#parent{
    height: 150px;
    line-height: 150px;  /*行高的值與height相等*/
    text-align: center;
    font-size: 0;   /*消除幽靈空白節(jié)點的bug*/
}
#son{
    /*display: inline-block;*/  /*如果是塊級元素需改為行內或行內塊級才生效*/
    vertical-align: middle;
}

優(yōu)缺點

優(yōu)點：代碼簡單；兼容性好（ie8+）
缺點：只對行內內容有效；需要添加font-size: 0; 才可以完全的垂直居中；不過需要注意html中#parent包裹#son之間需要有換行或空格；熟悉line-height和vertical-align的基友關系較難

(2)table-cell

#parent{
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行內元素就添加這個*/
}
#son{
    /*margin: 0 auto;*/    /*如果是塊級元素就添加這個*/
    width: 100px;
    height: 50px;
}

優(yōu)缺點

優(yōu)點：簡單；適用于寬度高度未知情況；兼容性好（ie8+）
缺點：設置tabl-cell的元素，寬度和高度的值設置百分比無效，需要給它的父元素設置display: table; 才生效；table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height；設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢出時會自動撐開父元素

(3)button作為父元素

//原理：button的默認樣式，再把需要居中的元素表現(xiàn)形式改為行內或行內塊級

button#parent{  /*改掉button默認樣式就好了,不需要居中處理*/
    height: 150px;
    width: 200px;
    outline: none;  
    border: none;
}
#son{
    display: inline-block; /*button自帶text-align: center,改為行內水平居中生效*/
}

優(yōu)缺點

優(yōu)點：簡單方便，充分利用默認樣式
缺點：只適用于行內內容；需要清除部分默認樣式；水平垂直居中兼容性很好，但是ie下點擊會有凹陷效果！

(4)絕對定位

#parent{
    position: relative;
}
#son{
    position: absolute;
    top: 50%;
    left: 50%;
    /*定寬高時等同于margin-left:負自身寬度一半;margin-top:負自身高度一半;*/
    transform: translate(-50%,-50%); 
}

優(yōu)缺點

優(yōu)點：使用margin兼容性好；不管是塊級還是行內元素都可以實現(xiàn)
缺點：代碼較多；脫離文檔流；使用margin需要知道寬高；使用transform兼容性不好（ie9+）

(5)絕對居中

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

優(yōu)缺點

優(yōu)點：無需關注寬高；兼容性較好(ie8+)
缺點：代碼較多；脫離文檔流

(6)flex

#parent{
    display: flex;
}
#son{
    margin: auto;
}

或

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}

(7)視窗居中

//原理：vh為視口單位，視口即文檔可視的部分，50vh就是視口高度的50/100，設置50vh上邊距再transform變換
#son{
    /*0如果去掉，則會多出滾動條并且上下都是50vh的margin。如果去掉就給body加上overflow:hidden;*/
    margin: 50vh auto 0;  
    transform: translateY(-50%);
}

優(yōu)缺點

優(yōu)點：簡單；容易理解；兩句代碼達到屏幕水平垂直居中
缺點：兼容性不好（ie9+，Android4.4+）

四、兩列布局

4.1 左列定寬,右列自適應

效果圖.png

(1)利用float+margin實現(xiàn)

//html代碼:
<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>

//css代碼:
#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大于等于#left的寬度*/
}

(2)利用float+margin(fix)實現(xiàn)

//html代碼:
<body>
<div id="left">左列定寬</div>
<div id="right-fix">
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的寬度,才能顯示在同一行*/
}
#right{
    margin-left: 100px; /*大于或等于#left的寬度*/
    background-color: #0f0;
    height: 500px;
}

(3)使用float+overflow實現(xiàn)

//html代碼:
<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>

//css代碼:
#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*觸發(fā)bfc達到自適應*/
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果
缺點：浮動脫離文檔流，需要手動清除浮動，否則會產(chǎn)生高度塌陷；不支持ie6
(4)使用table實現(xiàn)

//html代碼:
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>

//css代碼:
#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用單元格自動分配寬度*/
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
缺點：margin失效；設置間隔比較麻煩；不支持ie8-
(5)使用絕對定位實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent{
    position: relative;  /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的寬度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

(6)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent{
    width: 100%;
    height: 500px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; /*均分了父元素剩余空間*/
    background-color: #0f0;
}

(7)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*設定2列就ok了,auto換成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

4.3 一列不定,一列自適應

(盒子寬度隨著內容增加或減少發(fā)生變化,另一個盒子自適應)

效果圖:

效果圖.png

變化后:

變化后.png

(1)使用float+overflow實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#left {
    margin-right: 10px;
    float: left;  /*只設置浮動,不設寬度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*觸發(fā)bfc*/
    height: 500px;
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解，無需關注寬度，利用bfc達到自適應效果
缺點：浮動脫離文檔流，需要手動清除浮動，否則會產(chǎn)生高度塌陷；不支持ie6
(2)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent{
    display: flex;//未寫兼容代碼
}
#left { /*不設寬度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

(3)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr換一下順序就是左列自適應,右列不定寬了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

五、三列布局

5.1 兩列定寬,一列自適應

效果圖：

效果圖.png

(1)使用float+margin實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent{
    min-width: 310px; /*100+10+200,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px;  /*#left和#center間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    margin-left: 320px;  /*等于#left和#center的寬度之和加上間隔,多出來的就是#right和#center的間隔*/
    height: 500px;
    background-color: #0f0;
}

(2)使用float+overflow實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

css代碼:
#parent{
    min-width: 320px; /*100+10+200+20,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px; /*間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    margin-right: 10px; /*在此定義和#right的間隔*/
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    overflow: hidden;  /*觸發(fā)bfc*/
    height: 500px;
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果
缺點：浮動脫離文檔流，需要手動清除浮動，否則會產(chǎn)生高度塌陷；不支持ie6

(3)使用table實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent {
    width: 100%; 
    height: 520px; /*抵消上下間距10*2的高度影響*/
    margin: -10px 0;  /*抵消上下邊間距10的位置影響*/
    display: table;
    /*左右兩邊間距大了一點,子元素改用padding設置盒子間距就沒有這個問題*/
    border-spacing: 10px;  /*關鍵!!!設置間距*/
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
缺點：margin失效；設置間隔比較麻煩；不支持ie8-

(4)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
    display: flex;
}
#left {
    margin-right: 10px;  /*間距*/
    width: 100px;
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    width: 200px;
    background-color: #eeff2b;
}
#right {
    flex: 1;  /*均分#parent剩余的部分達到自適應*/
    background-color: #0f0;
}

(5)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px 200px auto; /*設置3列,固定第一第二列的寬度,第三列auto或者1fr*/
}
#left {
    margin-right: 10px;  /*間距*/
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    background-color: #eeff2b;
}
#right {
    background-color: #0f0;
}

5.2 兩側定寬,中間自適應

效果圖：

效果圖.png

5.2.1 雙飛翼布局方法

//html代碼:
<body>
<div id="header"></div>
<!--中間欄需要放在前面-->
<div id="parent">
    <div id="center">
        <div id="center_inbox">中間自適應</div>
        <hr>  <!--方便觀察原理-->
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

//css代碼:
#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*調整#left的位置,值等于自身寬度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*關鍵!!!左右邊界等于左右盒子的寬度,多出來的為盒子間隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等于自身寬度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮動!!*/
    height: 60px;
    background-color: #ccc;
}

5.2.2 圣杯布局方法

效果圖：

效果圖.png

//html代碼:
<body>
<div id="header"></div>
<div id="parent">
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

//css代碼:
#header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*為了使#center擺正,左右padding分別等于左右盒子的寬,可以結合左右盒子相對定位的left調整間距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相對定位調整#left的位置,正值大于或等于自身寬度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由于#parent的padding,達到自適應的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相對定位調整#right的位置,大于或等于自身寬度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}

5.2.3 使用Grid實現(xiàn)

效果圖:

html代碼:
<body>
<div id="parent">
    <div id="header"></div>
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
    <div id="footer"></div>
</div>
</body>

css代碼:
#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px; /*設定3列*/
    grid-template-rows: 60px auto 60px; /*設定3行*/
    /*設置網(wǎng)格區(qū)域分布*/
    grid-template-areas: 
        "header header header" 
        "leftside main rightside" 
        "footer footer footer";
}
#header {
    grid-area: header; /*指定在哪個網(wǎng)格區(qū)域*/
    background-color: #ccc;
}
#left {
    grid-area: leftside;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    grid-area: main; /*指定在哪個網(wǎng)格區(qū)域*/
    margin: 0 15px; /*設置間隔*/
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    grid-area: rightside; /*指定在哪個網(wǎng)格區(qū)域*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    grid-area: footer; /*指定在哪個網(wǎng)格區(qū)域*/
    background-color: #ccc;
}

5.2.4 其他方法

(1)使用table實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

//css代碼:
#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡潔，容易理解；
缺點：margin失效，采用border-spacing表格兩邊的間隔無法消除；不支持ie8-

(2)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {
    flex: 1;  /*均分#parent剩余的部分*/
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}

(3)使用position實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

//css代碼:
#parent {
    position: relative; /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {
    height: 500px;
    margin-left: 100px; /*大于等于#left的寬度,或者給#parent添加同樣大小的padding-left*/
    margin-right: 200px;  /*大于等于#right的寬度,或者給#parent添加同樣大小的padding-right*/
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：容易理解，兼容性比較好
缺點：需手動計算寬度確定邊距；脫離文檔流；代碼繁多

六、多列布局

6.1多列等寬

效果圖:

效果圖.png

(1)使用float實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
}
.column{
    float: left;  /*添加浮動*/
    width: 16.66666666666667%;  /*100÷列數(shù),得出百分比*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解；兼容性較好
缺點：需要手動清除浮動，否則會產(chǎn)生高度塌陷

(2)使用table實現(xiàn)

//html代碼
<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

//css代碼:
#parent {
    width: 100%;
    height: 500px;
    display: table;
}
.column{
    display: table-cell; /*無需關注列數(shù),單元格自動平分*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

優(yōu)缺點：

優(yōu)點：代碼簡單，容易理解；無需關注寬度。單元格自動等分
缺點：margin失效；設置間隔比較麻煩；不兼容ie8-

(3)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
    display: flex;
}
.column{
    flex: 1;  /*無需關注列數(shù),一起平分#parent*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

(4)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

//css代碼:
#parent {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(6,1fr);  /*6就是列數(shù)*/
}
.column{}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

6.2 九宮格布局

效果圖:

效果圖.png

(1)使用table實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

//css代碼:
#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}
.row {
    display: table-row;
}
.item {
    border: 1px solid #000;
    display: table-cell;
}

優(yōu)缺點：

優(yōu)點：代碼簡潔，容易理解；
缺點：margin失效，采用border-spacing表格兩邊的間隔無法消除；不支持ie8-

(2)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

//css代碼:
#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex: 1;
}
.item {
    flex: 1;
    border: 1px solid #000;
}

(3)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>

//css代碼:
#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此為重復的合并寫法*/
    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此為重復的合并寫法*/
}
.item {
    border: 1px solid #000;
}

七、全屏布局

效果圖:

效果圖.png

(1)使用絕對定位實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

//css代碼:
html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {
    border: 1px solid #000;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {
    position: absolute;
    top: 100px;  /*值大于等于#top的高度*/
    left: 0;
    bottom: 50px;  /*值大于等于#bottom的高度*/
    width: 200px;
}
#right {
    position: absolute;
    overflow: auto;
    left: 200px;  /*值大于等于#left的寬度*/
    right: 0;
    top: 100px;  /*值大于等于#top的高度*/
    bottom: 50px;  /*值大于等于#bottom的高度*/
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

優(yōu)缺點：

優(yōu)點：容易理解
缺點：代碼繁多；需要計算好各個盒子的寬高。

(2)使用flex實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

//css代碼:
*{
    margin: 0;
    padding: 0;
}
html,body,#parent{
    height:100%;
}
#parent {
    display: flex;
    flex-direction: column;
}
#top {
    height: 100px;
}
#bottom {
    height: 50px;
}
#middle {
    flex: 1;
    display: flex;
}
#left {
    width: 200px;
}
#right {
    flex: 1;
    overflow: auto;
}

(3)使用Grid實現(xiàn)

//html代碼:
<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

//css代碼:
*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {
    width: 100%;
    height: 100%;
    display: grid;
    /*分成2列,第一列寬度200px,第二列1fr平分剩余的部分,此處換成auto也行*/
    grid-template-columns: 200px 1fr;  
    /*分成3行,第一行高度100px,第二行auto為自適應,此處換成1fr也行,第3行高度為50px*/
    grid-template-rows: 100px auto 50px; 
    /*定義網(wǎng)格區(qū)域分布*/
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
}
#parent>div{
    border: 1px solid #000;
}
#top{
    grid-area: header;  /*指定在哪個網(wǎng)格區(qū)域*/
}
#left{
    grid-area: aside;  /*指定在哪個網(wǎng)格區(qū)域*/
}
#right{
    grid-area: main;  /*指定在哪個網(wǎng)格區(qū)域*/
}
#bottom{
    grid-area: footer;  /*指定在哪個網(wǎng)格區(qū)域*/
}

九、其他補充：

9.1 移動端viewport

設置viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

9.2 媒體查詢

@media (max-width: 767px) { ...css代碼... }
@media (min-width: 768px) and (max-width: 991px) { ...css代碼... }
@media (min-width: 992px) and (max-width: 1199px) { ...css代碼... }
@media (min-width: 1200px) { ...css代碼... }

閱讀推薦:
《MDN文檔介紹》
《隨方逐圓 -- 全面理解 CSS 媒體查詢》

9.3 REM

9.4 Flexbox

9.5 CSS Grid

閱讀推薦：
《grid布局學習指南》
《grid規(guī)范草稿》

參考資料：
《干貨!各種常見布局實現(xiàn)+知名網(wǎng)站實例分析》

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2.CSS常用效果及實現(xiàn)

2.CSS常用效果及實現(xiàn)

一、水平居中

二、垂直居中

三、水平垂直居中

四、兩列布局

4.1 左列定寬,右列自適應

4.3 一列不定,一列自適應

五、三列布局

5.1 兩列定寬,一列自適應

5.2 兩側定寬,中間自適應

六、多列布局

6.1多列等寬

6.2 九宮格布局

七、全屏布局

九、其他補充：

9.1 移動端viewport

9.2 媒體查詢

9.3 REM

9.4 Flexbox

9.5 CSS Grid

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

2.CSS常用效果及實現(xiàn)

一、水平居中

二、垂直居中

三、水平垂直居中

四、兩列布局

4.1 左列定寬,右列自適應

4.3 一列不定,一列自適應

五、三列布局

5.1 兩列定寬,一列自適應

5.2 兩側定寬,中間自適應

六、多列布局

6.1多列等寬

6.2 九宮格布局

七、全屏布局

九、其他補充：

9.1 移動端viewport

9.2 媒體查詢

9.3 REM

9.4 Flexbox

9.5 CSS Grid

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、水平居中

二、垂直居中

三、水平垂直居中

四、兩列布局

五、三列布局

六、多列布局

九、其他補充：