CSS 知识阶段总结

Flex 布局

基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

两根轴线

• 主轴 ：
  由 flex-direction 定义，有四种取值row(default)、row-reverse、column、column-reverse。
• 交叉轴（次轴）：
  与主轴垂直。

Flex 容器

我们把一个容器的 display 属性值改为 flex 或者 inline-flex，容器中的直系子元素就会变为 flex 元素。

容器中的所有 flex 元素的默认行为：

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。
• flex-wrap 属性为 nowrap。

可以将 flex-direction 和 flex-wrap 简写成flex-flow ，第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。

Flex 元素的属性

1. flex-grow

   若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸，占据此方向轴上的可用空间。如果有其他元素也被允许延展，那么他们会各自根据 flex-grow 的值，按照比例占据可用空间的一部分。

2. flex-shrink

   与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给 flex-shrink 属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。注意：在计算 flex 元素收缩的大小时，它的最小尺寸也会被考虑进去

3. flex-basis

   定义了该元素的空间大小，默认值是 auto 。如果元素被设定了宽度 100px ，那么 flex-basis 的值为 100px 。

Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。例如：flex: 10 1 200px 。

另外还有预定义的简写形式：

• flex: initial ：相当于 flex: 0 1 auto。
• flex: auto ：相当于 flex: 1 1 auto 。
• flex: none ：相当于 flex: 0 0 auto 。
• flex: <positive-number> ：相当于 flex: <positive-number> 1 0 。

元素的对齐和空间分配

• justify-content ：用来使元素在主轴方向上对齐。可用的值如下：
  • stretch
  • flex-start (default)
  • flex-end
  • center
  • space-around
  • space-between
• align-items ：使元素在交叉轴方向对齐。可用的值如下：
  • stretch (default)
  • flex-start
  • flex-end
  • center

练习

一个青蛙小游戏可以帮助练习flex布局。

定位

position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

定位类型

• static ：

  正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative ：

  元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。

• absolute ：

  被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置 margin ，且不会与其他边距合并。

• fixed

  被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于 viewport 的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

• sticky

  在 viewport 滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。该值总是创建一个新的层叠上下文。因为兼容性不好，不常用。

层叠上下文

层叠上下文的层级：

• Root
  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

浏览器渲染过程

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. DOM + CSSOM –> 渲染树（rendering tree）。
4. 布局（Layout），计算每个节点的几何信息。
5. 绘制（Paint），将各个节点绘制到屏幕上。

优化关键渲染路径就是指最大限度缩短执行上述第 1 步至第 5 步耗费的总时间。 这样一来，就能尽快将内容渲染到屏幕上，此外还能缩短首次渲染后屏幕刷新的时间，即为交互式内容实现更高的刷新率。

优化关键渲染路径的常规步骤如下:

1. 对关键路径进行分析和特性描述: 资源数、字节数、长度。
2. 最大限度减少关键资源的数量: 删除它们，延迟它们的下载，将它们标记为异步等。
3. 优化关键字节数以缩短下载时间（往返次数）。
4. 优化其余关键资源的加载顺序: 尽早下载所有关键资产，以缩短关键路径长度。

CSS 动画的两种做法（transition 和 animation）

transition

是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

注意： display: none -> display: block无法过渡，一般改成 visibility: hidden -> visibility: visible 。

animation

是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

是在不同 keyframe 之间切换时的过渡效果。

keyframe 写法：

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  100% { top: 0; }
}
复制代码

或

@keyframes identifier {
  from { top: 0; }
  50% { top: 30px; left: 20px; }
  to { top: 0; }
}
复制代码

另外，关键帧中出现的 !important 将会被忽略。

参考自：

1. flex 布局的基本概念
2. position
3. 层叠上下文
4. 渲染树构建、布局及绘制
5. 优化关键渲染路径
6. transition
7. animation
8. @keyframes