溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
CSS基礎(chǔ)之幾種常見的頁面布局
本人前端菜鳥一枚，在學(xué)習(xí) CSS 過程中發(fā)現(xiàn)網(wǎng)上流傳的教程參差不齊，要么內(nèi)容不夠詳細(xì)，要么方法就是錯的，按照它給出的方法不能實(shí)現(xiàn)我想要的目的。于是自己決定寫一篇經(jīng)驗(yàn)。如有錯誤的地方，希望各位大神能夠指出。話不多說，以下開始正文。
第一部分 兩列式頁面布局
兩列式的頁面布局結(jié)構(gòu)是頁面中最常用的也是最簡單的結(jié)構(gòu)，尤其是在產(chǎn)品展示及新聞內(nèi)容頁面最為常見。如下圖所示，51cto的新聞內(nèi)的頁面就是一個典型的兩列式布局。
該布局方式在內(nèi)容上分為主要內(nèi)容區(qū)域和側(cè)邊欄。一般情況下該布局的兩列寬度具有一定的固定值，不同的是主要內(nèi)容區(qū)域及側(cè)邊欄的位置。為更好的理解兩列的頁面布局結(jié)構(gòu)，將其簡化為下圖（上圖中的尾部區(qū)域沒有截圖）。
由上面的示意圖可知，一個頁面主要分為上、中、下三個部分。根據(jù)示意圖可以將頁面結(jié)構(gòu)以如下形式編寫代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兩列式頁面布局</title> </head> <body> <div id="header">頭部信息</div> <div id="container"> <div class="mainBox">主要內(nèi)容區(qū)域</div> <div class="sideBox">側(cè)邊欄</div> </div> <div id="footer">底部信息</div> </body> </html>
有了以上HTML骨架，接下來就用CSS來實(shí)現(xiàn)我們想要的樣式。
一、兩列定寬布局
兩列定寬布局主要是指將mainBox及sideBox這兩個div標(biāo)簽的寬度值固定，再將其控制在頁面內(nèi)容區(qū)域中的左右兩側(cè)。
例如，將mainBox的寬度設(shè)為750px，高度設(shè)為900px；sideBox的寬度設(shè)為200px，高度設(shè)為600px；將其父元素id名為container的容器樣式設(shè)為高度900px，寬度960px，上下外邊距為10px。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 100px;
background: #ccc;
}
#container{
width: 960px;
height: 900px;
margin: 10px auto;/**左右設(shè)為auto，是為了讓container在頁面內(nèi)居中**/
}
.mainBox{
float: left;
width: 750px;
height: 900px;
color: #000;
background: #faf;
}
.sideBox{
float: right;
width: 200px;
height: 600px;
color: #000;
background: #3f0;
}
#container:after{ /**清除浮動**/
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>效果圖如下
注意事項(xiàng)：
1、關(guān)于清除浮動的方法，請看這里。
2、為了能夠?qū)崿F(xiàn)自適應(yīng)高度的效果，需將樣式中內(nèi)容區(qū)域的高度刪除，這樣隨意在HTML代碼的mainBox容器中或者sideBox容器中添加內(nèi)容，都不會有文字溢出容器的現(xiàn)象。
3、兩列定寬的布局方式要求兩列的盒模型寬度相加不能大于父級元素的寬度，否則將會導(dǎo)致頁面內(nèi)的錯位現(xiàn)象。例如：如果上邊代碼中.mainBox 和 .sideBox 的寬度之和大于 #container 的寬度，.mainBox 和 .sideBox 將不會并列顯示。
二、兩列自適應(yīng)布局
兩列自適應(yīng)布局方式其實(shí)就是將寬度屬性以百分比的形式計(jì)算，但該寬度并不是盒模型的總寬度，而是盒模型的內(nèi)容區(qū)域的寬度。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 100px;
background: #ccc;
}
#container{
margin: 10px auto;/**左右設(shè)為auto，是為了讓container在頁面內(nèi)居中**/
}
.mainBox{
float: left;
width: 70%;
height: 900px;
color: #000;
background: #faf;
}
.sideBox{
float: right;
width: 29%;
height: 600px;
color: #000;
background: #3f0;
}
#container:after{ /**清除浮動**/
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>這樣mainBox和sideBox容器的高度就會隨著里面內(nèi)容的多少而改變。效果圖就不貼出來了，有興趣的同學(xué)可以自行拷貝代碼運(yùn)行一下。
三、單列定寬單列自適應(yīng)布局
根據(jù)上面的內(nèi)容，無論是兩列定寬的布局還是兩列自適應(yīng)的布局，兩列的盒模型總寬度相加不能大于父級元素的寬度或者大于100%，否則就會出現(xiàn)錯位的現(xiàn)象。那么試想一下，定寬的布局采用px為單位，而自適應(yīng)布局采用的是百分比或者默認(rèn)的auto，如何將這兩種不同的單位結(jié)合在一起，最終實(shí)現(xiàn)我們想要的單列定寬單列自適應(yīng)布局呢？
我們將自適應(yīng)布局中的CSS樣式稍微修改一下，保持mainBox的寬度屬性值為70%，修改sideBox的寬度屬性值為450px。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #ccc;
}
#container{
background: #ccc;
margin: 10px auto;/**左右設(shè)為auto，是為了讓container在頁面內(nèi)居中**/
}
.mainBox{
float: left;
width: 70%;
color: #000;
background: #faf;
}
.sideBox{
float: right;
width: 450px;
color: #000;
background: #3f0;
}
#container:after{ /**清除浮動**/
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>修改后的效果如下（為方便截圖我將各個div的高度都設(shè)置了一定的高度）
我們可以發(fā)現(xiàn) sideBox 掉了下來，不再與 mainBox 并列顯示了。原因是 container 寬度的30%小于450px（我的屏幕分辨率為1366*768），所以導(dǎo)致sideBox 被擠下來了。
解決這個問題比較好用的方法是利用“負(fù)邊距”來處理。對 mainBox 添加“負(fù)邊距” margin-right: 450px;,對 sideBox 添加“負(fù)邊距”margin-left: -450px;。
更改之后，我們發(fā)現(xiàn)上面出現(xiàn)的問題好像完美的解決了（此處就不再截圖了，有興趣的同學(xué)可以自己操作一下），但美中不足的是，當(dāng)視口的寬度小于 sideBox 的寬度時(shí)，即此處小于450px時(shí)，sideBox 同樣會掉下來，更小時(shí)sideBox 的前面部分還會被遮擋。這個問題在實(shí)際操作中根據(jù)情況來操作，例如設(shè)置頁面大小不小于 sideBox 的寬度， 或者使用媒體查詢的方式，實(shí)時(shí)地更改 sideBox 的寬度等等。
四、兩列等高布局
兩列等高布局的方法有很多種，每一種都有自己的優(yōu)點(diǎn)和缺點(diǎn)，不論哪一種方法，最終實(shí)現(xiàn)的效果都是相同的。
① 利用負(fù)邊距實(shí)現(xiàn)
在原來HTML結(jié)構(gòu)的基礎(chǔ)上，改變CSS樣式。代碼如下所示：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #ccc;
}
#container{
overflow: hidden;
background: #ccc;
margin: 10px auto;/**左右設(shè)為auto，是為了讓container在頁面內(nèi)居中**/
}
.mainBox{
float: left;
margin-right: 450px;
width: auto;
background: #faf;
}
.sideBox{
float: right;
width: 450px;
background: #3f0;
margin-left: -450px;
}
.mainBox,.sideBox{
color: #000;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
#container:after{ /**清除浮動**/
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>該方法的重點(diǎn)是設(shè)置了 mainBox 和 sideBox 的margin-bottom 和 padding-bottom 屬性， 以及父元素container 使用了overflow屬性。使用該方法有一個很大的弊端是如果mainBox 或者 sideBox 設(shè)置背景圖片的background-position 的值為bottom時(shí)，那么背景圖片很有可能會“消失”。除此之外還有很多其他的不足，因此不建議使用該方法。
②使用display：table-cell；
大家都知道在table中同一行列表中的元素高度都相同，因此我們可以借助display：table-cell；來實(shí)現(xiàn)等高布局。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #ccc;
}
#container{
display: table-row;
background: #ccc;
margin: 10px auto;
}
.mainBox{
display: table-cell;
width: 70%;
background: #faf;
color: #000;
}
.sideBox{
display: table-cell;
width: 30%;
background: #3f0;
color: #000;
}
</style>這種方法我認(rèn)為是最簡單也是最有效的。
③通過javascript
CSS代碼如下：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #ccc;
}
#container{
background: #ccc;
margin: 10px auto;/**左右設(shè)為auto，是為了讓container在頁面內(nèi)居中**/
}
.mainBox{
float: left;
width: 70%;
color: #000;
background: #faf;
}
.sideBox{
float: right;
width: 30%;
color: #000;
background: #3f0;
}
#container:after{ /**清除浮動**/
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>以下才是控制兩列等高的關(guān)鍵所在，
<script type="text/javascript">
var mainBox = document.getElementsByClassName("mainBox")[0];
var sideBox = document.getElementsByClassName("sideBox")[0];
if(mainBox.clientHeight < sideBox.clientHeight){
alert(mainBox.clientHeight);
mainBox.style.height = sideBox.clientHeight + "px";
}else {
sideBox.style.height = mainBox.clientHeight + "px";
}
</script>在HTML中嵌入以上代碼，即可實(shí)現(xiàn)我們想要的等高效果。運(yùn)行結(jié)果如下：
使用該方法有一個不足是當(dāng)瀏覽器窗口發(fā)生變化時(shí)，高度不能立即發(fā)生變化，這可以通過js來解決。
除此之外，還有其他一些方法，不過我覺得它們使用起來太過麻煩或者弊端太多，因此我就不再寫出來了。
第二部分 三列或多列布局
多列的情況一般比較少見，其中常見的也就三列比較多，門戶類型的網(wǎng)站中使用比較多。如騰訊網(wǎng)頁面就是一個典型的三列式布局。（尾部未截圖）
換個思維來看，我們會發(fā)現(xiàn)三列式布局可以看成是兩個兩列式布局組合而成的。因此我們只需以兩列式布局結(jié)構(gòu)的方式來對待三列式布局。
我們可以針對上圖所示的結(jié)構(gòu)以HTML代碼表示為：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列式布局</title> </head> <body> <div id="header">頭部信息</div> <div id="container"> <div class="wrap"> <div class="mainBox">主要內(nèi)容區(qū)域</div> <div class="subMainBox">次要內(nèi)容區(qū)域</div> </div> <div class="sideBox">側(cè)邊欄</div> </div> <div class="footer">底部信息</div> </body> </html>
一、兩列定寬中間自適應(yīng)布局
①按照第一部分單列定寬單列自適應(yīng)的方式
<style>
*{
margin: 0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 100px;
background: #ccc;
}
.wrap{
float: left;
width: auto;
margin-right: 200px;/**margin-right 的值要等于 sideBox 的寬度**/
}
.sideBox{
float: right;
width: 200px;
background: #3af;
margin-left: -200px;/**margin-left 的值要等于 sideBox 的寬度的負(fù)值**/
}
.subMainBox{
float: left;
width: 200px;
background: #33ff00;
margin-right: -200px;/**margin-right 的值要等于 subMainBox的寬度的負(fù)值**/
}
.mainBox{
float: right;
width: auto;
margin-left: 200px;/**margin-right 的值要等于 subMainBox 的寬度**/
background: #faf;
}
.wrap:after,#container:after{
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>運(yùn)行效果如下
有一個小問題是在chrome和IE下，當(dāng)窗口寬度過小時(shí)，會發(fā)生錯位的現(xiàn)象，因此我們需要設(shè)置頁面的最小距離。
②我認(rèn)為是比較簡單的方法
HTML結(jié)構(gòu)跟上面的不一樣，完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列式布局</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 5px 0;
}
#header,#footer{
width: 100%;
height: 100px;
background: #ccc;
}
.subMainBox{
float: left;
width: 200px;
background: #af3;
margin-right: -200px;
}
.mainBox{
float: left;
background: #3af;
width: auto;
margin-left: 200px;
margin-right: 200px;
}
.sideBox{
float: right;
width: 200px;
background: #ff3;
margin-left: -200px;
}
#container:after{
display: block;
visibility: hidden;
content: "";
clear: both;
}
</style>
</head>
<body>
<div id="header">頭部信息</div>
<div id="container">
<div class="subMainBox">次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)
域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域次要內(nèi)容區(qū)域
</div>
<div class="mainBox">主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主
要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域主要內(nèi)容區(qū)域<br>
</div>
<div class="sideBox">側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄
側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄側(cè)邊欄</div>
</div>
<div id="footer">底部信息</div>
</body>
</html>這種方法出現(xiàn)的問題跟上面的一樣，解決方法也同上。
二、三列自適應(yīng)布局和三列等高布局
實(shí)現(xiàn)方法跟兩列自適應(yīng)布局及一樣，這里就不寫出代碼了。
總結(jié)
至此，常見的幾種頁面布局已經(jīng)介紹完畢，工作中想要實(shí)現(xiàn)的其他布局基本都可以以此為基礎(chǔ)實(shí)現(xiàn)。俗話說：條條大路通羅馬。實(shí)現(xiàn)你想要效果的方法有很多，關(guān)鍵是要找到適合自己的方法，才能在工作中更加游刃有余。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼