柚子快報(bào)激活碼778899分享：前端 CSS篇四：常見布局匯總

http://yzkb.51969.com/

先語：層模型屬性position

簡(jiǎn)述：這個(gè)屬性比較特殊，是元素定位的關(guān)鍵屬性，決定了元素如何在頁面上進(jìn)行布局。

屬性值：

?static?：默認(rèn)值，元素按照正常文檔流進(jìn)行布局。?relative?：相對(duì)定位，元素相對(duì)于其正常位置進(jìn)行偏移，但仍保留在文檔流中。?absolute?：絕對(duì)定位，元素脫離文檔流，相對(duì)于其最近的已定位父元素進(jìn)行定位。?fixed?：固定定位，元素脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位。

擴(kuò)展搭配：position屬性在一些場(chǎng)景下需要搭配z-index屬性來使用。

z-index的作用：控制元素在頁面上的層疊順序（注意：僅當(dāng)元素的position屬性不為static時(shí)，z-index才會(huì)生效），它接收的是一個(gè)正整數(shù)，表示層級(jí)，層級(jí)高的元素會(huì)覆蓋層級(jí)低的元素。

說到層級(jí)，肯定需要擴(kuò)展一下position屬性中各屬性值的層級(jí)關(guān)系。

直述：static < relative/absolute/fixed/sticky（后者層級(jí)由z-index決定，值越大層級(jí)越高，沒定義z-index則按照文檔流依照順序來）

?靜態(tài)定位（static）?：默認(rèn)層級(jí)，不受z-index影響，層級(jí)最低。?相對(duì)定位（relative）?：可通過z-index提升層級(jí)，相對(duì)于原位置定位，不脫離文檔流。?絕對(duì)定位（absolute）?：可通過z-index提升層級(jí)，相對(duì)于最近的非static定位祖先元素定位，脫離文檔流。?固定定位（fixed）?：可通過z-index提升層級(jí)，相對(duì)于瀏覽器窗口定位，脫離文檔流。?粘性定位（sticky）?：層級(jí)行為類似relative和fixed的結(jié)合，根據(jù)滾動(dòng)位置變化。

粘性定位（sticky）這個(gè)屬性值前面沒有說，是因?yàn)樗哂幸欢ǖ奶厥庑?，是一個(gè)特定的、較新的定位方式，有其獨(dú)特的使用場(chǎng)景和行為表現(xiàn)。

使用該屬性值需要滿足幾個(gè)條件：

①、父元素不能有overflow或overflow屬性，必須指定top、bottom、left、right四個(gè)值之一。

②、父元素的高度不能低于sticky元素的高度。

（出場(chǎng)率一般，需要結(jié)合對(duì)應(yīng)場(chǎng)景使用）

一、流式布局

簡(jiǎn)述：這個(gè)沒啥說的，按照文檔流依次加載構(gòu)建元素（如讀作文，一行接一行自然讀下去），沒太多鳥用，簡(jiǎn)單明了，只作為底盤（沒添加其他的定位布局情況下遵循的布局方式）。

（適用于簡(jiǎn)單頁面結(jié)構(gòu)（做初級(jí)練習(xí)這種），不能精確控制復(fù)雜布局的元素位置和大?。ㄔ谏虡I(yè)化項(xiàng)目中不適用），也不用管它，了解即可）

二、浮動(dòng)布局

簡(jiǎn)述：通過float屬性將元素/標(biāo)簽浮動(dòng)到頁面左側(cè)或右側(cè)，實(shí)現(xiàn)多欄布局。（具有一定的應(yīng)用場(chǎng)景）

優(yōu)缺點(diǎn)：優(yōu)→實(shí)現(xiàn)導(dǎo)航菜單或多列新聞布局；缺→需要清除浮動(dòng)，不夠靈活（還可能造成浮動(dòng)塌陷問題）。?

核心屬性：float

?left?：元素向左浮動(dòng)。 ?right?：元素向右浮動(dòng)。 ?none?：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文檔流中的原始位置。 ?inherit?：元素從父元素繼承float屬性的值。

清除浮動(dòng)：

可以設(shè)置clear屬性清除浮動(dòng)。

clear屬性用于控制元素的哪一側(cè)不應(yīng)該緊挨著浮動(dòng)元素，其屬性值包括：

?left?：元素的左側(cè)不應(yīng)該緊挨著左浮動(dòng)的元素。?right?：元素的右側(cè)不應(yīng)該緊挨著右浮動(dòng)的元素。?both?：元素的兩側(cè)都不應(yīng)該緊挨著浮動(dòng)元素。?none?：默認(rèn)值。元素可以緊挨著浮動(dòng)元素。?inherit?：元素從父元素繼承clear屬性的值。

浮動(dòng)塌陷問題（面試經(jīng)常問到）：

1、首先明白浮動(dòng)塌陷是什么？

答：正常在文檔流中（流式布局），父元素的高度是默認(rèn)被子元素?fù)伍_的，子元素多高，父元素就有多高，但是當(dāng)設(shè)置了浮動(dòng)后，子元素完全脫離文檔流，不再占據(jù)原本的位置，就導(dǎo)致父元素高度沒有子元素?fù)纹穑l(fā)生高度塌陷。

2、怎么解決？

答：三種方向！

?使用額外標(biāo)簽?：

在浮動(dòng)元素后添加一個(gè)空標(biāo)簽，并設(shè)置clear: both屬性。這種方法簡(jiǎn)單，但會(huì)增加HTML結(jié)構(gòu)的復(fù)雜性。? ?設(shè)置父元素屬性?：

給父元素設(shè)置overflow: hidden屬性，可以有效防止子元素溢出并清除浮動(dòng)。?另一種方法是設(shè)置父元素display: inline-block，但可能導(dǎo)致父元素寬度丟失。? ?使用偽元素?：

在父元素的最后添加偽元素:after，并設(shè)置display: block; clear: both; content: ""; visibility: hidden; height: 0，以清理所有浮動(dòng)的尾巴。?

三、彈性布局?

簡(jiǎn)述：使用flex容器和flex項(xiàng)目實(shí)現(xiàn)靈活的布局方式，適用于各種屏幕尺寸和設(shè)備。（使用度很高）

?優(yōu)缺點(diǎn)：優(yōu)→可以輕松實(shí)現(xiàn)復(fù)雜的布局；缺→需要嵌套多個(gè)flex容器。

核心屬性：flex

注意點(diǎn)：使用彈性布局需要在目標(biāo)元素上添加（dispaly:flex）這一屬性，且該屬性只影響元素本身和其直系子元素，不會(huì)更加深入的影響后代元素！

?容器屬性?：

?flex-direction?：決定主軸的方向，即項(xiàng)目的排列方向。

屬性值包括row（默認(rèn)值，水平方向，起點(diǎn)在左端）、row-reverse（水平方向，起點(diǎn)在右端）、column（垂直方向，起點(diǎn)在上沿）、column-reverse（垂直方向，起點(diǎn)在下沿）。

?flex-wrap?：定義如果一條軸線排不下，如何換行。

屬性值包括nowrap（默認(rèn)值，不換行）、wrap（換行，第一行在上方）、wrap-reverse（換行，第一行在下方）。

?flex-flow?：是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

?justify-content?：控制項(xiàng)目在主軸上的對(duì)齊方式。

屬性值包括flex-start（起點(diǎn)對(duì)齊）、flex-end（終點(diǎn)對(duì)齊）、center（居中對(duì)齊）、space-between（兩端對(duì)齊，項(xiàng)目之間的間隔相等）、space-around（每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等）。

?align-items?：控制項(xiàng)目在交叉軸上如何對(duì)齊。

屬性值包括flex-start、flex-end、center、baseline（項(xiàng)目的第一行文字的基線對(duì)齊）、stretch（默認(rèn)值，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度）。

?align-content?：定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

屬性值包括flex-start、flex-end、center、space-between、space-around、stretch（默認(rèn)值，軸線占滿整個(gè)交叉軸）。

?子元素屬性?：

?flex-grow?：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

屬性值可以是一個(gè)非負(fù)數(shù)字，表示放大的比例。

?flex-shrink?：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

屬性值可以是一個(gè)非負(fù)數(shù)字，表示縮小的比例。

?flex-basis?：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。它可以設(shè)為auto（默認(rèn)值），表示項(xiàng)目的本來大小，或者設(shè)為具體的長(zhǎng)度值。

?flex?：是flex-grow,?flex-shrink?和?flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

?align-self?：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可以覆蓋align-items屬性。

默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。屬性值還包括flex-start、flex-end、center、baseline、stretch。

?order?：定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。屬性值可以是一個(gè)整數(shù)。

四、網(wǎng)格布局

簡(jiǎn)述：通過定義網(wǎng)格容器和網(wǎng)格項(xiàng)的屬性，實(shí)現(xiàn)二維網(wǎng)格布局。（具有一定的應(yīng)用場(chǎng)景）

優(yōu)缺點(diǎn)：優(yōu)→提供了更強(qiáng)大的布局功能，如自適應(yīng)列寬和自動(dòng)調(diào)整布局；缺→較舊瀏覽器支持不完善。

如何定義：通過設(shè)置CSS屬性display: grid或display: inline-grid來實(shí)現(xiàn)。

屬性使用：

?grid-template-columns和grid-template-rows?：定義網(wǎng)格的列和行的寬度和高度，屬性值可以是長(zhǎng)度單位、百分比、fr單位或auto等?。

?gap?：定義網(wǎng)格線之間的間隙，屬性值可以是長(zhǎng)度單位?。

?grid-template-areas?：定義網(wǎng)格區(qū)域，屬性值是一個(gè)字符串，用于指定網(wǎng)格區(qū)域的名稱?。

項(xiàng)目屬性用于控制網(wǎng)格項(xiàng)的位置和對(duì)齊，重要的有：

?grid-column-start、grid-column-end、grid-row-start、grid-row-end?：定義網(wǎng)格項(xiàng)的開始和結(jié)束位置，屬性值可以是網(wǎng)格線的編號(hào)或網(wǎng)格區(qū)域的名稱?。

?justify-self、align-self?：定義網(wǎng)格項(xiàng)在單元格內(nèi)的對(duì)齊方式，屬性值可以是start、end、center或stretch等?。

使用時(shí)需要注意：

?容器與項(xiàng)目?：需明確網(wǎng)格容器（display: grid/inline-grid）和網(wǎng)格項(xiàng)目，容器直接影響其子元素（網(wǎng)格項(xiàng)目）。?

?行列設(shè)置?：通過屬性設(shè)置網(wǎng)格的行數(shù)和列數(shù)，以及項(xiàng)目的具體位置和對(duì)齊方式。?

?響應(yīng)式設(shè)計(jì)?：網(wǎng)格布局應(yīng)適應(yīng)不同屏幕尺寸和設(shè)備，考慮使用可變的行列數(shù)或柵格系統(tǒng)。?

?單位選擇?：在設(shè)計(jì)網(wǎng)格時(shí)，選擇合適的單位（如使用8作為網(wǎng)格的最小單位）以保持頁面清晰和易于管理。?

?兼容性與回退方案?：確保網(wǎng)格布局在不同瀏覽器上的兼容性，并為不支持網(wǎng)格布局的瀏覽器提供回退方案。?

布局結(jié)束語

簡(jiǎn)述：布局的坑挺多的，所以需要深入的解析，大多數(shù)前端寫項(xiàng)目慢就是因?yàn)閷?duì)布局的了解太淺，而且還容易出現(xiàn)各種各樣的問題，導(dǎo)致浪費(fèi)時(shí)間的來回調(diào)試（建議小白還是找找視頻教學(xué)自學(xué)一下，畢竟文本知識(shí)只適合拿來記憶一下）。

柚子快報(bào)激活碼778899分享：前端 CSS篇四：常見布局匯總

http://yzkb.51969.com/

精彩鏈接