CSS中有哪些常見的布局

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

　　1、常見的單列布局：

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

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

　　2、如何實現

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

　　<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的內容寬度不設置，塊級元素充滿整個屏幕，但header、content和footer的內容區設置同一個width，并通過margin:auto實現居中。

　　<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;

　　}

　　二、兩列自適應布局

　　兩列自適應布局是指一列由內容撐開，另一列撐滿剩余寬度的布局方式

　　1.float+overflow:hidden

　　如果是普通的兩列布局，浮動+普通元素的margin便可以實現，但如果是自適應的兩列布局，利用float+overflow:hidden便可以實現，這種辦法主要通過overflow觸發BFC,而BFC不會重疊浮動元素。由于設置overflow:hidden并不會觸發IE6-瀏覽器的haslayout屬性，所以需要設置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;

　　}

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

　　2.Flex布局

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

　　//html部分同上

　　.parent{

　　display:flex;

　　}

　　.right{

　　margin-left:20px;

　　flex:1;

　　}

　　3.grid布局

　　Grid布局，是一個基于網格的二維布局系統，目的是用來優化用戶界面設計。

　　//html部分同上

　　.parent{

　　display:grid;

　　grid-template-columns:auto1fr;

　　grid-gap:20px

　　}

　　三、三欄布局

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

　　1.圣杯布局

　?、偬攸c

　　比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應，唯一區別是dom結構必須是先寫中間列部分，這樣實現中間列可以優先加載。

　　.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>

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