一,二,三章都是parent+son的簡(jiǎn)單結(jié)構(gòu),html代碼和效果圖就不貼出來了,第四章以后才有
原理：text-align只控制行內(nèi)內(nèi)容(文字、行內(nèi)元素、行內(nèi)塊級(jí)元素)如何相對(duì)他的塊父元素對(duì)齊
#parent{
text-align: center;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單快捷，容易理解，兼容性非常好
缺點(diǎn)：只對(duì)行內(nèi)內(nèi)容有效；屬性會(huì)繼承影響到后代行內(nèi)內(nèi)容；如果子元素寬度大于父元素寬度則無效，只有后代行內(nèi)內(nèi)容中寬度小于設(shè)置text-align屬性的元素寬度的時(shí)候，才會(huì)水平居中
原理：根據(jù)規(guī)范介紹得很清楚了，有這么一種情況：在margin有節(jié)余的同時(shí)如果左右margin設(shè)置了auto，將會(huì)均分剩余空間。另外，如果上下的margin設(shè)置了auto，其計(jì)算值為0
#son{
width: 100px; /*必須定寬*/
margin: 0 auto;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；兼容性好
缺點(diǎn)：必須定寬，并且值不能為auto；寬度要小于父元素，否則無效
原理：text-align只控制行內(nèi)內(nèi)容(文字、行內(nèi)元素、行內(nèi)塊級(jí)元素)如何相對(duì)他的塊父元素對(duì)齊
#parent{
text-align: center;
}
.son{
display: inline-block; /*改為行內(nèi)或者行內(nèi)塊級(jí)形式，以達(dá)到text-align對(duì)其生效*/
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單，容易理解，兼容性非常好
缺點(diǎn)：只對(duì)行內(nèi)內(nèi)容有效；屬性會(huì)繼承影響到后代行內(nèi)內(nèi)容；塊級(jí)改為inline-block換行、空格會(huì)產(chǎn)生元素間隔
原理：子絕父相，top、right、bottom、left的值是相對(duì)于父元素尺寸的，然后margin或者transform是相對(duì)于自身尺寸的，組合使用達(dá)到水平居中的目的
#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)缺點(diǎn)
優(yōu)點(diǎn)：使用margin-left兼容性好；不管是塊級(jí)還是行內(nèi)元素都可以實(shí)現(xiàn)
缺點(diǎn)：代碼較多；脫離文檔流；使用margin-left需要知道寬度值；使用transform兼容性不好（ie9+）
原理：就是設(shè)置當(dāng)前主軸對(duì)齊方式為居中。說不上為什么，flex無非就是主軸側(cè)軸是重點(diǎn)，然后就是排列方式的設(shè)置，可以去看看文末的flex閱讀推薦
#parent{
display: flex;
justify-content: center;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：功能強(qiáng)大；簡(jiǎn)單方便；容易理解
缺點(diǎn)：PC端兼容性不好，移動(dòng)端（Android4.0+）
對(duì)于水平居中，我們應(yīng)該先考慮，哪些元素有自帶的居中效果，最先想到的應(yīng)該就是 text-align:center 了，但是這個(gè)只對(duì)行內(nèi)內(nèi)容有效，所以我們要使用 text-align:center 就必須將子元素設(shè)置為 display: inline; 或者 display: inline-block; ；
其次就是考慮能不能用margin: 0 auto; ，因?yàn)檫@都是一兩句代碼能搞定的事，實(shí)在不行就是用絕對(duì)定位去實(shí)現(xiàn)了。
移動(dòng)端能用flex就用flex，簡(jiǎn)單方便，靈活并且功能強(qiáng)大，無愧為網(wǎng)頁(yè)布局的一大利器！
一,二,三章都是parent+son的簡(jiǎn)單結(jié)構(gòu),html代碼和效果圖就不貼出來了,第四章以后才有
原理：line-height的最終表現(xiàn)是通過inline box實(shí)現(xiàn)的，而無論inline box所占據(jù)的高度是多少（無論比文字大還是比文字小），其占據(jù)的空間都是與文字內(nèi)容公用水平中垂線的。
#parent{
height: 150px;
line-height: 150px; /*與height等值*/
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；兼容性好
缺點(diǎn)：只能用于單行行內(nèi)內(nèi)容；要知道高度的值
原理同上
#parent{ /*或者用span把所有文字包裹起來，設(shè)置display：inline-block轉(zhuǎn)換成圖片的方式解決*/
height: 150px;
line-height: 30px; /*元素在頁(yè)面呈現(xiàn)為5行,則line-height的值為height/5*/
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；兼容性好
缺點(diǎn)：只能用于行內(nèi)內(nèi)容；需要知道高度和最終呈現(xiàn)多少行來計(jì)算出line-height的值，建議用span包裹多行文本
原理：vertical-align和line-height的基友關(guān)系
#parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
img#son{vertical-align: middle;} /*默認(rèn)是基線對(duì)齊，改為middle*/優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；兼容性好
缺點(diǎn)：需要添加font-size: 0; 才可以完全的垂直居中；不過需要主要，html#parent包裹img之間需要有換行或空格
html代碼:
<p id="parent"> <p id="son"></p> </p>
原理：CSS Table，使表格內(nèi)容對(duì)齊方式為middle
#parent{
display: table-cell;
vertical-align: middle;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；寬高不定；兼容性好（ie8+）
缺點(diǎn)：設(shè)置tabl-cell的元素，寬度和高度的值設(shè)置百分比無效，需要給它的父元素設(shè)置display: table; 才生效；table-cell不感知margin，在父元素上設(shè)置table-row等屬性，也會(huì)使其不感知height；設(shè)置float或position會(huì)對(duì)默認(rèn)布局造成破壞，可以考慮為之增加一個(gè)父p定義float等屬性；內(nèi)容溢出時(shí)會(huì)自動(dòng)撐開父元素
/*原理：子絕父相，top、right、bottom、left的值是相對(duì)于父元素尺寸的，然后margin或者transform是相對(duì)于自身尺寸的，組合使用達(dá)到水平居中的目的*/
#parent{
height: 150px;
position: relative; /*父相*/
}
#son{
position: absolute; /*子絕*/
top: 50%; /*父元素高度一半,這里等同于top:75px;*/
transform: translateY(-50%); /*自身高度一半,這里等同于margin-top:-25px;*/
height: 50px;
}
/*優(yōu)缺點(diǎn)
- 優(yōu)點(diǎn)：使用margin-top兼容性好；不管是塊級(jí)還是行內(nèi)元素都可以實(shí)現(xiàn)
- 缺點(diǎn)：代碼較多；脫離文檔流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/
或
/*原理：當(dāng)top、bottom為0時(shí),margin-top&bottom會(huì)無限延伸占滿空間并且平分*/
#parent{position: relative;}
#son{
position: absolute;
margin: auto 0;
top: 0;
bottom: 0;
height: 50px;
}
/*優(yōu)缺點(diǎn)
- 優(yōu)點(diǎn)：簡(jiǎn)單;兼容性較好(ie8+)
- 缺點(diǎn)：脫離文檔流*/原理：flex設(shè)置對(duì)齊方式罷了，請(qǐng)查閱文末flex閱讀推薦
#parent{
display: flex;
align-items: center;
}
或
#parent{display: flex;}
#son{align-self: center;}
或
/*原理：這個(gè)尚未搞清楚，應(yīng)該是flex使margin上下邊界無限延伸至剩余空間并平分了*/
#parent{display: flex;}
#son{margin: auto 0;}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單靈活；功能強(qiáng)大
缺點(diǎn)：PC端兼容性不好，移動(dòng)端（Android4.0+）
原理：flex設(shè)置對(duì)齊方式罷了，請(qǐng)查閱文末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)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單靈活；功能強(qiáng)大
缺點(diǎn)：PC端兼容性不好，移動(dòng)端（Android4.0+）
對(duì)于垂直居中，最先想到的應(yīng)該就是 line-height 了，但是這個(gè)只能用于行內(nèi)內(nèi)容；
其次就是考慮能不能用vertical-align: middle; ，不過這個(gè)一定要熟知原理才能用得順手，建議看下vertical-align和line-height的基友關(guān)系 ；
然后便是絕對(duì)定位，雖然代碼多了點(diǎn)，但是勝在適用于不同情況；
移動(dòng)端兼容性允許的情況下能用flex就用flex
一,二,三章都是parent+son的簡(jiǎn)單結(jié)構(gòu),html代碼和效果圖就不貼出來了,第四章以后才有
原理：text-align: center; 控制行內(nèi)內(nèi)容相對(duì)于塊父元素水平居中,然后就是line-height和vertical-align的基友關(guān)系使其垂直居中，font-size: 0; 是為了消除近似居中的bug
#parent{
height: 150px;
line-height: 150px; /*行高的值與height相等*/
text-align: center;
font-size: 0; /*消除幽靈空白節(jié)點(diǎn)的bug*/
}
#son{
/*display: inline-block;*/ /*如果是塊級(jí)元素需改為行內(nèi)或行內(nèi)塊級(jí)才生效*/
vertical-align: middle;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：代碼簡(jiǎn)單；兼容性好（ie8+）
缺點(diǎn)：只對(duì)行內(nèi)內(nèi)容有效；需要添加font-size: 0; 才可以完全的垂直居中；不過需要注意html中#parent包裹#son之間需要有換行或空格；熟悉line-height和vertical-align的基友關(guān)系較難
原理：CSS Table，使表格內(nèi)容垂直對(duì)齊方式為middle,然后根據(jù)是行內(nèi)內(nèi)容還是塊級(jí)內(nèi)容采取不同的方式達(dá)到水平居中
#parent{
height: 150px;
width: 200px;
display: table-cell;
vertical-align: middle;
/*text-align: center;*/ /*如果是行內(nèi)元素就添加這個(gè)*/
}
#son{
/*margin: 0 auto;*/ /*如果是塊級(jí)元素就添加這個(gè)*/
width: 100px;
height: 50px;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；適用于寬度高度未知情況；兼容性好（ie8+）
缺點(diǎn)：設(shè)置tabl-cell的元素，寬度和高度的值設(shè)置百分比無效，需要給它的父元素設(shè)置display: table; 才生效；table-cell不感知margin，在父元素上設(shè)置table-row等屬性，也會(huì)使其不感知height；設(shè)置float或position會(huì)對(duì)默認(rèn)布局造成破壞，可以考慮為之增加一個(gè)父p定義float等屬性；內(nèi)容溢出時(shí)會(huì)自動(dòng)撐開父元素
原理：button的默認(rèn)樣式，再把需要居中的元素表現(xiàn)形式改為行內(nèi)或行內(nèi)塊級(jí)就好
button#parent{ /*改掉button默認(rèn)樣式就好了,不需要居中處理*/
height: 150px;
width: 200px;
outline: none;
border: none;
}
#son{
display: inline-block; /*button自帶text-align: center,改為行內(nèi)水平居中生效*/
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單方便，充分利用默認(rèn)樣式
缺點(diǎn)：只適用于行內(nèi)內(nèi)容；需要清除部分默認(rèn)樣式；水平垂直居中兼容性很好，但是ie下點(diǎn)擊會(huì)有凹陷效果！
原理：子絕父相，top、right、bottom、left的值是相對(duì)于父元素尺寸的，然后margin或者transform是相對(duì)于自身尺寸的，組合使用達(dá)到幾何上的水平垂直居中
#parent{
position: relative;
}
#son{
position: absolute;
top: 50%;
left: 50%;
/*定寬高時(shí)等同于margin-left:負(fù)自身寬度一半;margin-top:負(fù)自身高度一半;*/
transform: translate(-50%,-50%);
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：使用margin兼容性好；不管是塊級(jí)還是行內(nèi)元素都可以實(shí)現(xiàn)
缺點(diǎn)：代碼較多；脫離文檔流；使用margin需要知道寬高；使用transform兼容性不好（ie9+）
原理：當(dāng)top、bottom為0時(shí),margin-top&bottom設(shè)置auto的話會(huì)無限延伸占滿空間并且平分；當(dāng)left、right為0時(shí),margin-left&right設(shè)置auto的話會(huì)無限延伸占滿空間并且平分
#parent{
position: relative;
}
#son{
position: absolute;
margin: auto;
width: 100px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：無需關(guān)注寬高；兼容性較好(ie8+)
缺點(diǎn)：代碼較多；脫離文檔流
原理：flex設(shè)置對(duì)齊方式罷了，請(qǐng)查閱文末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;
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單靈活；功能強(qiáng)大
缺點(diǎn)：PC端兼容性不好，移動(dòng)端（Android4.0+）
原理：vh為視口單位，視口即文檔可視的部分，50vh就是視口高度的50/100，設(shè)置50vh上邊距再
#son{
/*0如果去掉，則會(huì)多出滾動(dòng)條并且上下都是50vh的margin。如果去掉就給body加上overflow:hidden;*/
margin: 50vh auto 0;
transform: translateY(-50%);
}優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：簡(jiǎn)單；容易理解；兩句代碼達(dá)到屏幕水平垂直居中
缺點(diǎn)：兼容性不好（ie9+，Android4.4+）
一般情況下，水平垂直居中，我們最常用的就是絕對(duì)定位加負(fù)邊距了，缺點(diǎn)就是需要知道寬高，使用transform倒是可以不需要，但是兼容性不好（ie9+）；
其次就是絕對(duì)居中，絕對(duì)定位設(shè)置top、left、right、bottom為0，然后margin:auto; 讓瀏覽器自動(dòng)平分邊距以達(dá)到水平垂直居中的目的；
如果是行內(nèi)/行內(nèi)塊級(jí)/圖片這些內(nèi)容，可以優(yōu)先考慮line-height和vertical-align 結(jié)合使用，不要忘了還有text-align ，這個(gè)方法代碼其實(shí)不多，就是理解原理有點(diǎn)困難，想要熟練應(yīng)對(duì)各種情況還需好好研究；
移動(dòng)端兼容性允許的情況下能用flex就用flex。
效果:
html代碼:
<body> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </body>
css代碼:
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
margin-left: 100px; /*大于等于#left的寬度*/
}html代碼:
<body> <p id="left">左列定寬</p> <p id="right-fix"> <p id="right">右列自適應(yīng)</p> </p> </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;
}html代碼:
<body> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </body>
css代碼:
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
overflow: hidden; /*觸發(fā)bfc達(dá)到自適應(yīng)*/
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用bfc達(dá)到自適應(yīng)效果
缺點(diǎn)：浮動(dòng)脫離文檔流，需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷；不支持ie6
html代碼:
<p id="parent"> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </p>
css代碼:
#parent{
width: 100%;
display: table;
height: 500px;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
background-color: #0f0;
}
#left,#right{
display: table-cell; /*利用單元格自動(dòng)分配寬度*/
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用單元格自動(dòng)分配達(dá)到自適應(yīng)效果
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不支持ie8-
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </p> </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;
}html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent{
width: 100%;
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
flex: 1; /*均分了父元素剩余空間*/
background-color: #0f0;
}html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*設(shè)定2列就ok了,auto換成1fr也行*/
}
#left {
background-color: #f00;
}
#right {
background-color: #0f0;
}效果:
html代碼:
<body> <p id="parent"> <p id="left">左列自適應(yīng)</p> <p id="right">右列定寬</p> </p> </body>
css代碼:
#parent{
height: 500px;
padding-left: 100px; /*抵消#left的margin-left以達(dá)到#parent水平居中*/
}
#left {
width: 100%;
height: 500px;
float: left;
margin-left: -100px; /*正值等于#right的寬度*/
background-color: #f00;
}
#right {
height: 500px;
width: 100px;
float: right;
background-color: #0f0;
}html代碼:
<body> <p id="parent"> <p id="right">右列定寬</p> <p id="left">左列自適應(yīng)</p> <!--順序要換一下--> </p> </body>
css代碼:
#left {
overflow: hidden; /*觸發(fā)bfc*/
height: 500px;
background-color: #f00;
}
#right {
margin-left: 10px; /*margin需要定義在#right中*/
float: right;
width: 100px;
height: 500px;
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用bfc達(dá)到自適應(yīng)效果
缺點(diǎn)：浮動(dòng)脫離文檔流，需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷；不支持ie6
html代碼:
<body> <p id="parent"> <p id="left">左列自適應(yīng)</p> <p id="right">右列定寬</p> </p> </body>
css代碼:
#parent{
width: 100%;
height: 500px;
display: table;
}
#left {
background-color: #f00;
display: table-cell;
}
#right {
width: 100px;
background-color: #0f0;
display: table-cell;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用單元格自動(dòng)分配達(dá)到自適應(yīng)效果
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不支持ie8-
html代碼:
<body> <p id="parent"> <p id="left">左列自適應(yīng)</p> <p id="right">右列定寬</p> </p> </body>
css代碼:
#parent{
position: relative; /*子絕父相*/
}
#left {
position: absolute;
top: 0;
left: 0;
right: 100px; /*大于等于#rigth的寬度*/
background-color: #f00;
height: 500px;
}
#right {
position: absolute;
top: 0;
right: 0;
background-color: #0f0;
width: 100px;
height: 500px;
}html代碼:
<body> <p id="parent"> <p id="left">左列自適應(yīng)</p> <p id="right">右列定寬</p> </p> </body>
css代碼:
#parent{
height: 500px;
display: flex;
}
#left {
flex: 1;
background-color: #f00;
}
#right {
width: 100px;
background-color: #0f0;
}html代碼:
<body> <p id="parent"> <p id="left">左列自適應(yīng)</p> <p id="right">右列定寬</p> </p> </body>
css代碼:
#parent {
height: 500px;
display: grid;
grid-template-columns: auto 100px; /*設(shè)定2列,auto換成1fr也行*/
}
#left {
background-color: #f00;
}
#right {
background-color: #0f0;
}(盒子寬度隨著內(nèi)容增加或減少發(fā)生變化,另一個(gè)盒子自適應(yīng))
效果圖:
變化后:
html代碼:
<body> <p id="parent"> <p id="left">左列不定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#left {
margin-right: 10px;
float: left; /*只設(shè)置浮動(dòng),不設(shè)寬度*/
height: 500px;
background-color: #f00;
}
#right {
overflow: hidden; /*觸發(fā)bfc*/
height: 500px;
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注寬度，利用bfc達(dá)到自適應(yīng)效果
缺點(diǎn)：浮動(dòng)脫離文檔流，需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷；不支持ie6
html代碼:
<body> <p id="parent"> <p id="left">左列不定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent{
display: flex;
}
#left { /*不設(shè)寬度*/
margin-right: 10px;
height: 500px;
background-color: #f00;
}
#right {
height: 500px;
background-color: #0f0;
flex: 1; /*均分#parent剩余的部分*/
}html代碼:
<body> <p id="parent"> <p id="left">左列不定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent{
display: grid;
grid-template-columns: auto 1fr; /*auto和1fr換一下順序就是左列自適應(yīng),右列不定寬了*/
}
#left {
margin-right: 10px;
height: 500px;
background-color: #f00;
}
#right {
height: 500px;
background-color: #0f0;
}左列自適應(yīng),右列不定寬同理(參考4.1和4.3對(duì)應(yīng)代碼示例)
效果圖:
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent{
min-width: 310px; /*100+10+200,防止寬度不夠,子元素?fù)Q行*/
}
#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;
}html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent{
min-width: 320px; /*100+10+200+20,防止寬度不夠,子元素?fù)Q行*/
}
#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)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用bfc達(dá)到自適應(yīng)效果
缺點(diǎn)：浮動(dòng)脫離文檔流，需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷；不支持ie6
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent {
width: 100%;
height: 520px; /*抵消上下間距10*2的高度影響*/
margin: -10px 0; /*抵消上下邊間距10的位置影響*/
display: table;
/*左右兩邊間距大了一點(diǎn),子元素改用padding設(shè)置盒子間距就沒有這個(gè)問題*/
border-spacing: 10px; /*關(guān)鍵!!!設(shè)置間距*/
}
#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)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無需關(guān)注定寬的寬度，利用單元格自動(dòng)分配達(dá)到自適應(yīng)效果
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不支持ie8-
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間定寬</p> <p id="right">右列自適應(yīng)</p> </p> </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剩余的部分達(dá)到自適應(yīng)*/
background-color: #0f0;
}html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間定寬</p> <p id="right">右列自適應(yīng)</p> </p> </body>
css代碼:
#parent {
height: 500px;
display: grid;
grid-template-columns: 100px 200px auto; /*設(shè)置3列,固定第一第二列的寬度,第三列auto或者1fr*/
}
#left {
margin-right: 10px; /*間距*/
background-color: #f00;
}
#center {
margin-right: 10px; /*間距*/
background-color: #eeff2b;
}
#right {
background-color: #0f0;
}效果圖:
html代碼:
<body> <p id="header"></p> <!--中間欄需要放在前面--> <p id="parent"> <p id="center"> <p id="center_inbox">中間自適應(yīng)</p> <hr> <!--方便觀察原理--> </p> <p id="left">左列定寬</p> <p id="right">右列定寬</p> </p> <p id="footer"></p> </body>
css代碼:
#header {
height: 60px;
background-color: #ccc;
}
#left {
float: left;
width: 100px;
height: 500px;
margin-left: -100%; /*調(diào)整#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; /*關(guān)鍵!!!左右邊界等于左右盒子的寬度,多出來的為盒子間隔*/
}
#right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px; /*使right到指定的位置,值等于自身寬度*/
background-color: #0f0;
opacity: 0.5;
}
#footer {
clear: both; /*注意清除浮動(dòng)!!*/
height: 60px;
background-color: #ccc;
}效果圖:
html代碼:
<body> <p id="header"></p> <p id="parent"> <!--#center需要放在前面--> <p id="center">中間自適應(yīng) <hr> </p> <p id="left">左列定寬</p> <p id="right">右列定寬</p> </p> <p id="footer"></p> </body>
css代碼:
#header{
height: 60px;
background-color: #ccc;
}
#parent {
box-sizing: border-box;
height: 500px;
padding: 0 215px 0 115px; /*為了使#center擺正,左右padding分別等于左右盒子的寬,可以結(jié)合左右盒子相對(duì)定位的left調(diào)整間距*/
}
#left {
margin-left: -100%; /*使#left上去一行*/
position: relative;
left: -115px; /*相對(duì)定位調(diào)整#left的位置,正值大于或等于自身寬度*/
float: left;
width: 100px;
height: 500px;
background-color: #f00;
opacity: 0.5;
}
#center {
float: left;
width: 100%; /*由于#parent的padding,達(dá)到自適應(yīng)的目的*/
height: 500px;
box-sizing: border-box;
border: 1px solid #000;
background-color: #eeff2b;
}
#right {
position: relative;
left: 215px; /*相對(duì)定位調(diào)整#right的位置,大于或等于自身寬度*/
width: 200px;
height: 500px;
margin-left: -200px; /*使#right上去一行*/
float: left;
background-color: #0f0;
opacity: 0.5;
}
#footer{
height: 60px;
background-color: #ccc;
}效果圖:
html代碼:
<body> <p id="parent"> <p id="header"></p> <!--#center需要放在前面--> <p id="center">中間自適應(yīng) <hr> </p> <p id="left">左列定寬</p> <p id="right">右列定寬</p> <p id="footer"></p> </p> </body>
css代碼:
#parent {
height: 500px;
display: grid;
grid-template-columns: 100px auto 200px; /*設(shè)定3列*/
grid-template-rows: 60px auto 60px; /*設(shè)定3行*/
/*設(shè)置網(wǎng)格區(qū)域分布*/
grid-template-areas:
"header header header"
"leftside main rightside"
"footer footer footer";
}
#header {
grid-area: header; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
background-color: #ccc;
}
#left {
grid-area: leftside;
background-color: #f00;
opacity: 0.5;
}
#center {
grid-area: main; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
margin: 0 15px; /*設(shè)置間隔*/
border: 1px solid #000;
background-color: #eeff2b;
}
#right {
grid-area: rightside; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
background-color: #0f0;
opacity: 0.5;
}
#footer {
grid-area: footer; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
background-color: #ccc;
}效果圖:
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間自適應(yīng)</p> <p id="right">右列定寬</p> </p> </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)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，容易理解；
缺點(diǎn)：margin失效，采用border-spacing表格兩邊的間隔無法消除；不支持ie8-
html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間自適應(yīng)</p> <p id="right">右列定寬</p> </p> </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;
}html代碼:
<body> <p id="parent"> <p id="left">左列定寬</p> <p id="center">中間自適應(yīng)</p> <p id="right">右列定寬</p> </p> </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)缺點(diǎn)：
優(yōu)點(diǎn)：容易理解，兼容性比較好
缺點(diǎn)：需手動(dòng)計(jì)算寬度確定邊距；脫離文檔流；代碼繁多
效果圖:
html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
margin-left: -20px; /*使整體內(nèi)容看起來居中,抵消padding-left的影響*/
}
.column{
padding-left: 20px; /*盒子的邊距*/
width: 25%;
float: left;
box-sizing: border-box;
border: 1px solid #000;
background-clip: content-box; /*背景色從內(nèi)容開始繪制,方便觀察*/
height: 500px;
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解；兼容性較好
缺點(diǎn)：需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷
效果圖:
html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
height: 540px; /*抵消上下邊20*2間距的高度影響*/
display: table;
margin: -20px 0; /*抵消上下邊20*2間距的位置影響*/
/*兩邊離頁(yè)面間距較大,改用子元素設(shè)置padding來當(dāng)成間隔就不會(huì)有這樣的問題*/
border-spacing: 20px; /*設(shè)置間距*/
}
.column{
display: table-cell;
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解；無需關(guān)注寬度，單元格自動(dòng)等分
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不支持ie8-
效果圖:
html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
margin-left: -15px; /*使內(nèi)容看起來居中*/
height: 500px;
display: flex;
}
.column{
flex: 1; /*一起平分#parent*/
margin-left: 15px; /*設(shè)置間距*/
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}效果圖:
html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
height: 500px;
}
.column{
float: left; /*添加浮動(dòng)*/
width: 16.66666666666667%; /*100÷列數(shù),得出百分比*/
height: 500px;
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解；兼容性較好
缺點(diǎn)：需要手動(dòng)清除浮動(dòng)，否則會(huì)產(chǎn)生高度塌陷
html代碼
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
width: 100%;
height: 500px;
display: table;
}
.column{
display: table-cell; /*無需關(guān)注列數(shù),單元格自動(dòng)平分*/
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解；無需關(guān)注寬度。單元格自動(dòng)等分
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不兼容ie8-
html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </body>
css代碼:
#parent {
height: 500px;
display: flex;
}
.column{
flex: 1; /*無需關(guān)注列數(shù),一起平分#parent*/
}
.column:nth-child(odd){
background-color: #f00;
}
.column:nth-child(even){
background-color: #0f0;
}html代碼:
<body> <p id="parent"> <p class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> <p class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></p> </p> </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;
}效果圖:
html代碼:
<body> <p id="parent"> <p class="row"> <p class="item">1</p> <p class="item">2</p> <p class="item">3</p> </p> <p class="row"> <p class="item">4</p> <p class="item">5</p> <p class="item">6</p> </p> <p class="row"> <p class="item">7</p> <p class="item">8</p> <p class="item">9</p> </p> </p> </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)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，容易理解；
缺點(diǎn)：margin失效，采用border-spacing表格兩邊的間隔無法消除；不支持ie8-
html代碼:
<body> <p id="parent"> <p class="row"> <p class="item">1</p> <p class="item">2</p> <p class="item">3</p> </p> <p class="row"> <p class="item">4</p> <p class="item">5</p> <p class="item">6</p> </p> <p class="row"> <p class="item">7</p> <p class="item">8</p> <p class="item">9</p> </p> </p> </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;
}CSS Grid非常強(qiáng)大,可以實(shí)現(xiàn)各種各樣的三維布局,可查閱本文結(jié)尾的閱讀推薦
html代碼:
<body> <p id="parent"> <p class="item">1</p> <p class="item">2</p> <p class="item">3</p> <p class="item">4</p> <p class="item">5</p> <p class="item">6</p> <p class="item">7</p> <p class="item">8</p> <p class="item">9</p> </p> </body>
css代碼:
#parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此為重復(fù)的合并寫法*/
grid-template-rows: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此為重復(fù)的合并寫法*/
}
.item {
border: 1px solid #000;
}優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，容易理解；提高頁(yè)面內(nèi)容的流動(dòng)性，能適應(yīng)多種設(shè)備；
/*生成柵格系統(tǒng)*/
@media screen and (max-width: 768px){
.generate-columns(12); /*此處設(shè)置生成列數(shù)*/
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-xs-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}
@media screen and (min-width: 768px){
.generate-columns(12); /*此處設(shè)置生成列數(shù)*/
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-sm-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}
p[class^="column-xs-"]{
float: left;
}
p[class^="column-sm-"]{
float: left;
}編譯后的CSS代碼:
@media screen and (max-width: 768px) {
.column-xs-1 { width: 8.33333333%; }
.column-xs-2 { width: 16.66666667%; }
.column-xs-3 { width: 25%; }
.column-xs-4 { width: 33.33333333%; }
.column-xs-5 { width: 41.66666667%; }
.column-xs-6 { width: 50%; }
.column-xs-7 { width: 58.33333333%; }
.column-xs-8 { width: 66.66666667%; }
.column-xs-9 { width: 75%; }
.column-xs-10 { width: 83.33333333%; }
.column-xs-11 { width: 91.66666667%; }
.column-xs-12 { width: 100%; }
}
@media screen and (min-width: 768px) {
.column-sm-1 { width: 8.33333333%; }
.column-sm-2 { width: 16.66666667%; }
.column-sm-3 { width: 25%; }
.column-sm-4 { width: 33.33333333%; }
.column-sm-5 { width: 41.66666667%; }
.column-sm-6 { width: 50%; }
.column-sm-7 { width: 58.33333333%; }
.column-sm-8 { width: 66.66666667%; }
.column-sm-9 { width: 75%; }
.column-sm-10 { width: 83.33333333%; }
.column-sm-11 { width: 91.66666667%; }
.column-sm-12 { width: 100%; }
}
p[class^="column-xs-"]{
float: left;
}
p[class^="column-sm-"]{
float: left;
}效果圖:
html代碼:
<body> <p id="parent"> <p id="top">top</p> <p id="left">left</p> <p id="right">right</p> <p id="bottom">bottom</p> </p> </body>
css代碼:
html, body, #parent {height: 100%;overflow: hidden;}
#parent > p {
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)缺點(diǎn)：
優(yōu)點(diǎn)：容易理解
缺點(diǎn)：代碼繁多；需要計(jì)算好各個(gè)盒子的寬高；
html代碼:
<body> <p id="parent"> <p id="top">top</p> <p id="middle"> <p id="left">left</p> <p id="right">right</p> </p> <p id="bottom">bottom</p> </p> </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;
}html代碼:
<body> <p id="parent"> <p id="top">top</p> <p id="left">left</p> <p id="right">right</p> <p id="bottom">bottom</p> </p> </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為自適應(yīng),此處換成1fr也行,第3行高度為50px*/
grid-template-rows: 100px auto 50px;
/*定義網(wǎng)格區(qū)域分布*/
grid-template-areas:
"header header"
"aside main"
"footer footer";
}
#parent>p{
border: 1px solid #000;
}
#top{
grid-area: header; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
}
#left{
grid-area: aside; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
}
#right{
grid-area: main; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
}
#bottom{
grid-area: footer; /*指定在哪個(gè)網(wǎng)格區(qū)域*/
}由于方法眾多,分析的時(shí)候想到哪種用哪種了，只要IE9和谷歌上表現(xiàn)一致，我就不一一測(cè)試其他瀏覽器了，如果有什么問題或意見，請(qǐng)留言！
https://www.mi.com/
整個(gè)頁(yè)面我們可以分成頂、上、中、下、底五個(gè)結(jié)構(gòu),如圖所示:
html代碼:
<body> <p class="header"></p> <p class="top"></p> <p class="center"></p> <p class="bottom"></p> <p class="footer"></p> </body>
css代碼:
*{ /*為了方便,就這樣清空默認(rèn)樣式了*/
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body{
background-color: #f5f5f5;
}
.header{
margin-bottom: 20px;
height: 40px;
background-color: #333;
}
.top{
height: 1210px;
background-color: #fff;
}
.center{
width: 1226px;
margin: 0 auto;
margin-bottom: 60px;
height: 1791px;
background-color: #fff;
}
.bottom{
height: 274px;
background-color: #fff;
}
.footer{
margin: 0 auto;
width: 1226px;
height: 166px;
border: 1px solid #000;
}header部分首先是一個(gè)水平居中的內(nèi)容，內(nèi)容盒子可以分成左右兩個(gè)部分，如圖所示：
html代碼：
<p class="header"> <p class="container"> <p class="header-left"></p> <p class="header-rigth"></p> </p> </p>
css代碼：
.container{ /*后面會(huì)繼續(xù)用到*/
width: 1226px;
height: 100%;
margin: 0 auto;
border: 1px solid #f00;
}
.header-left{
width: 380px;
height: 100%;
float: left;
background-color: #0f0;
}
.header-rigth{
width: 260px;
height: 100%;
float: right;
background-color: #0f0;
}top部分先有一個(gè)水平居中的內(nèi)容，再就是內(nèi)容由上到下可以分成四個(gè)部分，然后每個(gè)部分再細(xì)分......說不下去了，直接上圖：
html代碼：
<p class="top"> <p class="container"> <p class="top-nav"></p> <p class="top-slider"> <p class="slider-navbar"></p> </p> <p class="top-recommend"> <p class="recommend-left"></p> <p class="recommend-right"> <ul> <li></li> <li></li> <li></li> </ul> </p> </p> <p class="top-flashsale"> <p class="flashsale-title"></p> <p class="flashsale-content"> <p class="content-timer"></p> <ul class="content-shops"> <li></li> <li></li> <li></li> <li></li> </ul> </p> </p> </p> </p>
css代碼：
.top {
height: 1210px;
background-color: #fff;
}
.top-nav {
height: 100px;
background-color: #f00;
}
.top-slider {
margin-bottom: 14px;
position: relative;
height: 460px;
background-color: #00f;
}
.slider-navbar {
position: absolute;
top: 0;
left: 0;
width: 234px;
height: 100%;
background-color: black;
opacity: .5;
}
.top-recommend {
margin-bottom: 26px;
height: 170px;
background-color: #0f0;
}
.recommend-left {
float: left;
height: 100%;
width: 234px;
background-color: skyblue;
}
.recommend-right {
float: right;
width: 978px;
height: 100%;
border: 1px solid #000;
}
.recommend-right > ul {
height: 100%;
}
.recommend-right > ul li {
float: left;
width: 316px;
height: 100%;
background-color: deepsky
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
