1.固定寬度布局
一列水平居中布局
一列的寬度固定為已知值朦佩，使用margin設(shè)置來達(dá)到水平居中效果并思。
html代碼：
css代碼：
效果：
其中對(duì)于寬度固定的元素，只需要設(shè)置該元素的css樣式(margin:0 auto;)就可以實(shí)現(xiàn)讓該元素在其父元素的寬度下水平居中對(duì)齊顯示语稠。
兩列布局（浮動(dòng)）
網(wǎng)頁(yè)布局常見左右兩列布局宋彼，如果已知左右兩列的寬度是固定值，則可以使用float浮動(dòng)方式完成基本布局排版
html代碼：
css代碼：
效果：
兩列布局，當(dāng)已知列的寬度時(shí)输涕，可以使用浮動(dòng)屬性來達(dá)到左右布局的效果音婶，僅需設(shè)置float:left和float:right就可以輕松達(dá)到頁(yè)面布局效果。
注意：因?yàn)閒loat 會(huì)是元素脫離文檔流 子元素設(shè)置了左右浮動(dòng) 撐不開父元素 父元素失去高度 需要清除浮動(dòng) 寫個(gè)偽類 這種清除浮動(dòng)的方法最好占贫，因?yàn)閭卧夭徽紦?jù)空間桃熄。
三列布局
三列水平布局，如果列的寬度都是固定的型奥，實(shí)現(xiàn)方式與上面兩列布局相似瞳收，使用浮動(dòng)即可達(dá)到效果。
html代碼：
css部分代碼：
效果：
leftbox和midbox設(shè)置左浮動(dòng)厢汹，rightbox設(shè)置右浮動(dòng)螟深。但關(guān)鍵的是，三個(gè)子元素的總寬度不能大于或者等于父元素的寬度烫葬。
- 自適應(yīng)寬度布局
兩列布局（實(shí)現(xiàn)效果：兩列自適應(yīng)寬度）
思路：實(shí)現(xiàn)自適應(yīng)兩列布局界弧，可以繼續(xù)使用浮動(dòng)方式來布局，但在設(shè)置浮動(dòng)元素的寬度時(shí)搭综，不再使用固定值垢箕，而要使用百分比，從而實(shí)現(xiàn)寬度的自適應(yīng)兑巾。
兩列布局（實(shí)現(xiàn)效果：左側(cè)為固定寬度条获，右側(cè)自適應(yīng)）
1）使用浮動(dòng)來進(jìn)行自適應(yīng)布局：
html代碼
css代碼
效果
基本思路分析：
1.左側(cè)設(shè)置固定寬度并設(shè)置浮動(dòng)float:left;
2.右側(cè)不設(shè)置寬度，只設(shè)置左側(cè)邊距為左側(cè)欄的寬度加上左側(cè)與右側(cè)的間距margin-left蒋歌。
使用定位來進(jìn)行布局：
基本思路分析：
父元素設(shè)置為position:relative;
leftbox設(shè)置固定寬度帅掘，設(shè)定為絕對(duì)定位position:absolute。
rightbox設(shè)置為相對(duì)定位position:relative堂油。（使其遮蓋左側(cè)欄）
rightbox設(shè)置左邊距修档，邊距值margin-left剛好為左側(cè)欄的寬度。
效果：
三列布局：中間自適應(yīng)（實(shí)現(xiàn)效果：原理類似于兩列布局）
1）使用浮動(dòng)來布局
中間列自適應(yīng)府框。
基本思路分析：
1.左側(cè)以及右側(cè)設(shè)置固定寬度吱窝，并且分別設(shè)置左右浮動(dòng)。
2.中間欄設(shè)置左右邊距迫靖，邊距值剛好分別等于左右側(cè)欄的寬度癣诱。
使用定位來布局
思路分析：
1.父元素設(shè)置position:relative;
2.leftbox和rightbox設(shè)置position:absolute;并且設(shè)置左右側(cè)欄的寬度值。
3.midbox設(shè)置position:relative;
4.midbox設(shè)置左右margin值袜香，正好對(duì)應(yīng)左右側(cè)欄的寬度值
(margin=leftboxWidth/rightboxWidth)。
水平垂直居中
讓一個(gè)塊級(jí)元素水平居中 margin : 0 auto;
讓一個(gè)塊元素水平垂直居中
效果
除了可以使用margin-top把div往上偏移之外鲫惶，CSS3的transform屬性也可以實(shí)現(xiàn)這個(gè)功能蜈首，通過設(shè)置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
用flex設(shè)置元素水平垂直居中
