• Scroll progress animations in CSS

  • 把 css animation 绑定到 scroll progress timeline

  1 2 3

  .progress { animation-timeline: scroll(); }

  • scroll() 函数指定滚动容器和轴。默认值为 scroll(nearest block) ，也可以绑定到根容器 scroll(root block)

  1 2 3 4 5 6 7 8

  .progress { animation-timeline: scroll(root); // 结合关键帧动画 // 可简写为：animation: scaleProgress auto linear; animation-name: scaleProgress; animation-duration: auto; animation-timing-function: linear; }

• Using HTML landmark roles to improve accessibility

  • aria 规定了 8 个标志角色

  • banner

  • navigation

  • search

  • main

  • region

  • complementary

  • form

  • contentinfo

  • 使用 role 属性标记

    • <div class="banner" role="banner"></div>
      

  • 部分 html 元素自带角色标记

CSS colors

css 支持使用多种语法描述颜色

• keywords
• hex codes
• 使用 16 进制表示 #RRGGBB
• color function
  • rgb/rgba
    • rgb() 前三个参数分别指定 red, green, blue 通道，最后一个参数指定 alpha 通道
  • hsl/hsla
    • hsl() 的三个参数分别是色调、饱和度和明度，最后一个参数指定 alpha 通道
  • hwb
    • hwb() 的三个参数分别是色调、白度和黑度，最后一个参数指定 alpha 通道
  • lch
  • lab
  • color
    • 指定预定义的颜色空间
    • color(srgb …)
    • color(display-p3 …)
    • …

sRGB 色域可以用 16 进制, rgb/rgba, hsl/hsla, hwb 直接指定

1
2
3
4
5

// 不同用法表示同一个颜色
color: #ff0000;
color: rgb(255 0 0 / 0.5);
color: hsl(0 100% 50%);
color: hwb(0 0% 0%);

将 HSL 颜色转为 sRGB

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * @param {number} hue - Hue as degrees 0..360
 * @param {number} sat - Saturation in reference range [0,100]
 * @param {number} light - Lightness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hslToRgb(hue, sat, light) {
  hue = hue % 360;

  if (hue < 0) {
    hue += 360;
  }

  sat /= 100;
  light /= 100;

  function f(n) {
    let k = (n + hue / 30) % 12;
    let a = sat * Math.min(light, 1 - light);
    return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  }

  return [f(0), f(8), f(4)];
}

将 sRGB 颜色转为 HSL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
 */
function rgbToHsl(red, green, blue) {
  let max = Math.max(red, green, blue);
  let min = Math.min(red, green, blue);
  let [hue, sat, light] = [NaN, 0, (min + max) / 2];
  let d = max - min;

  if (d !== 0) {
    sat = light === 0 || light === 1 ? 0 : (max - light) / Math.min(light, 1 - light);

    switch (max) {
      case red:
        hue = (green - blue) / d + (green < blue ? 6 : 0);
        break;
      case green:
        hue = (blue - red) / d + 2;
        break;
      case blue:
        hue = (red - green) / d + 4;
    }

    hue = hue * 60;
  }

  return [hue, sat * 100, light * 100];
}

参考

BFC 是什么

css 2.1 规范。BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

目的是： 形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

如何触发 BFC

为元素设置一些 CSS 属性，就能触发 BFC ，即生成一个完全独立的空间。、

最常用触发规则：

1. float不为 none;
2. positiion 不为 static 和 relative;
3. overflow 为 auto, scroll 和 hidden;
4. display 的值为 table-cell 或 inline-block.

BFC 可以解决什么问题

1. 解决浮动元素令父元素高度坍塌的问题

正常情况：

1
2
3
4
5
6

<div class="father">
  <div class="son left">元素A</div>
  <div class="son right">元素B</div>
  <div class="son left">元素C</div>
  <div class="son right">元素D</div>
</div>

1
2
3
4
5
6
7

.father {
  background: #333;
}
.son {
  background: #ccc;
  outline: 1px dashed red;
}

为子元素添加浮动：

1
2
3
4
5
6

.left {
  float: left;
}
.right {
  float: right;
}

此时可以看到，father 元素已经不可见了(高度坍缩为 0 了)。

为 父元素 设置 BFC :

1
2
3
4
5

.father {
  background: #333;
  // 可根据具体情况设置适合的 css 属性来设置 BFC
  overflow: hidden;
}

可以看到，再设置了 BFC 后，father 元素再次可见，并且完全包裹住了内部浮动的子元素。

2. 解决两栏自适应布局问题(利用 float 实现时)

未设置 BFC 时：

1
2
3
4

<body>
  <div class="left"></div>
  <div class="main">...省略大量字符</div>
</body>

1
2
3
4
5
6
7
8
9
10

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: lightgreen;
}
.main {
  height: 140px;
  background: lightblue;
}

可以看到 main 元素的内容溢出到了左侧，要解决这个问题我们就可以为 main 元素设置 BFC

1
2
3
4
5
6

.main {
  height: 140px;
  background: lightblue;
  // 可根据具体情况设置适合的 css 属性来设置 BFC
  overflow: hidden;
}

此时main 元素就是一个独立的空间，不会和浮动的 left 重合了。

3. 解决外边距垂直方向重合的问题

一般情况下，兄弟元素的外边距在垂直方向会取两者的最大值而不是取和。

1
2
3
4

<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.father {
  outline: 1px solid red;
}
.son1 {
  height: 20px;
  margin-bottom: 20px;
  background: lightgreen;
}
.son2 {
  height: 30px;
  margin-top: 30px;
  background: lightblue;
}

可以看到，虽然咱们分别给 son1 和 son2 都设置了 margin 但是，他们之间的 margin 却只有 30px，要解决这个问题就可以通过设置 BFC 来实现。

1
2
3
4
5
6

<div class="father">
  <div class="son1"></div>
  <div class="bfc">
    <div class="son2"></div>
  </div>
</div>

1
2
3
4

.bfc {
  // 可根据具体情况设置适合的 css 属性来设置 BFC
  overflow: hidden;
}

可以看到，此时 son1 和 son2 元素的外边距都发挥了作用，不再重合在一起了。

注意

触发 BFC 的属性很多，但是选择要慎重，要考虑到实际的情况，避免影响到其他元素的布局，比如说，用 float 触发 BFC 的时候就要注意 float 可能对布局产生的影响所以一定要想清楚，用什么方式去处触发他。

这些问题的其他解决方案

要解决上述几个问题，其实不是只有设置 BFC 这一个解决方案。例如：

1. 解决浮动元素令父元素高度坍塌的问题

   • 让父元素也浮动起来，父元素和子元素一起脱离文档流。(代码量少，可能影响后面元素的排列)
   • 给父元素添加一个固定高度。(只适用于已知子元素高度的情况，不灵活，难以维护)
   • 在浮动的子元素后添加空元素，设置(clear: both)来清除浮动。(会增加无意义便签，不利于维护)
   • 为浮动的最后一个子元素设置伪元素(:after: {clear: both})。(同上)

2. 解决两栏自适应布局问题

   • 左边左浮动，右边设置左侧宽度的 margin-left
   • 左边绝对定位，右边设置左侧宽度的 margin-left
   • 左边绝对定位，右边同样绝对定位，left设为左侧宽度， width 设置 100%
   • 使用 flex 布局 等。

3. 解决外边距垂直方向重合的问题

   • 使用 paddind 代替 margin 。(之后需要设置 padding 的话改起来麻烦)

贴士：以下常用名称可灵活组合使用

方位、大小及范围

页面主结构

页面辅助结构

电商站

常用功能

在 HTML 中使用 CSS(引入 CSS)

1
2
3

内联(inline style attribute)
<head> 标签内的 <style> 标签
<link> 标签中的外联

样式优先级(从高到低)

1
2
3
4

!important
内联样式
<style> 中的样式
link 中的样式

选择器

没有选择器就没法确定样式的作用范围，毫无重点的加样式，最后只会是一锅粥。所以熟练使用选择器是必备技能。

核心选择器

• . (英文句点)
  • 类选择器，使用类名选择。可能是使用最多，也是最灵活的选择器了。
  • 如：
    • HTML: <div class="red">Yo</div>
    • CSS:.red { ... }
      • .red 就是类选择器，由于类可以在页面中重复出现，它天生就拥有批量选择的能力。
• #（井号）
  • ID 选择器，使用 ID 选择。
  • 如：
    • HTML：<div id="logo">Yo</div>
    • CSS logo { ... }
      • #logo 就是 ID 选择器，由于 ID 不可以在页面中重复出现，它天生就拥有极高权重，也就是说如果类选择下定义的样式和 ID 选择器下定义的样式发生冲突后一定是 ID 选择器获胜。
• div（元素名称）
  • 元素选择器，直接使用元素名称选择。
  • 如：
    • HTML：<div>Yo</div>
    • CSS：div { ... }
      • 一般与.或#结合使用。

核心选择方式

• 目标1 目标2 ...（注意中间的空格）
  • 后代选择器，可以将选择范围缩小至前一个元素。
  • 目标之间可以是任何层级的包含关系，如父子关系，爷孙关系，不适用于兄弟关系。
• 目标1 > 目标 （大于号）
  • 父子选择器，可以将范围缩小至儿子辈，但选不中孙子辈。

选择器优先级(从高到低)

1
2
3
4
5

!important
内联样式
id 选择器
class 选择器
元素选择器

核心属性

display (显示方式)

• block
  • 块，默认占整宽。
  • 通常作为容器分割页面，一些元素默认显示为block，如<div>或<p>。
• inline
  • 行内，通常存在于块级元素中作为内容填充，如文章的文字，图标，链接。一些元素默认显示为inline，如<span>或<a>。
• inline-block
  • 行内块。可设置宽高。

float (浮动）

• 注意：
  • 浮动元素撞到父级元素的“内壁”或和其他浮动元素摞到一起时才会停止“移动”，如果父级元素的空间不够，它们就另起一行。
  • fixed或absolute元素不浮动。
  • inline-block或inline元素在浮动后会变成block元素。
  • 未指定宽度的block元素的宽度会根据其内容长度而动态变化。
  • 一组“正常”的元素中如果有一个元素浮动会发生什么事情？

盒模型

1
2
3
4

content
padding
border
margin

position (元素定位)

static relative absolute fixed

1
2
3
4

非 static 元素可以用 top left bottom right 属性来设置坐标
relative 是相对定位,原位置仍然留有空间
absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到非 static 的元素
fixed 基于 window 的绝对定位, 不随页面滚动改变