CSS中有哪些常見的布局

這篇文章將為大家詳細講解有關(guān)CSS中有哪些常見的布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　1、常見的單列布局：

　　header,content和footer等寬的單列布局

　　header與footer等寬,content略窄的單列布局

　　2、如何實現(xiàn)

　　對于第一種，先通過對header,content,footer統(tǒng)一設(shè)置width：1000px;或者max-width：1000px(這兩者的區(qū)別是當屏幕小于1000px時，前者會出現(xiàn)滾動條，后者則不會，顯示出實際寬度);然后設(shè)置margin:auto實現(xiàn)居中即可得到。

　　<pclass="header"></p>

　　<pclass="content"></p>

　　<pclass="footer"></p>

　　.header{

　　margin:0auto;

　　max-width:960px;

　　height:100px;

　　background-color:blue;

　　}

　　.content{

　　margin:0auto;

　　max-width:960px;

　　height:400px;

　　background-color:aquamarine;

　　}

　　.footer{

　　margin:0auto;

　　max-width:960px;

　　height:100px;

　　background-color:aqua;

　　}

　　對于第二種，header、footer的內(nèi)容寬度不設(shè)置，塊級元素充滿整個屏幕，但header、content和footer的內(nèi)容區(qū)設(shè)置同一個width，并通過margin:auto實現(xiàn)居中。

　　<pclass="header">

　　<pclass="nav"></p>

　　</p>

　　<pclass="content"></p>

　　<pclass="footer"></p>

　　.header{

　　margin:0auto;

　　max-width:960px;

　　height:100px;

　　background-color:blue;

　　}

　　.nav{

　　margin:0auto;

　　max-width:800px;

　　background-color:darkgray;

　　height:50px;

　　}

　　.content{

　　margin:0auto;

　　max-width:800px;

　　height:400px;

　　background-color:aquamarine;

　　}

　　.footer{

　　margin:0auto;

　　max-width:960px;

　　height:100px;

　　background-color:aqua;

　　}

　　二、兩列自適應(yīng)布局

　　兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式

　　1.float+overflow:hidden

　　如果是普通的兩列布局，浮動+普通元素的margin便可以實現(xiàn)，但如果是自適應(yīng)的兩列布局，利用float+overflow:hidden便可以實現(xiàn)，這種辦法主要通過overflow觸發(fā)BFC,而BFC不會重疊浮動元素。由于設(shè)置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器。具體代碼如下：

　　<pclass="parent"style="background-color:lightgrey;">

　　<pclass="left"style="background-color:lightblue;">

　　<p>left</p>

　　</p>

　　<pclass="right"style="background-color:lightgreen;">

　　<p>right</p>

　　<p>right</p>

　　</p>

　　</p>

　　.parent{

　　overflow:hidden;

　　zoom:1;

　　}

　　.left{

　　float:left;

　　margin-right:20px;

　　}

　　.right{

　　overflow:hidden;

　　zoom:1;

　　}

　　注意點:如果側(cè)邊欄在右邊時，注意渲染順序。即在HTML中，先寫側(cè)邊欄后寫主內(nèi)容

　　2.Flex布局

　　Flex布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。

　　//html部分同上

　　.parent{

　　display:flex;

　　}

　　.right{

　　margin-left:20px;

　　flex:1;

　　}

　　3.grid布局

　　Grid布局，是一個基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計。

　　//html部分同上

　　.parent{

　　display:grid;

　　grid-template-columns:auto1fr;

　　grid-gap:20px

　　}

　　三、三欄布局

　　特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度，實現(xiàn)三欄布局有多種方式（可以猛戳實現(xiàn)三欄布局的幾種方法),本文著重介紹圣杯布局和雙飛翼布局。

　　1.圣杯布局

　?、偬攸c

　　比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫中間列部分，這樣實現(xiàn)中間列可以優(yōu)先加載。

　　.container{

　　padding-left:220px;//為左右欄騰出空間

　　padding-right:220px;

　　}

　　.left{

　　float:left;

　　width:200px;

　　height:400px;

　　background:red;

　　margin-left:-100%;

　　position:relative;

　　left:-220px;

　　}

　　.center{

　　float:left;

　　width:100%;

　　height:500px;

　　background:yellow;

　　}

　　.right{

　　float:left;

　　width:200px;

　　height:400px;

　　background:blue;

　　margin-left:-200px;

　　position:relative;

　　right:-220px;

　　}

　　<articleclass="container">

　　<pclass="center">

　　<p>圣杯布局</p>

　　</p>

　　<pclass="left"></p>

　　<pclass="right"></p>

　　</article>

關(guān)于“CSS中有哪些常見的布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。