X

曜彤.手记

随记,关于互联网技术、产品与创业

吉 ICP 备10004938-2号

《CSS 权威指南(第四版)》读书笔记(第 14-20 章)

“旧书清理”系列。这里是 14-20 章的内容,主要介绍了:CSS 中的表格布局、列表和生成内容、变形、过渡等。

第 14 章 - CSS 中的表格布局

  1. Page 735 表格的视觉排布:
  • 表格内部元素生成矩形框,有内容、内边距和边框,但没有外边距
  • 对应表格的 display 值:可在其他元素上应用表格布局。
    • table:将元素定义为块级表格。即定义一个生成块级框的矩形框(table);
    • inline-table:将元素定义为行内表格。即定义一个生成行内框的矩形框;
    • table-row:将元素定义为由单元格构成的行(tr);
    • table-row-group:将元素定义为由一行或多行构成的行组(tbody);
    • table-header-group:与上类似,视觉上不同(thead);
    • table-footer-group:与上类似,视觉上不同(tfoot);
    • table-column:将元素声明为由单元格构成的列(col);
    • table-column-group:将元素声明为有一列或多列构成的列组(colgroup);
    • table-cell:将元素定义为表格中的一个单元格(th、td);
    • table-caption:定义表题(caption)。
  • 在某些情况下,CSS 会以“匿名对象”的形式插入 HTML 中缺少的表格元素以补其完整的层级结构;
  • 表格中的层:(底)表格 -> 列组 -> 列 -> 行组 -> 行 -> 单元格(顶)。属于不同层的样式会单独绘制并相互覆盖;
  • border-collapse:控制表格单元格的边框模式。可选值如下:
    • collapse:折叠式边框。
      • 表格不能有内边距;
      • 边框可独立应用于单元格、行、行组、列、列组及表格;
      • 单元格边框之间没有间距,“占上风的”边框胜出(根据顺序判断边框的隐藏、宽窄、样式等);
      • 胜出的边框居中放在单元格之间假想的栅格线上;
      • 在计算表格宽度或高度时,位于表格外沿的边框,其宽度仅计算一半。
    • separate:默认值。分离式边框。
      • 相邻单元格的边框彼此独立;
      • 边框可独立应用于单元格及表格;
  • (table)border-spacing:控制表格单元格边框的间距(可单独甚至横向和纵向间隔);
  • (table)empty-cells:控制空单元格(显示或隐藏);
  • (table)table-layout:声明表格宽度具体使用哪种计算方式。高度通常由用户代理自动计算,显式设置的高度值可能会得到不一致的表现。可选值如下:
    • auto:默认值。采用自动布局(列宽度由表格全部单元格中的内容决定);
    • fixed:采用固定宽度布局(列宽度仅由表格第一行决定,因此性能较好)。
      • 如果列元素的 width 属性值不是 auto,设定的就是整列的宽度;
      • 如果列宽度为 auto,但表格第一行中位于这一列的单元格的 witdh 值不是 auto,则该值为整列的宽度;
      • 如果列的宽度仍为自动确定的,则自动确定并尽可能保证各列宽度相等。
  • 单元格中内容的对齐可以使用 text-align 与 vertical-align 属性。表格中行基线是由行中初行基线最低的单元格的该基线定义的,因此当 vertical-align 属性使用值 baseline 时,单元格与该行基线对齐。

第 15 章 - 列表和生成的内容

  1. Page 771 列表的视觉排布:
  • 对应列表的 display 值:list-item;
  • (list)list-style-type:设定列表项目使用的记号类型,该值可被继承。值 none 并不影响有序列表的计数;
  • (list)list-style-image:为列表设定图像记号,该值可被继承;
  • (list)list-style-position:设定列表记号的位置(内部 or 外部);
  • (list)list-style:上述属性的简写形式,未明确指定的属性将使用默认值;
  • 大多数现代浏览器采用的列表默认缩进量为 40px;
  • 列表记号相对于列表项目的内容区定位,即紧挨内容区,永远在其临近的外侧。可以使用 “::marker” 伪属性控制列表记号的部分样式,包括:大小、字体、颜色,以及内容。
  1. Page 786 生成内容(content):
  • 可以使用字符串值,使用 “\A” 对内容进行换行;
  • 可以使用 url(…) 链接外部资源(图像、声音等媒体);
  • 可以使用 attr(…) 插入属性值;
  • 可以使用关键字 “open-quote” 与 “close-quote” 插入引号,使用 quotes 属性控制引号的插入规则;
  • 可以使用计数器:
    • 三个步骤:
      • counter-reset:重置计数器,设置初值(默认为 0)。在相同的元素上重置并使用计数器时,计数器先重置再显示。不能在伪元素上重置计数器;
      • counter-increment:递增指定计数器的值(默认为 1)。在相同的元素上递增并使用计数器时,计数器先递增再显示
      • 使用 counter(counter-ident, list-style-type) 插入指定标识计数器的当前值。
    • 计数器仅在当前嵌套层级内有效,可以使用 counters(counter-ident, string, list-style-type) 将嵌套的新计数器追加到现有计数器上;
    • 可以使用 “@counter-style” 块定义新的计数模式:
/* 计数器实例 */
@counter-style custom-counter {
  system: cyclic;
  symbols: "\1F44D" "\1F44E" "\1F44F";
  suffix: ". ";
  prefix: "-> ";
  range: 1 2, 4 5;
  fallback: square;
}
@counter-style custom-counter-extra {
  system: extends custom-counter;
  suffix: "~ ";
  prefix: " ~";
}
ul {
  list-style: custom-counter-extra;
}

第 16 章 - 变形

  1. Page 825 变形:
  • 每个元素都有自己的参照系,各轴都相对自身而动。如果旋转了元素,x、y、z 各轴随之旋转;
  • 范围框:即边框框,元素边框的外边界。对于表格形式显示的元素,其范围框是表格的容器框,包括表格框和表题框;
  • 变形的发生顺序会影响元素最终的视觉效果;
  • 元素初始状态的变形与发生过渡和动画之后的变形,两者效果是叠加的;
  • 变形暂不能应用在 “atomic” 行内框上(如 span、a 等);
  • 变形函数:作为 transform 属性的值使用。
    • translateX:平移函数,沿 x 轴平移;
    • translateY:平移函数,沿 y 轴平移;
    • translateZ:平移函数,沿 z 轴平移;
    • translate:2D 平移函数,沿 x、y 轴平移;
    • translate3d:3D 平移函数,沿 x、y、z 轴平移;
    • scaleX:缩放函数,在 x 轴缩放;
    • scaleY:缩放函数,在 y 轴缩放;
    • scaleZ:缩放函数,在 z 轴缩放;
    • scale:2D 缩放函数,在 x、y 轴缩放;
    • scale3d:3D 缩放函数,在 x、y、z 轴缩放;
    • rotateX:旋转函数,绕 x 轴旋b转;
    • rotateY:旋转函数,绕 y 轴旋转;
    • rotateZ:旋转函数,绕 z 轴旋转;
    • rotate:2D 旋转函数,同 rotateZ 类似;
    • rotate3d:3D 缩放函数,绕空间中某一向量旋转。与分散到各个轴独立旋转的结果不一致
    • skewX:侧斜函数,沿 x 轴倾斜;
    • skewY:侧斜函数,沿 y 轴倾斜;
    • skew:2D 侧斜函数,沿 x、y 轴倾斜。与分散到各个轴独立倾斜的结果不一致
    • perspective:视域函数,需放到变形函数的最前面,为元素赋予前后深度(即 z 轴视距);
    • matrix:以六个值 a~f 确定的变换矩阵指定 2D 平面中的变形;
    • matrix3d:以列主序排列一个 4x4 的齐次矩阵,指定 3D 平面中的变形。
  • transform-origin:指定变形原点(默认情况下为元素的绝对中心);
  • transform-style:设定 3D 变形方式(默认情况下为 flat,子元素变形随父元素变形而产生的 3D 效果会被“拍扁”);
  • perspective:设定共有视域,创建的 3D 空间为所有子元素共有;
  • perspective-origin:设定视域原点(消隐点);
  • backface-visibility:决定当元素的背面朝向我们时是否渲染。

第 17 章 - 过渡

  1. Page 862 过渡:
  • transition-property:指定想应用过渡效果的 CSS 属性名,具体值以逗号分隔,值 “all” 对应于所有元素,需放于首位;
  • transition-duration:指定过渡的发生时间,具体值以逗号分隔,对应于每个指定元素;
  • transition-timing-function:控制过渡步调(可以指定多种时序函数);
  • transition-delay:设置过渡开始延迟;
  • transition:过渡的简写属性,可包含多组过渡设置;
  • 过渡发生时会优先使用目标选择符下设置的过渡属性,因此正向和反向过渡均可以单独设置;
  • 支持动画的 CSS 属性均可应用过渡效果;
  • 可以通过监听目标元素上的 “transitionend” 事件来判断过渡是否完成。某些单个属性可能触发多次该事件,分别对应不同的过渡细节。

第 18 章 - 动画

  1. Page 897 动画:
  • 自定义关键帧:
@keyframes fadeout {
  from {   /* 定义关键帧 */
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
  to {
    opacity: 0;
  }
}
@keyframes round {
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}
  • 应用动画:
div {
  /* 多个动画会同时应用,后面动画中出现的属性会覆盖前面出现的同名属性 */
  animation-name: fadeout, round;  
  animation-duration: 500ms, 5s;  /* 定义动画时长 */
  animation-iteration-count: 1, 2; 
  animation-direction: alternate;  /* 设置动画的播放方向 */
  animation-delay: 0s;  /* 设置动画的播放延迟 */
  animation-timing-function: linear;  /* 设置动画时序 */
  animation-play-state: running;  /* 设置动画播放状态 */
  animation-fill-mode: forwards;  /* 设置动画结束前后是否应用原来的属性值 */
}
  • 若没有指定开始和结束关键帧,则用户代理将使用要应用动画效果的属性的原始值构建一个 0%(to)和 100%(from)关键帧
  • 如果有多个动画为同一个属性指定了不同的值,最后一个应用的动画将覆盖之前动画中声明的值;
  • 动画在 UI 线程中的优先级最低。不透明度或变形动画通常由 GPU 执行,为了提升性能,只要可能,就应该把 transform 和 opacity 属性放到动画中

第 19 章 - 滤镜、混合、剪裁和遮罩

  1. Page 950 CSS 滤镜:
  • 可用滤镜值:参考 MDN
div {
  filter: blur(1px) contrast(.5);     /* 滤镜效果按顺序应用 */
}
  1. Page 957 合成与混合:
  • 可用效果值:参考 MDN
  • isolation:设置在容器元素上,决定该元素内的后代元素是否独立混合(具有堆叠上下文的元素,比如设置了 “transform” 属性的元素会自动独立出来)。而具体的混合模式属性应用在各个子元素或图像上。
div {
  mix-blend-mode: multiply;  /* 设置元素与多个背着物之间的混合模式 */
  background-blend-mode: screen;  /* 设置元素多个背景图之间的混合模式 */
}
  1. Page 971 剪裁和遮罩:略。

第 20 章 - 针对特定媒体的样式

(略)