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，細節用 px”
若尺寸不依賴任何字體大小（如邊框）→ 用 px。
若尺寸僅依賴父元素 / 自身字體大小（如按鈕內邊距）→ 用 em。
若尺寸需要全局統一縮放（如頁面字體、容器寬度）→ 用 rem。

盒子模型

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

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

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

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

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

position 定位

關鍵術語定義：

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

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

position屬性值

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

static: 靜態定位（默認值）,遵循常規流佈局，不參與定位。

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

relative: 相對定位 ,相對於其正常位置進行偏移，不脱離文檔流。自身在常規流中的位置仍然保留

增加top、right、bottom、left這些屬性後，便會相對於自身在常規流中的位置進行定位

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

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

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

固定定位的元素不會隨頁面滾動而移動，始終保持在視口的固定位置。
固定定位元素會完全脱離文檔流，不佔據任何佈局空間

sticky: 粘性定位，是一種位置感知的混合定位方式,優先相對於最近的可滾動祖先元素定位

結合了 relative 和 fixed 定位的特點，根據滾動位置動態切換行為：

當元素在視口內可見（未達到觸發點）時，表現為 relative 定位，遵循正常文檔流

當元素滾動到指定的觸發位置（由top/right/bottom/left定義）時，表現為 fixed 定位，固定在視口的指定位置

sticky 定位的元素始終相對於其最近的可滾動祖先元素或視口（視口滾動時）進行定位

sticky關鍵特性與注意事項：

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

float 浮動

浮動元素會部分脱離文檔流，不佔據正常文檔流的垂直空間，但仍會在水平方向上影響周圍元素的排列（其他元素會環繞在其周圍）。

float: left | right | none | inherit;

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

浮動元素的排列規則：

如果元素A是浮動的，且A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊（如果一行放不下這兩個元素，那麼A元素會被擠到下一行）。

如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，即A的頂部總是和上一個元素的底部對齊。

元素浮動前在標準流中是豎向排列的，浮動後可以實現橫向排列效果。

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

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

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

清除浮動

clear: left | right | both | none;

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

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

由於給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" 交叉軸終點。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做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屬性定義項目的排列順序。

數值越小，排列越靠前，默認為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屬性定義了在分配多餘空間之前，項目佔據的主軸空間（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：一個網格軌道就是網格中兩條平行線之間的空間，就好比表格中行或列
網格區域 grid area：多個網格線包圍的總空間。網格區域可以包含任意數量的網格單元。

CSS Grid靈活佈局函數與關鍵字

repeat()函數

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

repeat(次數, 尺寸);

示例：

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

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

minmax()函數

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

minmax(最小值, 最大值);

示例：

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

auto關鍵字

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

/* 第一列寬度根據內容自動調整，第二列佔據剩餘空間 */
grid-template-columns: auto 1fr;

auto-fill關鍵字

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

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

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

auto-fit關鍵字

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

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

Grid屬性

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

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

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

/* 定義網格線的名稱（按需求而定）：大小前面使用數組可以定義網格線的名稱，可以有很多個名稱，多個名稱用空格隔開。 */
/* 定義了三列 每一行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網格佈局區域和 grid-area網格項目定位

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

grid-area為項目屬性

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

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

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

在現代瀏覽器中，相關屬性已經進行了簡化，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：按行排列，並嘗試填充空白區域。
column dense：按列排列，並嘗試填充空白區域。

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 屬性

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

justify-content：定義網格區域在容器內沿行軸（水平方向）的對齊方式。
align-content：定義網格區域在容器內沿列軸（垂直方向）的對齊方式。
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 定義了當網格項超出顯式網格範圍時，瀏覽器自動創建的列和行的大小，即隱式網格的大小

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

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

項目屬性

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

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

指定網格線的起始和結束位置，來定義網格項佔據的列和行範圍

.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;
}

瀏覽器會根據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屬性，將網格項分配給一個命名的網格區域。

Nobody_Cares 動態日志

@NobodyCares

標簽

前端 (1157)

數據庫 (310)

軟件設計 (80)

軟件工程 (30)

動態