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