X

曜彤.手记

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

  1. 第 14 章 - CSS 中的表格布局
  2. 第 15 章 - 列表和生成的内容
  3. 第 16 章 - 变形
  4. 第 17 章 - 过渡
  5. 第 18 章 - 动画
  6. 第 19 章 - 滤镜、混合、剪裁和遮罩
  7. 第 20 章 - 针对特定媒体的样式

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


Created on  

“旧书清理”系列。这里是 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 950CSS 滤镜：
  • 可用滤镜值：参考 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 章 - 针对特定媒体的样式

（略）


Last built on


评论 | Comments


Loading ...