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

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关键特性与注意事项：

1. 必须至少设置 top、right、bottom、left 四个偏移属性中的一个，否则 sticky 定位不会生效，元素将表现为 static 定位
2. 元素的粘性效果仅在其包含块（containing block）的范围内有效，超出包含块边界后将停止固定
3. z-index 属性在 sticky 元素中有效，可以控制层叠顺序
4. 与 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属性，将网格项分配给一个命名的网格区域。