寫(xiě)在前面：
在了解css布局之前格侯，我們先了解兩個(gè)小概念鼻听，我認(rèn)為這將對(duì)你有所幫助财著！
塊級(jí)元素：display:bloak；占據(jù)一行撑碴，下一個(gè)元素自動(dòng)換行撑教，如div等；
行內(nèi)元素：display:inline醉拓；元素沒(méi)有高寬伟姐，根據(jù)元素內(nèi)的內(nèi)容改變大小，如span亿卤、a標(biāo)簽等玫镐；
行內(nèi)塊：display:inline-bloak；使行內(nèi)元素具有塊級(jí)元素特性怠噪、使塊級(jí)元素具有行內(nèi)元素特性；
1 基礎(chǔ)css布局
1.1 position定位
position用于規(guī)定如div等元素的定位方法的類(lèi)型杜跷。
其包含static傍念、relative、fixed葛闷、absolute憋槐、sticky這5個(gè)定位方式，當(dāng)position后面加上這幾種定位方式之后淑趾，我們就可以用top阳仔、right、left扣泊、bottom對(duì)元素進(jìn)行位置改變操作啦~
1.1.0 實(shí)例代碼運(yùn)行效果圖
1.1.1 static定位方式
靜態(tài)定位近范，瀏覽器的默認(rèn)的，寫(xiě)不寫(xiě)沒(méi)啥區(qū)別延蟹，top评矩、right、left阱飘、bottom不起作用斥杜。
div.static { position: static; border: 3px solid #73AD21; top: 50px; /*演示：這句話(huà)不起作用，可刪去*/ left: 10px; /*演示：這句話(huà)不起作用沥匈，可刪去*/}
1.1.2 fixed定位方式
固定定位蔗喂，元素的位置相對(duì)于瀏覽器（就是你能看到的這個(gè)瀏覽器窗口）來(lái)說(shuō)，是固定的高帖，無(wú)論你怎么滑動(dòng)窗口缰儿，它都在那兒雷打不動(dòng)。 可以與其他元素重疊散址。（常用于導(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定位方式
相對(duì)定位返弹，相對(duì)于這個(gè)元素的原來(lái)位置進(jìn)行移動(dòng)锈玉，原來(lái)的位置依然是存在的（通常里面會(huì)包上absolute絕對(duì)定位來(lái)用）。
div.relative { position: relative; border: 3px solid #9cf0c2; width: 200px; height: 60px;}
1.1.4 absolute定位方式
絕對(duì)定位义起，根據(jù)外面一層包著的元素來(lái)定位（relative)拉背，左啊還是右啊，如果外面沒(méi)有那就是html元素默终，最大的那個(gè)咯椅棺。（口訣：子絕父相）。
div.absolute { position: absolute; background-color: #9cf0c2; border: #29c9c9; width: 150px; height: 30px; top: 20px;}
1.1.5 sticky定位方式
粘性定位齐蔽，和fixed定位有些相似两疚，但是又有些不同，一開(kāi)始可以自由滑動(dòng)含滴，當(dāng)?shù)揭欢ㄎ恢脮r(shí)就會(huì)在那里不動(dòng)诱渤。 先自由滑動(dòng)，到一定位置就固定在那里不動(dòng)谈况。
div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到頂部20px位置不動(dòng) */ background-color: #29c9c9; border: 2px solid #73AD21;}
1.1.6 實(shí)例源碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>position定位使用</title></head><body> <div style="height: 2000px;"> <!-- static定位 --> <div class="static">這個(gè)是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">這個(gè)是sticky定位</div> </div></body></html>
1.2 float定位
1.2.0 實(shí)例代碼運(yùn)行效果圖
1.2.1 float詳解
何為float定位勺美？浮動(dòng)的元素，脫離文檔流（比如正常我們放一個(gè)div在頁(yè)面里碑韵，是有一個(gè)文檔流的赡茸，就是會(huì)有位置的，而變?yōu)閒loat定位后祝闻，就會(huì)漂浮起來(lái)占卧，原來(lái)的位置就不占用了，再放其他div联喘，會(huì)從忽略float的位置华蜒，正常排列），空間釋放（原來(lái)是占用著這個(gè)位置的豁遭，然后浮動(dòng)友多，就漂浮起來(lái)了，這個(gè)位置就不占用了）堤框。
清除浮動(dòng)： clear：both 因?yàn)閒loat定位他是浮起來(lái)的嘛域滥，這個(gè)位置就是空的，而clear：both會(huì)清除浮動(dòng)蜈抓，默認(rèn)為正常的文檔流启绰，這樣后面的元素就可正常排列了（可以自己在代碼中去體驗(yàn)）。
1.2.2 實(shí)例源碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css浮動(dòng)</title> <style> div.main{ width: 1000px; height: 500px; background-color: aquamarine; } div.child{ width: 100px; height: 100px; background-color: blue; float: left; margin: 5px; } // 清除浮動(dòng) div.clear{ height: 20px; border: 2px solid black; clear: both; } </style> </head> <body> <!-- 浮動(dòng) --> <div class="main"> <div class="child"></div> <div class="child"></div> <div class="clear"></div> </div> </body></html>
2 開(kāi)發(fā)中常用的布局
2.1 flex布局
一種響應(yīng)式布局沟使，何為響應(yīng)式委可？可以隨著瀏覽器窗口大小放大縮小，而布局元素也相應(yīng)放大縮小。
具體分析見(jiàn)下面第三節(jié)的講解着倾。
2.2 antd柵格布局
當(dāng)我們使用ant design組件開(kāi)發(fā)時(shí)拾酝，必然要使用的其自帶的一種布局模式。
可參考ant design官網(wǎng)的介紹：https://ant.design/components/grid-cn/
2.3 grid網(wǎng)格布局
如果說(shuō)flex是一維布局卡者，那么grid就是二維布局蒿囤，更高級(jí)，它有行和列崇决，flex只有行材诽，其常用于固定元素個(gè)數(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 布局模塊（問(wèn)世）之前恒傻，可用的布局模式有以下四種：
- 塊（Block）脸侥，用于網(wǎng)頁(yè)中的部分（節(jié)）
- 行內(nèi)（Inline），用于文本
- 表盈厘，用于二維表數(shù)據(jù)
- 定位睁枕，用于元素的明確位置
彈性框布局模塊，可以更輕松地設(shè)計(jì)靈活的響應(yīng)式布局結(jié)構(gòu)沸手，而無(wú)需使用浮動(dòng)或定位外遇。
3.2 教程文檔小結(jié)
3.2.1 基本概念
容器和屬性
采用 Flex 布局的元素，稱(chēng)為 Flex 容器（flex container）罐氨，簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員滩援，稱(chēng)為 Flex 項(xiàng)目（flex item）栅隐，簡(jiǎn)稱(chēng)"項(xiàng)目"。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）玩徊。
3.2.2 容器屬性
容器常用有6個(gè)屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.2.2.1 flex-direction
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）租悄。
.flex-container { display: flex; flex-direction: row(默認(rèn)) | row-reverse | column | column-reverse;}
用于控制項(xiàng)目排列方向與順序，默認(rèn)row恩袱，即橫向排列泣棋，項(xiàng)目排列順序?yàn)檎?-2-3-4；row-reverse同為橫向排列畔塔，但項(xiàng)目順序?yàn)榈剐?-3-2-1潭辈。
column 與row相反，為縱向排列澈吨，項(xiàng)目順序?yàn)檎?-2-3把敢，column-reverse同為縱向排列，項(xiàng)目順序?yàn)榈剐?-2-1谅辣。
3.2.2.2 flex-wrap屬性
用于控制項(xiàng)目是否換行修赞，nowrap表示不換行。
.flex-container { display: flex; flex-wrap: nowrap(默認(rèn)) | wrap | wrap-reverse;}
nowrap表示不換行桑阶，項(xiàng)目會(huì)一直在容器的第一行排列柏副，無(wú)論有多少個(gè)項(xiàng)目勾邦，只會(huì)都擠在第一行。
wrap表示自動(dòng)換行割择，當(dāng)項(xiàng)目在第一行排列不完時(shí)眷篇，會(huì)自動(dòng)切換到下一行排列。
wrap-reverse 也是自動(dòng)換行锨推，但不同的是铅歼，它是從底下開(kāi)始排列的（之前我們都是從上面開(kāi)始排的）。
3.2.2.3 flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式换可，默認(rèn)值為row nowrap（橫向排列椎椰，不換行）。
.flex-container { flex-flow: <flex-direction> || <flex-wrap>;}
3.2.2.4 justify-content屬性
喲沾鳄，常用慨飘，好使。justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式（我們想要使項(xiàng)目在容器中居中時(shí)译荞，經(jīng)常用得到）瓤的。
.flex-container { justify-content: flex-start(默認(rèn)) | flex-end | center | space-between | space-around;}
這里的的主軸是將橫軸看做為主軸。常取值分別代表的意思如下：
flex-start（默認(rèn)值）：左對(duì)齊flex-end：右對(duì)齊center： 居中space-between：兩端對(duì)齊吞歼，項(xiàng)目之間的間隔都相等圈膏。space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以篙骡，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍稽坤。
3.2.2.5 align-items屬性
喲，這個(gè)也常用糯俗，好使尿褪！align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.flex-container { align-items: flex-start | flex-end | center | baseline | stretch;}
這里的的交叉軸是將縱軸看做為交叉軸得湘。常取值分別代表的意思如下：
flex-start：交叉軸的起點(diǎn)對(duì)齊杖玲。flex-end：交叉軸的終點(diǎn)對(duì)齊。center：交叉軸的中點(diǎn)對(duì)齊淘正。baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊摆马。stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度鸿吆。
3.2.2.6 align-content屬性
align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式今膊。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用伞剑。
常取值分別代表的意思如下：
flex-start：與交叉軸的起點(diǎn)對(duì)齊斑唬。flex-end：與交叉軸的終點(diǎn)對(duì)齊。center：與交叉軸的中點(diǎn)對(duì)齊。space-between：與交叉軸兩端對(duì)齊恕刘，軸線(xiàn)之間的間隔平均分布缤谎。space-around：每根軸線(xiàn)兩側(cè)的間隔都相等。所以褐着，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍坷澡。stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。
3.2.3 項(xiàng)目屬性
前面我們介紹的是寫(xiě)在容器上的屬性含蓉，寫(xiě)完之后會(huì)作用于容器里面的項(xiàng)目排列布局樣式频敛。而項(xiàng)目屬性是寫(xiě)在項(xiàng)目上的。換一種說(shuō)法就是項(xiàng)目屬性相當(dāng)于我們寫(xiě)的ul里面的li馅扣，給li寫(xiě)屬性斟赚。
因?yàn)檫@里我不常用到，所以就簡(jiǎn)單記之差油，詳情可參考本文末尾的參考文章拗军。
項(xiàng)目可寫(xiě)屬性如下：
order定義項(xiàng)目的排列順序。數(shù)值越小蓄喇，排列越靠前发侵，默認(rèn)為0。flex-grow規(guī)定某個(gè) flex 項(xiàng)目相對(duì)于其余 flex 項(xiàng)目將增長(zhǎng)多少妆偏。flex-shrink規(guī)定某個(gè) flex 項(xiàng)目相對(duì)于其余 flex 項(xiàng)目將收縮多少刃鳄。flex-basis規(guī)定 flex 項(xiàng)目的初始長(zhǎng)度。flex是 flex-grow钱骂、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性叔锐。align-self規(guī)定彈性容器內(nèi)所選項(xiàng)目的對(duì)齊方式。將覆蓋容器的 align-items 屬性所設(shè)置的默認(rèn)對(duì)齊方式罐柳。
3.3 flex布局應(yīng)用
3.3.0 實(shí)例代碼運(yùn)行效果圖
3.3.1 實(shí)例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 布局教程：語(yǔ)法篇 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
4.2 注
本文作為本人學(xué)習(xí)總結(jié)之用掌腰，同時(shí)分享給大家狰住，如果覺(jué)得這些內(nèi)容有對(duì)你也有用的話(huà)张吉，就請(qǐng)點(diǎn)個(gè)贊吧~ 謝謝~
因?yàn)閭€(gè)人技術(shù)有限，如果有發(fā)現(xiàn)錯(cuò)誤或存在疑問(wèn)之處催植，歡迎指出或指點(diǎn)肮蛹！不勝感謝！
個(gè)人博客網(wǎng)站：https://zhangqiang.hk.cn
歡迎加入博主的前端學(xué)習(xí)qq交流群：706947563创南，專(zhuān)注前端開(kāi)發(fā)伦忠，共同學(xué)習(xí)進(jìn)步！
