前言
DIV+CSS布局是前端最為基礎(chǔ)的知識(shí)，而現(xiàn)在網(wǎng)絡(luò)上最為普遍的有一列，兩列，三列，窗格式布局以及自適應(yīng)布局等等。
在我們熟悉了html布局之后，經(jīng)常會(huì)選用能夠滿足當(dāng)前自己需求的排版布局或習(xí)慣性選用自己常用的布局方式，有時(shí)候我發(fā)現(xiàn)能滿足我某個(gè)時(shí)刻需求的網(wǎng)頁(yè)布局往往是我習(xí)慣常用的，但不一定是更好更適合的布局，所以我就想回到最初，把最基礎(chǔ)的頁(yè)面布局總結(jié)一下，可以供入門的新手了解一下，我認(rèn)為多對(duì)一些基礎(chǔ)知識(shí)點(diǎn)多總結(jié)多了解沒(méi)有壞處。
1.固定寬度布局
-
一列水平居中布局
一列的寬度固定為已知值，使用margin設(shè)置來(lái)達(dá)到水平居中效果。
html代碼：
<!DOCTYPE html>
<html>
<head>
<title>一列水平居中布局</title>
<meta charset="utf-8">
</head>
<body>
<div class="one-center-col">一列布局</div>
</body>
</html>
css代碼：
<style>
.one-center-col {
width: 1000px;
height: 700px;
background-color: grey;
margin: 0 auto;
}
</style>
效果截圖：
其中對(duì)于寬度固定的元素，只需要設(shè)置該元素的css樣式(margin:0 auto;)就可以實(shí)現(xiàn)讓該元素在其父元素的寬度下水平居中對(duì)齊顯示。
-
兩列布局（浮動(dòng)）
網(wǎng)頁(yè)布局常見(jiàn)左右兩列布局，如果已知左右兩列的寬度是固定值，則可以使用float浮動(dòng)方式完成基本布局排版。
html代碼：
<div class="container">
<div class="leftbox">左側(cè)列</div>
<div class="rightbox">右側(cè)列</div>
</div>
左右列的css代碼：
.leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
float: left;
}
.rightbox {
width: 700px;
height: 100%;
background-color: #f08844;
float: right;
}
效果截圖
兩列布局，當(dāng)已知列的寬度時(shí)，可以使用浮動(dòng)屬性來(lái)達(dá)到左右布局的效果，僅需設(shè)置float:left和float:right就可以輕松達(dá)到頁(yè)面布局效果。
-
三列布局
三列水平布局，如果列的寬度都是固定的，實(shí)現(xiàn)方式與上面兩列布局相似，使用浮動(dòng)即可達(dá)到效果。
html代碼：
<div class="container">
<div class="leftbox">左側(cè)列</div>
<div class="midbox">中間列</div>
<div class="rightbox">右側(cè)列</div>
</div>
css部分代碼：
.leftbox {
width: 300px;
float: left;
}
.midbox {
width: 400px;
float: left;
}
.rightbox {
width: 300px;
float: right;
}
效果示意圖
leftbox和midbox設(shè)置左浮動(dòng)，rightbox設(shè)置右浮動(dòng)。但關(guān)鍵的是，三個(gè)子元素的總寬度不能大于或者等于父元素的寬度。
2. 自適應(yīng)寬度布局
兩列布局（實(shí)現(xiàn)效果：兩列自適應(yīng)寬度）
思路：實(shí)現(xiàn)自適應(yīng)兩列布局，可以繼續(xù)使用浮動(dòng)方式來(lái)布局，但在設(shè)置浮動(dòng)元素的寬度時(shí)，不再使用固定值，而要使用百分比，從而實(shí)現(xiàn)寬度的自適應(yīng)。-
兩列布局（實(shí)現(xiàn)效果：左側(cè)為固定寬度，右側(cè)自適應(yīng)）
1）使用浮動(dòng)來(lái)進(jìn)行自適應(yīng)布局：
.leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
float: left;
}
.rightbox {
height: 100%;
margin-left: 300px;
background-color: #f08844;
}
基本思路分析：
- 左側(cè)設(shè)置固定寬度并設(shè)置浮動(dòng)float:left;
- 右側(cè)不設(shè)置寬度，只設(shè)置左側(cè)邊距為左側(cè)欄的寬度加上左側(cè)與右側(cè)的間距margin-left。
2）使用定位來(lái)進(jìn)行布局：
.container {
width: 1000px;
height: 700px;
margin: 0 auto;
position: relative;
}
.leftbox {
width: 300px; /*左側(cè)固定寬度值*/
height: 100%;
position: absolute;
}
.rightbox {
height: 100%;
margin-left: 300px; /*邊距值=左側(cè)固定寬度值*/
position: relative;
}
基本思路分析：
- 父元素設(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)來(lái)布局
核心思想：中間列自適應(yīng)。
.leftbox {
width: 300px;
height: 100%;
background-color: #aadddd;
float: left;
}
.midbox {
margin: 0 300px;
height: 100%;
background-color: #aa11dd;
}
.rightbox {
width: 300px;
height: 100%;
background-color: #f08844;
float: right;
}
基本思路分析：
1.左側(cè)以及右側(cè)設(shè)置固定寬度，并且分別設(shè)置左右浮動(dòng)。
2.中間欄設(shè)置左右邊距，邊距值剛好分別等于左右側(cè)欄的寬度。
2）使用定位來(lái)布局
.container {
width: 1000px;
height: 700px;
margin: 0 auto;
position: relative;
}
.leftbox {
width: 300px;
height: 100%;
position: absolute;
left: 0;
}
.midbox {
margin: 0 300px;
height: 100%;
position: relative;
}
.rightbox {
width: 300px;
height: 100%;
position: absolute;
right: 0;
}
思路分析：
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)。
截圖展示：
以上為我自己簡(jiǎn)單總結(jié)歸納的一些最基礎(chǔ)的div+css布局的考慮實(shí)現(xiàn)方式，希望能夠?qū)δ承﹦偨佑|前端的新手在基礎(chǔ)布局的實(shí)現(xiàn)上提供一點(diǎn)點(diǎn)幫助。
