五 FlexBox
1. 概念
1.1 flex 简介
子元素按照主轴排列,垂直于主轴的是副轴。

2. 属性 & 单位
2.1 容器属性
-
flex-direction: 指定主轴方向
- row(默认) / row-reverse / column / column-reveres
-
flex-wrap: 是否换行
- nowrap(默认) / wrap / warp-reverse
-
flex-flow: flex-direction 、flex-direction 简写
-
justify-content: 控制子元素在主轴上的位置
- flex-start(默认) / flex-end / flex-center / space-between / space-around
-
align-items: 控制子元素在副轴上的位置
- stretch(默认) / baseline / flex-start / flex-end / center
-
align-content: 控制子元素整体在容器中的位置
- flex-start(默认) / flex-end / flex-center / stretch / space-between / space-around:
2.2 子元素属性
- flex-grow: 决定子元素填充未使用空间的比例
- flex-shrink: 子元素宽度超出父元素时,决定收缩比例。
- flex-basis: 元素初始大小。
- auto(默认) / length:
- flex: flex-grow、flex-shrink、flex-basis 简写
- none: 0 0 auto
- auto: 1 1 auto
- x y z : 可省略,省略某参数默认值为 x = 1 ,y = 1, z = 0%
- align-self: 子元素在副轴上的位置,覆盖 algin-items 的值
- order: 子元素位置排序
3. 其他
3.1 flex 子元素布局添加外边距填充剩余空间
外边距设置 auto,可填充所有剩余空间。

六 Grid
1. 概念
1.1 Grid 简介
定义由行和列组成的二维布局,当要求元素在两个维度都对齐的时候,使用 Grid 布局。
1.2 Grid 布局组成要素
-
网格线: 网格线构成了网格的框架,grid-gap 就位于网格线。
-
网格轨道: 两条相邻的网格线之间就是网格轨道,有水平轨道和垂直轨道两种。
-
网格单元: 网格上的单个空间,水平和垂直的网格轨道重叠的部分。
-
网格区域: 网格上的矩形区域,由一个或多个网格单元组成。位于两条水平网格线和垂直网格线之间。
显式/隐式网格
- 显式网格: 使用 grid-template-columns + grid-template-rows 声明的网格
- 隐式网格: 超出显示网格定义的部分
2. 属性 & 单位
2.1 容器属性
-
grid-template-columns/rows: 显式生成的单元网格,列/行设置
- none(默认值) / auto / max-content / min-content / length
-
grid-auto-columns/rows 隐式(自动生成的)网格单元列/行的大小
- auto(默认) / fit-content() / max-content / min-content / minmax(min,max) / length / %
-
grid-auto-flow: 优先放满 列/行
- row / column + ?dense
-
grid-template-areas: 定义网格区域
-
grid-column / row-gap: 列/行间距
-
grid-gap: grid-column-gap、grid-row-gap 简写
-
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: justify-content、align-content 简写
-
justify-items: 区块水平对齐
- start / end / center / stretch
-
align-item: 区块垂直对齐
- start / end / center / stretch
-
place-items: justify-items、align-item 简写
2.2 子元素属性
-
grid-column/row-start/end: 起/始 列/行
-
grid-column/row 起始列/行
-
grid-area: 区域名或起始列/行简写
-
justify-self: 单独设置区块垂直对齐
- start / end / center / stretch
-
align-self: 单独设置区块垂直对齐
- start / end / center / stretch
-
place-self: justify-self、align-self 简写
2.3 单位
-
fr: 类似 flex-flow
-
minmax: minmax(最小宽度,最大宽度)
-
repect(): 重复生成列/行
-
auto-fill: 尽量多生成网格,会出现空网格。
-
auto-fit: 不会出现空网格,会让非空网格填满空白区域
3. 其他
3.1 给网格线和网格区域命名
- 给网格线命名
css
// 定义三条垂直网格线的名称。
grid-template-columns: [start] 1fr [center] 1fr [end];
// 定义网格名称的同时,定义了一个[left]区域(left-start 和 left-end 之间范围)
grid-template-columns: [left-start] 1fr [center] 1fr [left-end];
// 重名线,使用start 1 、start 2
grid-template-columns: [start] 1fr [start] 1fr [end];
- 给区域命名
css
// 容器 列之间用空格分隔,行之间用换行,用. 空出一个单元格
grid-template-areas:
"area1 area2"
". area3"
// 子元素
grid-area:area1
// 容器 一个区域占多个网格
grid-template-areas:
"area1 area1"
". area3"
3.2 CSS 特性查询
- @supports<特性>: 支持才会使用里面的样式规则
- @supports not<特性>: 不支持才会使用里面的样式规则
- @supports not <特性> or <特性>: 支持其中一个就使用里面的规则
- @supports not <特性> and <特性>: 两个都支持才使用里面的规则
3.3 CSS 文字转换
- text-transform: 文字转大小写
七 定位和层叠上下文
1. 概念
1.1 定位
将元素将文档里中移走。包含以下几种:
- 固定定位: 以视口作为包含块
- 绝对定位: 以 position 不为 static 的祖先元素作为包含块
- 相对定位: 设置偏移,不影响周围元素布局
- 粘性定位: 相对定位和固定定位的结合体,正常情况下,元素随页面滚动,当到达某个位置,会锁定
1.2 层叠上下文
给一个定位元素加上 z-index 的时候,这个元素就是层叠上下文的根元素,里面所有的定位元素的 z-index 只会在这个元素里面层叠,不会和外面的其他元素互相影响。
层叠上下文中元素叠放顺序:
- 层叠上下文的根元素
- z-index 为负数的定位元素
- 非定位元素
- z-index 为 auto 的元素
- z-index 为正数的元素
1.3 z-index
定位元素按 z-index 层叠排列,数字越大越靠前,数字一样的情况下,按渲染时间越后越靠前。 定位元素 z-index 非负数在非定位元素之上,反之在之下。
2. 属性 & 单位
2.1 属性
-
position: 定位方式
- static(默认) / flex / absolute / relative / sticky
-
z-index: 层级
3. 其他
3.1 实现三角形
设置较粗的边框,宽高设置为 0 ,每一条边就是一个三角形,要留哪一个方向的,保留对应的边即可。
八 响应式设计
1. 概念
1.1 响应式设计原则
- 移动优先: 优先构建移动版布局,再构建桌面版。
- @media 规则: 媒体查询,为不同大小的视口定制样式。
- 流式布局: 允许容器根据视口宽度缩放尺寸,通常不会有明确的宽度。
1.2 尺寸断点
断点可以理解为适配的尺寸的边界点,如大、中、小屏幕对应的 min-width
2. 属性 & 单位
2.1 媒体查询
-
and 或 or
- and 符连接的代表两个条件都符合时才生效
- ,(逗号)连接的代表两个符合其中一个就生效
-
媒体特征
- min-width / max-width / min-height / max-height : 匹配符合条件的宽高
- orientation: landscape(视口宽度大于高度) / portrait(视口高度大于宽度)
- min-resolution / max-resolution : 匹配屏幕分辨率 1dppx 表示每一 css 像素包含的物理像素点
-
媒体类型
- @media screen / media print : 屏幕或者打印机
2.2 使用 srcset 提供对应的图片
分辨率低的屏幕显示高于自身分辨率的图片,展示的图片分辨率并不能突破硬件限制。 使用 srcset 可以为不同大小视口提供不同分辨率的图片资源,以节省资源。