css的常見6種布局方式

下面主要是針對三欄布局進行介紹：常見的三欄布局有，流體布局、聖杯布局、雙飛翼布局、flex布局、絕對定位布局、網格布局

流體布局

兩邊的寬度是固定的，中間的寬度是可以根據螢幕的大小進行改變的。實現的關鍵點是，左邊還有右邊的元素分別給他們設定浮動，即左邊設定成左浮動，右邊是右浮動，並且要設定成固定的寬高；中間的主要模組，使用margin-left還有margin-right進行設定（設定的值為到父元素兩側的距離，這裡指的就是到container這個父元素邊距的距離）

.left
.right
.main
"container">
"left">
"right">
"main">

聖杯布局

跟雙飛翼布局很像，有一些細節上的區別，相對於雙飛翼布局來說，html 結構相對簡單，但是樣式定義就稍微複雜，也是優先載入內容主體

實現的效果：兩側的寬度是固定的，中間main的寬度會隨著螢幕的寬度進行變化

實現步驟

把 left 放上去，由於浮動的關係，給 left 設定margin-left: -100%即可使左側欄浮動到 center 上面，並位於 center 左側之上。

同樣為 right 設定margin-left: -200px，這裡的長度等於 right 的長度

這時 center 的兩側被 left 和 right 覆蓋了，因此給 container設定padding: 0 200px

由於 left 和 right 也同時往中間縮，因此給 left 和 right 分別設定left: -200px; right: -200px，往兩側分別偏移自身的寬度去覆蓋掉 contaniner 使用padding後的空白位置。

.container
.container > div
.main
.left
.right
"container">
"main">
"left">
"right">

區分margin-left與left

一、在有定位宣告的情況下：即position:absolute,relative,fixed這幾種情況下

1>只有margin-left：這樣子position的宣告沒有任何作用，因為即使宣告了，也得靠left,top來調整位置，如果沒有left等，則position失效，元素位置仍為其該在的位置，margin-left還是相對於其父元素的距離 2>只有left等：正常情況

3>同時有margin-left和left：這種情況下，定位是有作用的，在定位完成後margin-left再起作用，即margin-left和left是可以疊加的

二、在無定位宣告或position:static的情況下

left等的定義無效，margin-left有效

雙飛翼布局

利用的是浮動元素 margin 負值的應用。主體內容可以優先載入，html **結構稍微複雜點。

實現步驟

把 left 放上去，由於浮動的關係，給 left 設定margin-left: -100%即可使左側欄浮動到 center 上面，並位於 center 左側之上。

同樣為 right 設定margin-left: -200px，這裡的長度等於 right 的長度

給 main 設定margin: 0 200px，同時設定overflow: hidden使其成為乙個bfc

.container
.container > div
.center
.left
.right
.main
"container">
"center">
"main">
center
"left">
left
"right">
right

flex布局

實現步驟

給 container 設定為乙個 flex 容器display: flex

center 的寬度設定為width: 100%，left 和 right 設定為width: 200px

為了不讓 left 和 right 收縮，給它們設定flex-shrink: 0

使用order屬性給三個部分的 dom 結構進行排序：left：order: 1，center：order: 2，right：order: 3

.container
.center
.left
.right
"container">
"center">
center
"left">
left
"right">
right

極其靈活

絕對定位布局

實現步驟

給 container 設定position: relative和overflow: hidden，因為絕對定位的元素的參照物為第乙個postion不為static的祖先元素。

left 向左浮動，right 向右浮動。

center 使用絕對定位，通過設定left和right並把兩邊撐開。

center 設定top: 0和bottom: 0使其高度撐開。

.center
"container">
"center">
center
"left">
left
"right">
right

缺點是依賴於left 和 right 的高度，如果兩邊欄的高度不夠，中間的內容區域的高度也會被壓縮。

網格布局

實現步驟

給 container 設定為display: grid

設定三欄的高度：grid-template-rows: 100px

設定三欄的寬度，中間自適應，兩邊固定：grid-template-columns: 200px auto 200px;

.container
"container">
"left">
left
"center">
center
"right">
right

使用起來極其方便

css的常見6種布局方式

CSS常見布局方式

css常見布局方式

CSS 常見的css布局

css的常見6種布局方式

CSS常見布局方式

css常見布局方式

CSS 常見的css布局

相關推薦