頁面布局往往會影響著整體的結構與項目的樣式，通常我們用的布局方式有三種：float,flex,grid
1.float或position布局
1.1概念
? ? ?首先對于一個頁面來說，有浮動流，文檔流，文本流這幾種模式，而float布局則是脫離文檔流而不脫離文本流，就是頁面的元素會無視這個浮動的元素，正常布局的正常布局，只是浮動的元素會在正常的元素上方就像浮起來了。
浮動會激活元素的BFC（塊級格式化上下文），使元素脫離文檔流，它是一個獨立的渲染區域，有自己的渲染規則，與這個區域外部的規則毫無關系
1.2實現
? ? ?通過position或float來實現布局，首先使用float讓其浮動，脫離文檔流，就好比像有兩層空間，一般寫的元素的在一層，浮動的則是在另一層。position如果是絕對定位（absolute）,也會浮動起來，就需要設置left,right,top,bottom這四個屬性去移動
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>Demo</title>
? ? ? ? <style>
? ? ? ? ? ? .float{
? ? ? ? ? ? ? ?float: left;//靠左浮動
? ? ? ? ? ? ? ?width: 100px;
? ? ? ? ? ? ? ?height: 100px;
? ? ? ? ? ? ? ?background-color: aqua;
? ? ? ? ? ? }
? ? ? ? ? ? .item{
? ? ? ? ? ? ? ? background-color: bisque;
? ? ? ? ? ? ? ? width: 100%;
? ? ? ? ? ? ? ? height: 500px;
? ? ? ? ? ? }
? ? ? ? </style> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? </head>
? ? <body>
? ? ? ? <div class="container">
? ? ? ? ? ? <div class="float">float</div>
? ? ? ? ? ? <div class="item"></div>
? ? ? ? </div>
? ? </body>
</html>
1.3優缺點
?????缺點：步驟繁瑣，使用困難，同時浮動需要清除，不然會影響樣式。同時對于布局構思能力要求很高，現在基本不會用，除非Ie瀏覽器。
?????優點：包容性強大
2.flex布局
2.1概念：
? ? ?flex就是彈性盒子布局，Flex布局是CSS3新增的一種CSS布局模式，它能夠讓元素更加簡便的布局，并支持響應式布局。它通過“容器”和“項目”兩個元素進行布局，允許容器中的項目能夠靈活地伸縮和排列，以適應不同的屏幕尺寸或設備。一般來說父容器，子項目，它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
1.2實現
? ? ?flex布局是一維布局，所以需要設置橫和豎的布局方式，用flex-direction去決定方向。
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>Demo</title>
? ? ? ? <style>
? ? ? ? ? ? .container{
? ? ? ? ? ? ? ?width: 100%;
? ? ? ? ? ? ? ?height: 100px;
? ? ? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? ? ? //一般設置這三個屬性就行了
? ? ? ? ? ? ? ? display: flex;//定義為flex布局
? ? ? ? ? ? ? ? flex-direction: row;//子元素（項目）排列方式，有row--正方向行，row-reverse--反方向行，column--正方向列，
? ? ? ? ? ? ? ? //column-reverse--反方向列
? ? ? ? ? ? ? ? justify-content: space-around;//有這些值： flex-start | flex-end | center |
? ? ? ? ? ? ? ? // space-between | space-around;
? ? ? ? ? ? }
? ? ? ? ? ? .item{
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 100px;
? ? ? ? ? ? ? ? border: black solid 2px;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? }
? ? ? ? </style> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? </head>
? ? <body>
? ? ? ? <div class="container">
? ? ? ? ? ? <div class="item" style="background-color: yellow;">yellow</div>
? ? ? ? ? ? <div class="item" style="background-color: blue;">blue</div>
? ? ? ? ? ? <div class="item" style="background-color: pink;">pink</div>
? ? ? ? </div>
? ? </body>
</html>
1.3相關屬性
?????flex布局有些常用的屬性：
flex-direction：定義主軸的方向（row、row-reverse、column、column-reverse）；
justify-content：定義元素在主軸上的對齊方式（flex-start、flex-end、center、space-between、space-around）；
align-items：定義元素在交叉軸上的對齊方式（flex-start、flex-end、center、baseline、stretch）；
flex-wrap：定義元素的換行方式（nowrap、wrap、wrap-reverse）；
align-content：定義多行元素在交叉軸上的對齊方式（flex-start、flex-end、center、space-between、space-around、- >stretch）；
flex-grow：定義元素的放大比例；
flex-shrink：定義元素的縮小比例；
flex-basis：定義元素在分配多余空間之前的基準大小；
?
1.4優缺點
? ? ?優點：
簡單易用：Flex布局用起來比傳統的布局方式更加方便和快捷。
布局靈活：能夠實現各種方向和大小的布局，確保頁面在不同設備和窗口大小下都能正常顯示。
支持對齊和分布：Flex布局支持多種對齊和分布方式，可用于實現水平居中、垂直居中、頂部對齊、底部對齊等。
自適應：Flex布局可以根據不同的設備和屏幕大小來適應布局，使頁面在各種不同的設備上都能正常顯示。
支持動畫和過渡效果：Flex布局支持動畫和過渡效果，可用于實現各種動態效果。
? ? ?缺點：
兼容性問題：由于Flex布局是CSS3的新特性，舊版本的瀏覽器可能不支持。
可讀性問題：由于Flex布局使用的是大量的flex屬性和值，使得代碼相對較長，可讀性較差
3.grid布局
3.1概念：
? ? ?Grid布局是CSS中一種基于網格的布局方式，它將一個頁面分成了一系列的行和列，并將網格中的內容放置在這些行和列中，可以實現更加靈活和高效的頁面布局。Grid 布局則是將容器劃分成“行"和“列”，產生單元格，然后指定"項目所在”的單元格，功能比flex強大，是一種二維的布局方式。
3.2實現：
? ? ?和flex布局差不多，通過display:grid先實現，在根據grid-template-columns或者 grid-template-rows去設置行與列。
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>Parallax Scrolling Demo</title>
? ? ? ? <style>
? ? ? ? ? ? .container{
? ? ? ? ? ? ? ?width: 100%;
? ? ? ? ? ? ? ?height: 100px;
? ? ? ? ? ? ? ?display: grid;
? ? ? ? ? ? ? ?grid-template-rows:100px 100px ;//設置每一行的寬度，其中每個數字代表這一行
? ? ? ? ? ? ? ?grid-template-columns: 100px 100px;//設置每一列的寬度，其中每個數字代表這一列
? ? ? ? ? ? }
? ? ? ? ? ? .item{
? ? ? ? ? ? ? ? border: black solid 2px;
? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? }
? ? ? ? </style> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? </head>
? ? <body>
? ? ? ? <div class="container">
? ? ? ? ? ? <div class="item" style="background-color: yellow;">yellow</div>
? ? ? ? ? ? <div class="item" style="background-color: blue;">blue</div>
? ? ? ? ? ? <div class="item" style="background-color: pink;">pink</div>
? ? ? ? ? ? <div class="item" style="background-color: pink;">pink</div>
? ? ? ? </div>
? ? </body>
</html>
原本的效果和flex布局一樣
3.3屬性：
? ? ?grid布局的屬性很多，也很復雜
grid-template-columns/grid-template-rows：定義網格的列和行的數量和大小。
grid-template-areas：定義網格模板中的區域名稱。
grid-template：以上兩者的縮寫形式。
grid-column-gap/grid-row-gap/grid-gap：定義列、行、以及列與行之間的間距。
grid-auto-columns/grid-auto-rows：定義沒有列、行指定的網格單元格的大小。
grid-auto-flow：控制自動布局算法在什么方向上填充網格。
3.4 優缺點
優點：
精確的控制布局：可以通過列和行來精確控制每個子元素在布局中的位置和大小。
靈活性：可以使用媒體查詢來針對不同的屏幕尺寸或方向添加或移除列或行。
可維護性：可以很容易地修改布局而不必擔心其他元素的影響。
易于理解：與傳統的 float、position 和 display 屬性相比，Grid 布局的代碼更容易理解和維護。
缺點：
兼容性：雖然 Grid 布局已成為現代瀏覽器的標準，但在舊版瀏覽器中并不支持。開發者需要使用其他方式來提供備用方案。
學習成本高：與傳統的 float、position 和 display 屬性相比，學習和理解 Grid 布局可能需要更長的時間和更高的學習成本。
可讀性差：因為 Grid 布局使用了許多新的術語（如 grid-template-columns 和 grid-template-rows），因此初學者可能需要花更多的時間來理解和閱讀代碼
?
