css有哪些佈局方式

css佈局方式：1、單列佈局，包括header、content、footer等寬的單列佈局和header、footer佔滿螢幕寬度，content略窄的單列佈局；2、兩列自適應佈局； 3.三欄佈局，包括聖杯佈局、雙飛翼佈局。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、單列佈局

#常見的單列佈局有兩種：

#header、content、footer等寬的單列佈局

實作：
對header、content、footer都用width或max-width設定同樣的寬度（當螢幕小於設定的寬度時，前者會出現捲軸，後者顯示的是螢幕的實際寬度），然後再用margin:0 auto;實現水平居中。
html部分：

css部分：

#header、footer佔滿螢幕寬度，content略窄的單列佈局

實作：

對header、footer不設定寬度，區塊級元素會佔滿螢幕寬度，對content用width或max- width設定同樣的寬度（區別同上），然後再用margin:0 auto;實現水平居中。

html部分同上

css部分：

#二、兩列自適應佈局

兩列自適應佈局是指一列由內容寬度撐開，剩餘的一列由撐滿螢幕剩餘寬度的佈局方式。

使用float overflow:hidden實作
自適應的兩列佈局主要是透過overflow:hidden觸發BFC（格式化上下文，是Web頁面中盒模型佈局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。）來實現，BFC其中一個特性就是不重疊浮動元素。
html部分：

css部分：

#使用flex佈局實作
flex佈局也叫做彈性盒子佈局，可以很方便的實作佈局方式，缺點是不相容IE10以下的。
html部分同上。
css部分：

flex是flex-grow(定義項目的方法比例)、flex-shrink(定義項目的縮寫比例)、flex-basis(定義了在分配多餘空間前，項目佔據的主軸空間)的縮寫，flex:1相當於flex-grow:1;flex-shrink:1;flex-basis:0；

##使用grid佈局實現 grid佈局，是一個基於網格的二維佈局系統，用來優化使用者介面設計。
html部分同上。
css部分：

三、三欄佈局

三欄佈局是指兩側欄位固定寬度，中間欄位自適應寬度。本文主要介紹聖杯佈局和雙飛翼佈局。

聖杯佈局

特點：dom結構必須先寫中間列部分，這樣中間列可以優先載入。

html部分：

css實作步驟：

1、將三個列部分都設為左浮動，將中間列的寬度設定為100%，這樣可以實現中間自適應，這時候，left和right會被擠到下一行。

2、將left與right都設定margin-left的值為負值，這樣可以讓left與right回到與center同一行。

3、設定父元素container的padding-left與padding-right，為left欄位部分和right列部分騰出空間。

4、設定left列部分的和right列部分為相對定位，設定它們的left與right屬性。

完整css程式碼：

缺點
# 有一個最小寬度，當頁面小於最小寬度時​​佈局就會亂掉。所以最好給body設定一個min-width。這個min-width一定不能是試出來的，要怎麼計算呢？就是left-width * 2 right-width，至於為什麼，簡單的說就是：“由於設置了相對定位，所以當left原來的位置和right的位置產生重疊時，由於浮動的原因一行放不下就會換行” 。所以佈局就被打亂了。使用雙飛翼佈局就可以避免這個問題。

雙飛翼佈局
與聖杯佈局差不多，不過雙飛翼佈局改變了一下DOM文檔結構。
html部分：

css實作步驟：
1、設定left、right、center的float為left，再將center的width設定為100% 。
2、設定left的margin-left為-100%，設定right的margin-left為它寬度的負值。
3、設定center裡面的inner的margin屬性值。
完整css程式碼：

效果：

#兩個三欄佈局的比較：
1.兩種佈局都把主流文檔放在最前面，讓主列優先載入。
2、雙飛翼佈局比聖杯佈局少了一個relative定位，css結構更簡單。但是聖杯的html佈局可能更加一步了然。
3、兩種佈局都是左右定寬，中間寬度自適應的佈局結構，都用到了margin-left負值進行定位。

還有一些其他的css佈局方式再繼續探索趴~還有頭髮可以掉，加油！

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css有哪些佈局方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！