本文檔系統(tǒng)介紹CSS核心布局知識，涵蓋尺寸單位（px、em、rem、fr）及其使用原則；標準與怪異盒模型區(qū)別及box-sizing屬性應用；position定位（static、relative、absolute、fixed、sticky）的特性與參考系；float浮動規(guī)則、布局影響及清除方法；以及Flex布局容器與項目屬性、Grid網格布局的軌道定義、項目定位和響應式函數(shù)（repeat、minmax等）的應用。

CSS尺寸、盒子模型、定位、浮動與布局（Flex/Grid）

尺寸單位: px,em,rem,fr

各單位定義

• px (像素): 相對固定的單位，代表屏幕上的一個物理點。在高分辨率屏幕上，1個CSS像素可能對應多個物理像素。
• em: 相對單位，相對于父元素的字體大小。如果父元素字體大小為16px，則1em = 16px。
• rem (root em): 相對單位，相對于根元素(html)的字體大小。如果html的字體大小為16px，則1rem = 16px。
• fr (fraction unit): Grid布局專用單位，表示網格容器中可用空間的比例份額。當多個元素使用fr單位時，它們會按照比例分配剩余空間。

使用原則

• 組合使用原則：“全局用 rem，局部用 em，細節(jié)用 px”
• 若尺寸不依賴任何字體大小（如邊框）→ 用 px。
• 若尺寸僅依賴父元素 / 自身字體大小（如按鈕內邊距）→ 用 em。
• 若尺寸需要全局統(tǒng)一縮放（如頁面字體、容器寬度）→ 用 rem。

盒子模型

盒子模型（Box Model） 由 4 個部分從內到外依次組成：內容區(qū)（content）、內邊距（padding）、邊框（border）、外邊距（margin）。

• box-sizing: content-box; 設置模型為標準盒模型 (W3C 盒模型)

width,height 僅包含內容寬度，不包含內邊距、邊框、外邊距。
即總寬度 = 內容寬度 + 內邊距 + 邊框 + 外邊距。

• box-sizing: border-box; 設置模型為怪異盒模型 (IE 盒模型)

width,height 僅包含內容寬度，內邊距、邊框，但不包含外邊距。
即設置的 width 值 = 內容寬度 + 內邊距 + 邊框寬度。

position 定位

關鍵術語定義：

定位祖先元素：指元素的祖先節(jié)點中，position屬性值不為static的最近元素。對于absolute定位，它是定位的參考系；對于sticky定位，它決定了粘性效果的有效范圍。

包含塊(containing block)：元素布局和定位的參考框。
對于position為static或relative的元素，包含塊通常是其最近的塊級祖先元素的內容區(qū)域；
對于absolute定位元素，包含塊是其定位祖先元素的padding區(qū)域；
對于fixed定位元素，包含塊是視口。

position屬性值

position: static | relative | absolute | fixed | sticky;

• static: 靜態(tài)定位（默認值）,遵循常規(guī)流布局，不參與定位。

元素的position屬性值為static時，元素的top、right、bottom、left屬性值不會生效。

• relative: 相對定位 ,相對于其正常位置進行偏移，不脫離文檔流。自身在常規(guī)流中的位置仍然保留

增加top、right、bottom、left這些屬性后，便會相對于自身在常規(guī)流中的位置進行定位

• absolute: 絕對定位,相對于定位祖先元素進行偏移定位,元素將完全脫離文檔流。

絕對定位元素的定位參考系是其最近的「定位祖先元素」（即position值不為static的祖先元素）。
若祖先元素中存在position為relative、absolute、fixed或sticky的元素，則該元素會作為定位參考系。
若不存在任何定位祖先元素，元素會最終相對于根元素（html）進行定位，而非body元素。

• fixed: 固定定位,,相對于視口(viewport)進行偏移定位，元素將完全脫離文檔流

固定定位的元素不會隨頁面滾動而移動，始終保持在視口的固定位置。
固定定位元素會完全脫離文檔流，不占據(jù)任何布局空間

• sticky: 粘性定位，是一種位置感知的混合定位方式,優(yōu)先相對于最近的可滾動祖先元素定位

結合了 relative 和 fixed 定位的特點，根據(jù)滾動位置動態(tài)切換行為：

• 當元素在視口內可見（未達到觸發(fā)點）時，表現(xiàn)為 relative 定位，遵循正常文檔流
• 當元素滾動到指定的觸發(fā)位置（由top/right/bottom/left定義）時，表現(xiàn)為 fixed 定位，固定在視口的指定位置
• sticky 定位的元素始終相對于其最近的可滾動祖先元素或視口（視口滾動時）進行定位

sticky關鍵特性與注意事項：

1. 必須至少設置 top、right、bottom、left 四個偏移屬性中的一個，否則 sticky 定位不會生效，元素將表現(xiàn)為 static 定位
2. 元素的粘性效果僅在其包含塊（containing block）的范圍內有效，超出包含塊邊界后將停止固定
3. z-index 屬性在 sticky 元素中有效，可以控制層疊順序
4. 與 fixed 定位的區(qū)別：sticky 元素不會脫離文檔流布局空間，且其固定效果受限于父容器

float 浮動

浮動元素會部分脫離文檔流，不占據(jù)正常文檔流的垂直空間，但仍會在水平方向上影響周圍元素的排列（其他元素會環(huán)繞在其周圍）。

float: left | right | none | inherit;

• left: 元素向左浮動，將向左移動，直到遇到另一個浮動元素或父元素的邊緣。
• right: 元素向右浮動，將向右移動，直到遇到另一個浮動元素或父元素的邊緣。
• none: 元素不浮動，默認值。
• inherit: 規(guī)定從父元素繼承 float 屬性的值。

浮動元素的排列規(guī)則：

• 如果元素A是浮動的，且A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊（如果一行放不下這兩個元素，那么A元素會被擠到下一行）。
• 如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，即A的頂部總是和上一個元素的底部對齊。
• 元素浮動前在標準流中是豎向排列的，浮動后可以實現(xiàn)橫向排列效果。

注意：浮動元素默認會收縮寬度以適應內容（除非顯式設置寬度），且可能導致父元素高度塌陷等問題。

本來五個元素應該垂直排列，其中div1和div5都在標準流中。但由于div2和div3設置了float: right;、div4設置了float: left;，具體表現(xiàn)為：

• div2和div3會向右浮動，直到右邊緣
• div4會向左浮動，直到左邊緣
• div5會遵循標準流的排列規(guī)則，緊貼在div1下面
• 由于浮動元素會部分脫離文檔流，div4會浮動在div5的上方。

清除浮動

clear: left | right | both | none;

• left: 元素的左側不允許有浮動元素。
• right: 元素的右側不允許有浮動元素。
• both: 元素的左右兩側均不允許有浮動元素。
• none: 元素允許有浮動元素，默認值。

對于CSS的清除浮動(clear)，請記住：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

由于給div3加上了clear: right;，它會不允許右側有其他浮動元素，因此即使div2和div3都設置了float: right;，div3也會另起一行，緊貼在div2的下方排列;

布局模型

flex布局

• display: flex;設置為flex彈性布局,稱為Flex容器（flex container）
• 所有子元素自動成為容器成員，稱為Flex項目（flex item）

"main axis" 主軸，默認水平方向，從左到右。
"cross axis" 交叉軸，與主軸垂直，默認垂直方向，從上到下。
"main start" 主軸起點。
"main end" 主軸終點。
"cross start" 交叉軸起點。
"cross end" 交叉軸終點。
項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

flex容器屬性

注意：帶有-reverse后綴的值會保持布局軸的方向不變（水平/垂直），但反轉項目在該軸上的排列順序（起點變終點，終點變起點））,同時也會反轉對齊點（如justify-content: flex-start會變成從右向左對齊）。

flex-direction 屬性決定主軸的方向（即項目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

flex-wrap屬性定義，如果一條軸線排不下，如何換行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式

.box{
  flex-flow: <flex-direction> <flex-wrap>;
}

默認值為row nowrap

justify-content屬性定義了項目在主軸上的對齊方式

.box{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默認值）：左對齊。
flex-end：右對齊。
center：居中對齊。
space-between：兩端對齊，項目之間的間隔相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
space-evenly：項目與項目之間的間隔相等，項目與邊框的間隔也相等。

align-items屬性定義項目在交叉軸上如何對齊

.box{
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

align-content屬性定義了多根軸線的對齊方式

如果項目只有一根軸線，該屬性不起作用。

.box{
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
space-evenly：軸線與邊框的間隔也相等。
stretch（默認值）：軸線占滿整個交叉軸。

項目的屬性

order屬性定義項目的排列順序。

數(shù)值越小，排列越靠前，默認為0。

.item {
  order: <integer>;
}

flex-grow屬性定義項目的放大比例

默認為0，即如果存在剩余空間，也不放大。

.item {
  flex-grow: <number>;
}

如果所有項目的flex-grow屬性都為1，則它們將等比例放大，占滿剩余空間。

flex-shrink屬性定義了項目的縮小比例

默認為1，即如果空間不足，該項目將縮小。

.item {
  flex-shrink: <number>;
}

如果所有項目的flex-shrink屬性都為1，當空間不足時，它們將等比例縮小。
如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫

默認值為0 1 auto。后兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式

可覆蓋align-items屬性。
默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Grid布局

• display：grid; 則該容器是一個塊級元素
• display: inline-grid; 則容器元素為行內元素
  

網格線 grid line：劃分網格的線，稱為"網格線。網格線會被編號幫我們定位每一個網格項目。

• 如果有m列則有m+1根垂直網格線，有n行則有n+1根水平網格線
• 編號從左到右，從上到下為1，2，3排列；也有從右到左，從下到上的-1，-2，-3排列

網格單位 grid cell：網格容器里面一個個網格項目元素就是網格單位
網格軌道 grid track：一個網格軌道就是網格中兩條平行線之間的空間，就好比表格中行或列
網格區(qū)域 grid area：多個網格線包圍的總空間。網格區(qū)域可以包含任意數(shù)量的網格單元。

CSS Grid靈活布局函數(shù)與關鍵字

repeat()函數(shù)

該函數(shù)接收兩個參數(shù)，第一個參數(shù)為重復次數(shù)，第二個參數(shù)為需要重復的值
用于重復指定的網格軌道模式，簡化具有多個相同尺寸列或行的網格定義。

repeat(次數(shù), 尺寸);

示例：

/* 創(chuàng)建4個寬度均為100px的列 */
grid-template-columns: repeat(4, 100px);

/* 創(chuàng)建3個等寬列 */
grid-template-columns: repeat(3, 1fr);

minmax()函數(shù)

minmax()函數(shù)產生一個長度范圍，接收兩個參數(shù)，第一個參數(shù)為最小值，第二個為最大值。
定義一個尺寸范圍，網格軌道的大小將在這個范圍內自適應調整。

minmax(最小值, 最大值);

示例：

/* 創(chuàng)建列寬至少為100px，最多為1fr的3列 */
grid-template-columns: repeat(3, minmax(100px, 1fr));

auto關鍵字

根據(jù)內容自動調整網格軌道的大小。

/* 第一列寬度根據(jù)內容自動調整，第二列占據(jù)剩余空間 */
grid-template-columns: auto 1fr;

auto-fill關鍵字

在可用空間內盡可能多地創(chuàng)建指定尺寸的網格軌道，即使沒有足夠的內容填充。

/* 在容器中盡可能多地創(chuàng)建200px寬的列 */
grid-template-columns: repeat(auto-fill, 200px);

/* 結合minmax使用，創(chuàng)建響應式列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fit關鍵字

與auto-fill類似，但會折疊空的網格軌道，使非空軌道擴展填充剩余空間。

/* 在容器中創(chuàng)建適應內容的列，空列會被折疊 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Grid屬性

grid-template-columns/rows 網格軌道的寬高(列寬和行高)

• grid-template-columns：定義每一列的列寬
• grid-template-rows：定義每一行的行高

/* 直接定義行列數(shù)、列寬行高 */
/* 定義了三列 每一行50px */
grid-template-columns: 50px 50px 50px;
/* 定義了三行 每一行50px */
grid-template-rows: 50px 50px 50px;

/* 定義網格線的名稱（按需求而定）：大小前面使用數(shù)組可以定義網格線的名稱，可以有很多個名稱，多個名稱用空格隔開。 */
/* 定義了三列 每一行50px 并給網格線命名為a b c d */
grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
/* 定義了三行 每一行50px 并給網格線命名為a b c d */
grid-template-rows: [a] 50px [b] 50px [c] 50px [d];

grid-template-areas網格布局區(qū)域 和 grid-area網格項目定位

• grid-template-areas:該屬性一般與grid-area一起使用，grid-template-areas屬性在容器上制定各個區(qū)域并命名
• grid-area：grid-area屬性指定項目放在哪一個區(qū)域內。

grid-area為項目屬性

/* 網格布局區(qū)域 */
.container {
  grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";
}
/* 項目屬性 */
.header {
  grid-area: header;
}
省略...

. 表示空軌道，不占用任何空間
命名的網格區(qū)域必須包含在grid-template-areas屬性中定義的區(qū)域內。

grid-row-gap && grid-column-gap && grid-gap 設置間距

在現(xiàn)代瀏覽器中，相關屬性已經進行了簡化，grid- 前綴被移除

• grid-row-gap：設置行間距
• grid-column-gap：設置列間距
• grid-gap：同時設置行間距和列間距

/* 設置行間距為20px */
row-gap: 20px;

/* 設置列間距為30px */
column-gap: 30px;

/* 同時設置行間距為20px，列間距為30px */
grid-gap: 20px 30px;

Grid 布局中的簡寫屬性grid-template && grid-gap

• grid-template：grid-template-columns、grid-template-rows、grid-template-areas的簡寫屬性
• grid-gap：grid-row-gap、grid-column-gap的簡寫屬性

/* 定義網格布局 */
grid-template:
  "header header header" 50px /*第一行高度為50px*/
  "sidebar main main" 1fr /*第二行高度為1fr*/
  "footer footer footer" 50px /*第三行高度為50px*/
  / 200px 1fr 200px; /*列寬為200px 1fr 200px*/

/* 同時設置行間距為20px，列間距為30px */
grid-gap: 20px 30px;

grid-auto-flow 網格排列順序

grid 容器的子元素默認會按照先行后列的順序放置
grid-auto-flow 屬性決定，默認值是 row。也可以設成 column，變成先列后行

• row dense：按行排列，并嘗試填充空白區(qū)域。
• column dense：按列排列，并嘗試填充空白區(qū)域。

justify-items屬性、align-items屬性以及place-items屬性

控制所有網格項目在其單元格內的對齊方式

• justify-items：定義網格項目在單元格內沿行軸（水平方向）的對齊方式。
• align-items：定義網格項目在單元格內沿列軸（垂直方向）的對齊方式。
• place-items：是 justify-items 和 align-items 的簡寫屬性，用于同時設置這兩個屬性。

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;

start：項目在當前軸的起始位置
end：項目在當前軸的結束位置
center：項目在當前軸的中間位置
stretch：項目會拉伸以填充整個單元格。

justify-content 屬性、align-content 屬性以及 place-content 屬性

控制整個網格區(qū)域在Grid容器中的對齊方式

• justify-content：定義網格區(qū)域在容器內沿行軸（水平方向）的對齊方式。
• align-content：定義網格區(qū)域在容器內沿列軸（垂直方向）的對齊方式。
• place-content：是 justify-content 和 align-content 的簡寫屬性，用于同時設置這兩個屬性。

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>

start：項目在當前軸的起始位置
end：項目在當前軸的結束位置
center：項目在當前軸的中間位置
stretch：當網格總大小小于容器大小時，拉伸網格填滿整個容器
space-around：項目周圍留有空白。
space-between：項目之間有空白，第一個項目在起始位置，最后一個項目在結束位置。
space-evenly：項目之間有空白，包括第一個項目和最后一個項目。

grid-auto-columns&grid-auto-rows 隱式網格軌道的寬高(列寬和行高)

grid-auto-columns 和 grid-auto-rows 定義了當網格項超出顯式網格范圍時，瀏覽器自動創(chuàng)建的列和行的大小，即隱式網格的大小

• grid-auto-columns：定義隱式網格列的寬度。
• grid-auto-rows：定義隱式網格行的高度。

如果不指定這兩個屬性，瀏覽器完全根據(jù)單元格內容的大小，決定新增網格的列寬和行高

項目屬性

grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性

• grid-column-start屬性：網格項在列方向的起始網格線。
• grid-column-end屬性：網格項在列方向的結束網格線。
• grid-row-start屬性：網格項在行方向的起始網格線。
• grid-row-end屬性：網格項在行方向的結束網格線。

指定網格線的起始和結束位置，來定義網格項占據(jù)的列和行范圍

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];
  grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];
}
/* 直接寫入索引 */
#div1 {
    background-color: red;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
/* 使用命名網格線 */
#div2 {
    background-color: green;
    grid-row: c / d;
    grid-column: b / c;
}

grid-column屬性：是 grid-column-start 和 grid-column-end 的簡寫屬性。
grid-row屬性：是 grid-row-start 和 grid-row-end 的簡寫屬性。

• span 關鍵字：表示網格項跨越多列或多行

#div3 {
    background-color: blue;
    grid-column: 4 / 5;
    grid-row: 2 / span 3;
}

• z-index屬性：指定網格項目的重疊順序。

使用這四個屬性如果產生了重疊，則可以使用z-index指定項目的重疊順序。

黃色覆蓋了藍色

#div4 {
    background-color: yellow;
    grid-column: 3 / 5;
    grid-row: 4 / 5;
    z-index: 1;
}

瀏覽器會根據(jù)z-index屬性值，將項目按照從大到小的順序進行繪制。
因此，z-index 較大的項目會覆蓋 z-index 較小的項目。
默認值是0，表示不重疊。

justify-self 屬性、align-self 屬性以及 place-self 屬性

控制單個網格項目在其單元格內的對齊（覆蓋容器的items屬性設置）

• justify-self：定義網格項目在單元格內沿行軸（水平方向）的對齊方式。
• align-self：定義網格項目在單元格內沿列軸（垂直方向）的對齊方式。
• place-self：是 justify-self 和 align-self 的簡寫屬性，用于同時設置這兩個屬性。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

grid-area 屬性

通過grid-area屬性，將網格項分配給一個命名的網格區(qū)域。