深入理解CSS精简版(中 : 布局部分)

上一篇：深入理解CSS精简版 (上 : 基础部分)

五 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 给网格线和网格区域命名

• 给网格线命名

// 定义三条垂直网格线的名称。
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];

• 给区域命名

// 容器 列之间用空格分隔，行之间用换行，用. 空出一个单元格
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 可以为不同大小视口提供不同分辨率的图片资源，以节省资源。