寫在前面：
在了解css布局之前，我們先了解兩個小概念，我認為這將對你有所幫助！
塊級元素：display:bloak；占據(jù)一行，下一個元素自動換行，如div等；
行內(nèi)元素：display:inline；元素沒有高寬，根據(jù)元素內(nèi)的內(nèi)容改變大小，如span、a標簽等；
行內(nèi)塊：display:inline-bloak；使行內(nèi)元素具有塊級元素特性、使塊級元素具有行內(nèi)元素特性；
1 基礎(chǔ)css布局
1.1 position定位
position用于規(guī)定如div等元素的定位方法的類型。
其包含static、relative、fixed、absolute、sticky這5個定位方式，當(dāng)position后面加上這幾種定位方式之后，我們就可以用top、right、left、bottom對元素進行位置改變操作啦~
1.1.0 實例代碼運行效果圖
1.1.1 static定位方式
靜態(tài)定位，瀏覽器的默認的，寫不寫沒啥區(qū)別，top、right、left、bottom不起作用。
div.static { position: static; border: 3px solid #73AD21; top: 50px; /*演示：這句話不起作用，可刪去*/ left: 10px; /*演示：這句話不起作用，可刪去*/}
1.1.2 fixed定位方式
固定定位，元素的位置相對于瀏覽器（就是你能看到的這個瀏覽器窗口）來說，是固定的，無論你怎么滑動窗口，它都在那兒雷打不動。 可以與其他元素重疊。（常用于導(dǎo)航欄位置固定）
div.fixed_1 { position: fixed; border: 3px solid #111111; width: 200px; height: 60px; top: 300px; left: 50px;}div.fixed_2 { position: fixed; border: 3px solid #44f895; width: 200px; height: 60px; top: 300px; left: 260px;}div.fixed_3 { position: fixed; border: 3px solid #7a5e5e; background-color: #ebaaaa; width: 200px; height: 60px; top: 310px; left: 360px;}
1.1.3 relative定位方式
相對定位，相對于這個元素的原來位置進行移動，原來的位置依然是存在的（通常里面會包上absolute絕對定位來用）。
div.relative { position: relative; border: 3px solid #9cf0c2; width: 200px; height: 60px;}
1.1.4 absolute定位方式
絕對定位，根據(jù)外面一層包著的元素來定位（relative)，左啊還是右啊，如果外面沒有那就是html元素，最大的那個咯。（口訣：子絕父相）。
div.absolute { position: absolute; background-color: #9cf0c2; border: #29c9c9; width: 150px; height: 30px; top: 20px;}
1.1.5 sticky定位方式
粘性定位，和fixed定位有些相似，但是又有些不同，一開始可以自由滑動，當(dāng)?shù)揭欢ㄎ恢脮r就會在那里不動。 先自由滑動，到一定位置就固定在那里不動。
div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到頂部20px位置不動 */ background-color: #29c9c9; border: 2px solid #73AD21;}
1.1.6 實例源碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>position定位使用</title></head><body> <div style="height: 2000px;"> <!-- static定位 --> <div class="static">這個是static定位</div> <!-- fixed 定位 --> <div class="fixed_1">fixed方塊1</div> <div class="fixed_2">fixed方塊2</div> <div class="fixed_3">fixed方塊3</div> <!-- relative定位 --> <div class="relative"> relative定位 <!-- absolute定位 --> <div class="absolute">absolute定位</div> </div> <!-- sticky定位 --> <div class="sticky">這個是sticky定位</div> </div></body></html>
1.2 float定位
1.2.0 實例代碼運行效果圖
1.2.1 float詳解
何為float定位？浮動的元素，脫離文檔流（比如正常我們放一個div在頁面里，是有一個文檔流的，就是會有位置的，而變?yōu)閒loat定位后，就會漂浮起來，原來的位置就不占用了，再放其他div，會從忽略float的位置，正常排列），空間釋放（原來是占用著這個位置的，然后浮動，就漂浮起來了，這個位置就不占用了）。
清除浮動： clear：both 因為float定位他是浮起來的嘛，這個位置就是空的，而clear：both會清除浮動，默認為正常的文檔流，這樣后面的元素就可正常排列了（可以自己在代碼中去體驗）。
1.2.2 實例源碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css浮動</title> <style> div.main{ width: 1000px; height: 500px; background-color: aquamarine; } div.child{ width: 100px; height: 100px; background-color: blue; float: left; margin: 5px; } // 清除浮動 div.clear{ height: 20px; border: 2px solid black; clear: both; } </style> </head> <body> <!-- 浮動 --> <div class="main"> <div class="child"></div> <div class="child"></div> <div class="clear"></div> </div> </body></html>
2 開發(fā)中常用的布局
2.1 flex布局
一種響應(yīng)式布局，何為響應(yīng)式？可以隨著瀏覽器窗口大小放大縮小，而布局元素也相應(yīng)放大縮小。
具體分析見下面第三節(jié)的講解。
2.2 antd柵格布局
當(dāng)我們使用ant design組件開發(fā)時，必然要使用的其自帶的一種布局模式。
可參考ant design官網(wǎng)的介紹：https://ant.design/components/grid-cn/
2.3 grid網(wǎng)格布局
如果說flex是一維布局，那么grid就是二維布局，更高級，它有行和列，flex只有行，其常用于固定元素個數(shù)布局；
可參考阮一峰的網(wǎng)絡(luò)日志 - CSS Grid 網(wǎng)格布局教程 ：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
3 flex布局詳解
3.1 flex布局是什么
在 Flexbox 布局模塊（問世）之前，可用的布局模式有以下四種：
- 塊（Block），用于網(wǎng)頁中的部分（節(jié)）
- 行內(nèi)（Inline），用于文本
- 表，用于二維表數(shù)據(jù)
- 定位，用于元素的明確位置
彈性框布局模塊，可以更輕松地設(shè)計靈活的響應(yīng)式布局結(jié)構(gòu)，而無需使用浮動或定位。
3.2 教程文檔小結(jié)
3.2.1 基本概念
容器和屬性
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
3.2.2 容器屬性
容器常用有6個屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.2.2.1 flex-direction
flex-direction屬性決定主軸的方向（即項目的排列方向）。
.flex-container { display: flex; flex-direction: row(默認) | row-reverse | column | column-reverse;}
用于控制項目排列方向與順序，默認row，即橫向排列，項目排列順序為正序1-2-3-4；row-reverse同為橫向排列，但項目順序為倒序4-3-2-1。
column 與row相反，為縱向排列，項目順序為正序1-2-3，column-reverse同為縱向排列，項目順序為倒序3-2-1。
3.2.2.2 flex-wrap屬性
用于控制項目是否換行，nowrap表示不換行。
.flex-container { display: flex; flex-wrap: nowrap(默認) | wrap | wrap-reverse;}
nowrap表示不換行，項目會一直在容器的第一行排列，無論有多少個項目，只會都擠在第一行。
wrap表示自動換行，當(dāng)項目在第一行排列不完時，會自動切換到下一行排列。
wrap-reverse 也是自動換行，但不同的是，它是從底下開始排列的（之前我們都是從上面開始排的）。
3.2.2.3 flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap（橫向排列，不換行）。
.flex-container { flex-flow: <flex-direction> || <flex-wrap>;}
3.2.2.4 justify-content屬性
喲，常用，好使。justify-content屬性定義了項目在主軸上的對齊方式（我們想要使項目在容器中居中時，經(jīng)常用得到）。
.flex-container { justify-content: flex-start(默認) | flex-end | center | space-between | space-around;}
這里的的主軸是將橫軸看做為主軸。常取值分別代表的意思如下：
flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
3.2.2.5 align-items屬性
喲，這個也常用，好使！align-items屬性定義項目在交叉軸上如何對齊。
.flex-container { align-items: flex-start | flex-end | center | baseline | stretch;}
這里的的交叉軸是將縱軸看做為交叉軸。常取值分別代表的意思如下：
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
3.2.2.6 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
常取值分別代表的意思如下：
flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線占滿整個交叉軸。
3.2.3 項目屬性
前面我們介紹的是寫在容器上的屬性，寫完之后會作用于容器里面的項目排列布局樣式。而項目屬性是寫在項目上的。換一種說法就是項目屬性相當(dāng)于我們寫的ul里面的li，給li寫屬性。
因為這里我不常用到，所以就簡單記之，詳情可參考本文末尾的參考文章。
項目可寫屬性如下：
order定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。flex-grow規(guī)定某個 flex 項目相對于其余 flex 項目將增長多少。flex-shrink規(guī)定某個 flex 項目相對于其余 flex 項目將收縮多少。flex-basis規(guī)定 flex 項目的初始長度。flex是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。align-self規(guī)定彈性容器內(nèi)所選項目的對齊方式。將覆蓋容器的 align-items 屬性所設(shè)置的默認對齊方式。
3.3 flex布局應(yīng)用
3.3.0 實例代碼運行效果圖
3.3.1 實例HTML源碼
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>flex布局</title> <style> .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; background-color: DodgerBlue; } /* 選擇父元素樣式是 .flex-container 的所有 <div> 元素 */ .flex-container>div { display: flex; justify-content: center; align-items: center; background-color: #f1f1f1; width: 100px; height: 80px; margin: 10px; } .flex-container>div>div { background-color: yellowgreen; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 30px; } </style></head><body> <div class="flex-container"> <div> <div>1</div> </div> <div> <div>2</div> </div> <div> <div>3</div> </div> <div> <div>4</div> </div> </div></body></html>
4 最后
4.1 參考
w3school Flexbox 布局模塊 https://www.w3school.com.cn/css/css3_flexbox.asp
一篇文章弄懂flex布局 https://www.cnblogs.com/echolun/p/11299460.html
Flex 布局教程：語法篇 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
4.2 注
本文作為本人學(xué)習(xí)總結(jié)之用，同時分享給大家，如果覺得這些內(nèi)容有對你也有用的話，就請點個贊吧~ 謝謝~
因為個人技術(shù)有限，如果有發(fā)現(xiàn)錯誤或存在疑問之處，歡迎指出或指點！不勝感謝！
個人博客網(wǎng)站：https://zhangqiang.hk.cn
歡迎加入博主的前端學(xué)習(xí)qq交流群：706947563，專注前端開發(fā)，共同學(xué)習(xí)進步！
