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

http://yzkb.51969.com/

先語：層模型屬性position

簡述：這個屬性比較特殊，是元素定位的關鍵屬性，決定了元素如何在頁面上進行布局。

屬性值：

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

擴展搭配：position屬性在一些場景下需要搭配z-index屬性來使用。

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

說到層級，肯定需要擴展一下position屬性中各屬性值的層級關系。

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

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

粘性定位（sticky）這個屬性值前面沒有說，是因為它具有一定的特殊性，是一個特定的、較新的定位方式，有其獨特的使用場景和行為表現(xiàn)。

使用該屬性值需要滿足幾個條件：

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

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

（出場率一般，需要結(jié)合對應場景使用）

一、流式布局

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

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

二、浮動布局

簡述：通過float屬性將元素/標簽浮動到頁面左側(cè)或右側(cè)，實現(xiàn)多欄布局。（具有一定的應用場景）

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

核心屬性：float

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

清除浮動：

可以設置clear屬性清除浮動。

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

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

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

1、首先明白浮動塌陷是什么？

答：正常在文檔流中（流式布局），父元素的高度是默認被子元素撐開的，子元素多高，父元素就有多高，但是當設置了浮動后，子元素完全脫離文檔流，不再占據(jù)原本的位置，就導致父元素高度沒有子元素撐起，發(fā)生高度塌陷。

2、怎么解決？

答：三種方向！

?使用額外標簽?：

在浮動元素后添加一個空標簽，并設置clear: both屬性。這種方法簡單，但會增加HTML結(jié)構(gòu)的復雜性。? ?設置父元素屬性?：

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

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

三、彈性布局?

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

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

核心屬性：flex

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

?容器屬性?：

?flex-direction?：決定主軸的方向，即項目的排列方向。

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

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

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

?flex-flow?：是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

?justify-content?：控制項目在主軸上的對齊方式。

屬性值包括flex-start（起點對齊）、flex-end（終點對齊）、center（居中對齊）、space-between（兩端對齊，項目之間的間隔相等）、space-around（每個項目兩側(cè)的間隔相等）。

?align-items?：控制項目在交叉軸上如何對齊。

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

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

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

?子元素屬性?：

?flex-grow?：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

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

?flex-shrink?：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

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

?flex?：是flex-grow,?flex-shrink?和?flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

?align-self?：允許單個項目有與其他項目不一樣的對齊方式，可以覆蓋align-items屬性。

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

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

四、網(wǎng)格布局

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

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

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

屬性使用：

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

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

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

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

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

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

使用時需要注意：

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

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

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

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

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

布局結(jié)束語

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

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

http://yzkb.51969.com/

精彩鏈接