本篇简单介绍了 css 布局体系。包括 Flow layout、display、floats、position
Flow layout(Normal Flow)
CSS FormattingContext 分为两大类：
Flow layout 指浏览器在 不施加任何额外布局特性（如 float、position、display）时，根据 HTML 源码顺序排布元素的默认方式，有 block 和 inline 两种
在 flow layout 中，有如下特点：
BlockFormattingContext 有如下特点
InlineFormattingContext (IFC) 有如下特点
打破 Flow layout
在默认文档流里，元素按照「块级自上而下 / 行内自左向右」排版。要制造多栏、悬浮、吸顶等效果，就需要让某些元素跳出或改变它们在普通流中的角色。CSS 提供了三个关键属性：display、position、float。
display position float 有以下优先级
display: noneposition: absolute/fixedfloat 不为 none其他情况
指定值
计算值
inline-table
table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block
block
其他
与指定值相同
display
CSS Display Module Level 3 引入了双值语法，格式为：
display: [ || ] |
=
block |
inline |
run-in
=
flow |
flow-root |
table |
flex |
grid |
ruby
=
inline-block |
inline-table |
inline-flex |
inline-grid注:
外部显示类型 ()
外部显示类型决定元素在流式布局（flow layout）中的角色，垂直还是水平排列
注: 非流式布局（flex、grid）会覆盖默认的 flow-layout。此时 display-outside 不起作用。
内部显示类型 ()
内部显示类型决定元素如何布局其子元素，及其自身是 inline-box 还是 block-box。
Flex 布局
Flex（弹性盒子布局）是一种一维布局方法，专门用于在容器中分配空间和对齐项目。它特别适用于创建响应式的组件布局和处理不同尺寸的项目。
基本概念
HTML 元素层面
弹性布局系统层面
核心CSS属性
.container {
display: grid; /* 创建块级网格容器 */
display: inline-grid; /* 创建内联网格容器 */
}弹性容器
.container {
flex-direction: row; /* 默认：主轴为水平方向，从左到右 */
flex-direction: row-reverse; /* 主轴为水平方向，从右到左 */
flex-direction: column; /* 主轴为垂直方向，从上到下 */
flex-direction: column-reverse; /* 主轴为垂直方向，从下到上 */
}.container {
flex-wrap: nowrap; /* 默认：不换行，项目可能溢出 */
flex-wrap: wrap; /* 换行，第一行在上方 */
flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
/* 简写属性 */
flex-flow: row wrap; /* flex-direction flex-wrap */
}弹性项
.item {
/* 分别设置 */
flex-grow: 0; /* 默认：不放大 */
flex-shrink: 1; /* 默认：可以缩小 */
flex-basis: auto; /* 默认：项目本来大小 */
/* 简写属性 */
flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 0 1 auto; /* 默认值：flex-grow flex-shrink flex-basis */
flex: none; /* flex: 0 0 auto; 不伸缩 */
flex: auto; /* flex: 1 1 auto; 完全弹性 */
/* 常用模式 */
flex: 1; /* 平均分配剩余空间 */
flex: 2; /* 获得2倍的剩余空间 */
flex: 0 0 200px; /* 固定宽度，不伸缩 */
}
.item {
order: 0; /* 默认：按DOM顺序 */
order: -1; /* 排在前面 */
order: 1; /* 排在后面 */
}对齐属性Grid 布局
CSS Grid 是一种强大的二维布局系统，它为创建复杂的网页布局提供了灵活且直观的解决方案。与 Flexbox 专注于一维布局不同网页布局有哪几种，Grid 能够同时处理行和列网页布局有哪几种，让开发者能够轻松创建复杂的网格布局。
基本概念
HTML 元素层面
网格布局系统层面
Grid Track（网格轨道）：网格列或网格行的通用术语，是两条相邻网格线之间的空间。Grid Cell（网格单元）：网格行和网格列的交集。Grid Area（网格区域）：用于布局一个或多个网格项的逻辑空间。核心CSS属性
.container {
display: grid; /* 创建块级网格容器 */
display: inline-grid; /* 创建内联网格容器 */
}显式网格定义
.container {
/* 基础用法：定义网格轨道 */
grid-template-columns: 100px 200px 100px; /* 3条列轨道 */
grid-template-rows: 50px 100px; /* 2条行轨道 */
/* 命名网格线：为网格线命名以便引用 */
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end];
/* fr 单位：按比例分配可用空间 */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例的3条轨道 */
/* repeat() 函数：重复模式 */
grid-template-columns: repeat(3, 1fr); /* 重复创建3条等宽轨道 */
grid-template-columns: repeat(4, [col-start] 100px [col-end]); /* 重复轨道和网格线名 */
/* 响应式轨道：根据容器大小自动调整 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列数 */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 填充式布局 */
}.container {
/* 定义命名的网格区域 */
grid-template-areas:
"header header header" /* header区域占用3个网格单元 */
"sidebar main main" /* sidebar占1个，main占2个网格单元 */
"footer footer footer"; /* footer区域占用3个网格单元 */
/* 配合轨道定义使用 */
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 40px;
}隐式网格定义
.container {
/* 显式定义2列网格 */
grid-template-columns: repeat(2, 100px);
/* 当网格项被放置到第3列以外时，自动创建的列轨道宽度为50px */
grid-auto-columns: 50px;
/* 当网格项被放置到显式行以外时，自动创建的行轨道高度 */
grid-auto-rows: minmax(100px, auto); /* 最小100px，内容自适应 */
grid-auto-rows: 80px; /* 固定高度 */
}
.container {
/* 网格项放置方向 */
grid-auto-flow: row; /* 默认：优先填充行，行满后换到下一行 */
grid-auto-flow: column; /* 优先填充列，列满后换到下一列 */
/* 紧密排列算法 */
grid-auto-flow: row dense; /* 按行填充，回填前面的空隙 */
grid-auto-flow: column dense; /* 按列填充，回填前面的空隙 */
}网格项定位
.item {
/* 方式1：使用网格线序号（从1开始） */
grid-column-start: 1; /* 从第1条列网格线开始 */
grid-column-end: 3; /* 到第3条列网格线结束 */
grid-row-start: 2; /* 从第2条行网格线开始 */
grid-row-end: 4; /* 到第4条行网格线结束 */
/* 方式2：简写形式 */
grid-column: 1 / 3; /* 从列线1到列线3 */
grid-row: 2 / 4; /* 从行线2到行线4 */
/* 方式3：跨越指定数量的轨道 */
grid-column: span 2; /* 从当前位置跨越2条列轨道 */
grid-row: span 3; /* 从当前位置跨越3条行轨道 */
/* 方式4：最简写 */
grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}/* 前提：在网格容器中定义了命名网格线 */
.container {
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end];
}
.item {
/* 方式1：使用命名网格线 */
grid-column-start: sidebar-start; /* 从名为sidebar-start的列网格线开始 */
grid-column-end: main-end; /* 到名为main-end的列网格线结束 */
grid-row-start: header-start; /* 从名为header-start的行网格线开始 */
grid-row-end: content-end; /* 到名为content-end的行网格线结束 */
/* 方式2：简写形式 */
grid-column: sidebar-start / main-end; /* 从sidebar-start到main-end */
grid-row: header-start / content-end; /* 从header-start到content-end */
/* 方式3：混合使用命名网格线和序号 */
grid-column: sidebar-start / 3; /* 从命名线到第3条网格线 */
grid-row: 1 / content-end; /* 从第1条网格线到命名线 */
/* 方式4：命名网格线与span结合 */
grid-column: sidebar-start / span 2; /* 从sidebar-start开始跨越2个轨道 */
/* 方式5：重名网格线的处理 */
grid-column: main-start 2; /* 如果有多条main-start线，选择第2条 */
}.item {
grid-column-start: header; /* 查找header失败，查找 header-start */
grid-column-end: header; /* 查找header失败，查找 header-end */
}/* grid-template-areas 会为每个命名区域自动生成对应的网格线名称 */
.container {
grid-template-areas: "header header header";
/* 自动生成：header-start 和 header-end 网格线 */
}
/* 网格项通过区域名称直接定位 */
/* 自动定位到header区域。本质上是查找 header-start header-end 网格线组成的区域 */
.header { grid-area: header; }
对齐属性
见 盒模型对齐属性
盒模型对齐属性（Box Alignment）
根据 CSS Box Alignment Module Level 3 规范，盒模型对齐属性为各种CSS布局模型（块布局、表格布局、弹性布局和网格布局）提供了统一的对齐控制。
轴线概念（Axis Concepts）
在理解对齐属性之前，需要先了解CSS中的轴线概念。不同的布局模型使用不同的轴线术语，但它们都基于文档的书写模式。
逻辑轴线（Logical Axes）
书写模式对轴线的影响
/* 水平书写模式（默认） */
.horizontal {
writing-mode: horizontal-tb;
/* 内联轴：水平方向（左→右） */
/* 块轴：垂直方向（上→下） */
}
/* 垂直书写模式 */
.vertical {
writing-mode: vertical-rl;
/* 内联轴：垂直方向（上→下） */
/* 块轴：水平方向（右→左） */
}
.vertical-lr {
writing-mode: vertical-lr;
/* 内联轴：垂直方向（上→下） */
/* 块轴：水平方向（左→右） */
}不同的布局对应的轴线
对齐关键字（Alignment Keywords）
对齐关键字定义了元素在容器中的对齐方式，这些关键字在不同的对齐属性中通用。
/* 逻辑方向关键字（考虑书写方向） */
.container {
justify-content: start; /* 起点对齐 */
justify-content: end; /* 终点对齐 */
justify-content: center; /* 居中对齐 */
}
/* 物理方向关键字（仅部分属性支持） */
.container {
justify-content: left; /* 物理左侧 */
justify-content: right; /* 物理右侧 */
}.container {
align-items: baseline; /* 基线对齐 */
align-items: first baseline; /* 首行基线对齐 */
align-items: last baseline; /* 末行基线对齐 */
}.container {
justify-content: stretch; /* 拉伸填满 */
justify-content: space-between; /* 两端对齐，项目间间隔相等 */
justify-content: space-around; /* 环绕分布，项目两侧间隔相等 */
justify-content: space-evenly; /* 均匀分布，所有间隔都相等 */
}.container {
/* 安全对齐：防止内容溢出不可见 */
align-content: safe center; /* 如果居中会导致溢出，则回退到起点对齐 */
justify-content: unsafe center; /* 强制居中，即使会导致溢出 */
}内容分布（Content Distribution）
内容分布属性控制容器内容作为整体在容器中的对齐方式。
自身对齐（Self Alignment）
自身对齐属性控制单个项目在其分配的空间内的对齐方式。
默认对齐（Default Alignment）
默认对齐属性设置容器内所有项目的默认对齐方式。
间距（Gaps Between Boxes）
间距属性在容器项目之间创建固定的空白空间。
注册会员查看全部内容……
限时特惠本站每日持续更新海量各大内部创业教程，年会员只要98元，全站资源免费下载
点击查看详情
站长微信：9200327
