Mistj's Digital Garden

Appearance

深入解析CSS ​

[!abstract] 深入解析CSS

  • 深入解析CSS|200
  • 书名： 深入解析CSS
  • 作者： 基思·J.格兰特
  • 简介： 作者对前端和后端的工作都十分了解，并拥有十余年CSS实战经验。在就职过的每一家公司，他都是非常重要的CSS导师。对于想要精通CSS的人而言，这本书是一张宝贵的“地图”，覆盖了CSS世界的大部分“疆土”，从CSS基础知识开始（如层叠、优先级、继承、相对单位、盒模型等），到多种布局（如浮动布局、Flexbox、网格布局、响应式设计等），再到大型应用程序中的CSS（如模块化CSS和模式库），最后是关于CSS的高级话题（如背景、阴影和混合模式，对比、颜色和间距，以及排版、过渡、变换、动画等）。
  • 出版时间 2020-04-09 00:00:00
  • ISBN： 9787115533760
  • 分类： 计算机-计算机综合
  • 出版社： 人民邮电出版社
  • 出版社： 人民邮电出版社
  • bookId： 31594821

高亮划线 ​

1.1 层叠 ​

  • 📌 有两个类名的选择器比只有一个类名的选择器优先级更高 ^31594821-13-9241-9266

    • ⏱ 2024-05-15 20:31:33

  • 📌 伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。 ^31594821-13-10728-10846

    • ⏱ 2024-05-17 19:54:52

1.3 特殊值 ​

  • 📌 第三个规则集覆盖了蓝色的链接色，让页脚链接的层叠值为inherit。 ^31594821-15-1789-1823

    • ⏱ 2024-05-18 11:29:39

  • 📌 有时，你需要撤销作用于某个元素的样式。这可以用initial关键字来实现。 ^31594821-15-2190-2227

    • ⏱ 2024-05-18 11:30:34

  • 📌 这么做的好处是不需要思考太多。如果想删除一个元素的边框，设置border: initial即可。如果想让一个元素恢复到默认宽度，设置width: initial即可 ^31594821-15-2977-3059

    • ⏱ 2024-05-18 11:32:32

1.4 简写属性 ​

  • 📌 属性里，font的问题最严重，因为它设置的属性值太多了。因此，要避免在<body>元素的通用样式以外使用font。当然，其他简写属性也可能 ^31594821-16-2478-2547
    • ⏱ 2024-05-18 16:19:27

2.2 em和rem ​

  • 📌 当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。 ^31594821-20-1463-1558

    • ⏱ 2024-05-18 16:35:37

  • 📌 谈到font-size属性时，em表现得不太一样。之前提到过，当前元素的字号决定了em。但是，如果声明font-size: 1.2em，会发生什么呢？一个字号当然不能等于自己的1.2倍。实际上，这个font-size是根据继承的字号来计算的。 ^31594821-20-2894-3041

    • ⏱ 2024-05-18 16:37:40

  • 📌 这个例子里，padding的声明值为1.2em，乘以19.2px（当前元素的字号），得到计算值为23.04px。尽管font-size和padding的声明值相同，计算值却不一样。 ^31594821-20-5611-5701

    • ⏱ 2024-05-18 16:48:19

2.3 停止像素思维 ​

  • 📌 但是在心里仍然想着“14像素”。在响应式网页中，需要习惯“模糊”值。1.2em到底是多少像素并不重要，重点是它比继承的字号要稍微大一点。如果在屏幕上的效果不理想，就调整它的值，反复试验。这种方式同样适用于像素值。（在第13章中，我们将进一步研究具体规则来改进这种方法。） ^31594821-21-1168-1303

    • ⏱ 2024-05-18 16:59:25

  • 📌 有时，需要让同一个组件在页面的某些部分显示不同的大小，你可以用em来单独缩放一个组件。 ^31594821-21-5376-5419

    • ⏱ 2024-05-18 17:54:21

2.4 视口的相对单位 ​

  • 📌 vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）。
    比如， ^31594821-22-1005-1176

    • ⏱ 2024-05-18 17:56:59

  • 📌 视口相对长度非常适合展示一个填满屏幕的大图。我们可以将图片放在一个很长的容器里，然后设置图片的高度为100vh，让它等于视口的高度。 ^31594821-22-2081-2147

    • ⏱ 2024-05-18 17:57:55

  • 📌 可在Can I Use网站中 ^31594821-22-2274-2288

    • ⏱ 2024-05-18 17:58:24

  • 📌 [插图] ^31594821-22-4490-4491

    • ⏱ 2024-05-19 07:14:08

2.6 自定义属性（即CSS变量） ​

  • 📌 如果刚好用了内置变量功能的CSS预处理器，比如Sass或者Less，你可能就不太想用CSS变量了。千万别这样。新规范里的CSS变量有本质上的区别，它比任何一款预处理器的变量功能都多。因此我倾向于称其为“自定义属性”，而不是变量，以强调它跟预处理器变量的区别。 ^31594821-24-828-957

    • ⏱ 2024-05-19 07:17:03

  • 📌 var()函数接受第二个参数，它指定了备用值。如果第一个参数指定的变量未定义，那么就会使用第二个值。 ^31594821-24-2690-2740

    • ⏱ 2024-05-19 07:18:16

  • 📌 在本例中，总共定义了自定义属性两次：第一次在根元素上（--main-color为黑色），第二次在深色容器上（--main-color为白色）。自定义属性就像作用域变量一样，因为它的值会被后代元素继承 ^31594821-24-5400-5499

    • ⏱ 2024-05-19 07:23:57

3.1 元素宽度的问题 ​

  • 📌 因为IE有一个bug，它会默认将<main>元素渲染成行内元素，而不是块级元素，所以代码中我们用声明display: block来纠 ^31594821-27-2040-2106

    • ⏱ 2024-05-19 07:30:31

  • 📌 当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。 ^31594821-27-2905-2954

    • ⏱ 2024-05-19 07:31:15

  • 📌 全局修改盒模型为border-box更稳 ^31594821-27-6560-6580

    • ⏱ 2024-05-21 13:53:11

  • 📌 盒模型通常不会被继承，但是使用inherit关键字可以强制继承。 ^31594821-27-6798-6830

    • ⏱ 2024-05-19 22:26:24

3.2 元素高度的问题 ​

  • 📌 21世纪初，CSS取代了HTML表格成为布局的主要方式。当时表格是实现等高列的唯一方式 ^31594821-28-2827-2870

    • ⏱ 2024-05-20 23:11:16

  • 📌 不像block的元素，默认情况下，显示为table的元素宽度不会扩展到100%，因此需要明确指定宽度❶。以上代码已经差不多实现了需求，但是缺少间隔。这是因为外边距❷并不会作用于table-cell元素，所以要修改代码，让间隔生效。 ^31594821-28-4475-4590

    • ⏱ 2024-05-21 13:59:43

  • 📌 为什么vertical-align不生效如果开发人员期望给块级元素设置vertical-align:middle后，块级元素里的内容就能垂直居中，那么他们通常会失望，因为浏览器会忽略这个声明。vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。比如，可以用它控制一个行内的图片跟相邻的文字对齐。 ^31594821-28-8687-8947

    • ⏱ 2024-05-21 14:27:39

3.3 负外边距 ​

  • 📌 不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。
    负外边距的具体行为取决于设置在元素的哪边，如图3-15所示。如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠，如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。给元素底部加上负外边距并不等同于给它下面的元素顶部加上负外边距。 ^31594821-29-389
    • ⏱ 2024-05-21 22:19:32

3.4 外边距折叠 ​

  • 📌 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。这种现象被称作折叠。 ^31594821-30-768-833

    • ⏱ 2024-05-21 22:29:08

  • 📌 即使将这个段落用一个额外的div包裹起来，如代码清单3-13所示，最终视觉结果也一样 ^31594821-30-1787-1829

    • ⏱ 2024-05-21 22:30:37

  • 📌 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局（参见第6章）同理。 ^31594821-30-4440-4488

    • ⏱ 2024-05-21 22:31:32

4.2 容器折叠和清除浮动 ​

  • 📌 这是因为浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。 ^31594821-36-1564-1598

    • ⏱ 2024-05-23 06:50:38

  • 📌 clear: both声明让该元素移动到浮动元素的下面，而不是侧面。 ^31594821-36-2878-2912

    • ⏱ 2024-05-23 21:18:34

  • 📌 使用：:after伪元素选择器，就可以快速地在DOM中在容器末尾添加一个元素，而不用在HTML里添加标记。 ^31594821-36-3287-3340

    • ⏱ 2024-05-23 21:18:36

  • 📌 这个清除浮动还有个一致性问题没有解决：浮动元素的外边距不会折叠到清除浮动容器的外部，非浮动元素的外边距则会正常折叠。 ^31594821-36-4454-4512

    • ⏱ 2024-05-23 21:18:36

  • 📌 这个版本使用display: table而不是display: block。给：:before和：:after伪元素都加上这一属性，所有子元素的外边距都会包含在容器的顶部和底部之间。 ^31594821-36-5402-5493

    • ⏱ 2024-05-25 18:33:00

5.2 弹性子元素的大小 ​

  • 📌 每个子元素的flex-shrink值代表了它是否应该收缩以防止溢出。如果某个子元素为flex-shrink: 0，则不会收缩；如果值大于0，则会收缩至不再溢出。按照flex-shrink值的比例，值越大的元素收缩得越多。 ^31594821-43-5334-5444
    • ⏱ 2024-06-12 18:35:17

6.2 网格剖析 ​

  • 📌 grid-template-rows: repeat(4, auto)；定义了四个水平网格轨道，高度为auto，这等价于grid-template-rows: auto auto auto auto。轨道大小设置为auto，轨道会根据自身内容扩展。 ^31594821-50-3735-3859
    • ⏱ 2024-06-18 22:32:30

6.3 替代语法 ​

  • 📌 这条声明定义了两列的网格，三条垂直的网格线分别叫作start、center和end。之后定义网格元素在网格中的位置时，可以不用编号而是用这些名称来声明，如下代码所示 ^31594821-51-927-1009

    • ⏱ 2024-06-18 22:32:31

  • 📌 2号网格线既叫作left-end也叫作right-start，之后可以任选一个名称使用。这里还有一个彩蛋：将网格线命名为left-start和left-end，就定义了一个叫作left的区域，这个区域覆盖两个网格线之间的区 ^31594821-51-1533-1644

    • ⏱ 2024-06-18 22:32:31

  • 📌 grid-template-areas属性使用了一种ASCII art的语法，可以直接在CSS中画一个可视化的网格形象。该 ^31594821-51-3397-3458

    • ⏱ 2024-06-18 22:32:32

  • 📌 还可以用句点（.）作为名称，这样便能空出一个网格单元。比如，以下代码定义了四个网格区域，中间围绕着一个空的网 ^31594821-51-3788-3842

    • ⏱ 2024-06-18 22:32:33

6.4 显式和隐式网格 ​

  • 📌 使用grid-template-＊属性定义网格轨道时，创建的是显式网 ^31594821-52-633-686

    • ⏱ 2024-06-18 22:32:33

  • 📌 们会扩展到能容纳网格元素内容。可以给网格容器设置grid-auto-columns和grid-auto-rows，为隐式网格轨道指定一个大小（比如，grid-auto-columns: ^31594821-52-1174-1267

    • ⏱ 2024-06-18 22:32:29

7.2 绝对定位 ​

  • 📌 绝对定位不是相对视口，而是相对最近的祖先定位元素 ^31594821-58-587-611

    • ⏱ 2024-05-24 20:41:54

  • 📌 通常情况下，就像本例一样，包含块是元素的父元素。如果父元素未被定位，那么浏览器会沿着DOM树往上找它的祖父、曾祖父，直到找到一个定位元素，用它作为包含块 ^31594821-58-1511-1587

    • ⏱ 2024-05-24 20:43:54

  • 📌 如果祖先元素都没有定位，那么绝对定位的元素会基于初始包含块（initial containing block）来定位。初始包含块跟视口一样大，固定在网页的顶部。 ^31594821-58-1664-1770

    • ⏱ 2024-05-24 20:44:55

  • 📌 首先将按钮的文字挤到外面，并隐藏溢出内容。然后将按钮的：:after伪元素的content属性设置为x，并让伪元素绝对定位到按钮中间。 ^31594821-58-2420-2487

    • ⏱ 2024-05-24 20:46:04

  • 📌 由于text-indent是继承属性，需要在伪类元素选择器上设为0，因此x便不会缩进。 ^31594821-58-3054-3097

    • ⏱ 2024-05-24 21:58:54

7.3 相对定位 ​

  • 📌 请注意，这里是在整个容器上设置：hover状态来打开菜单。也就是说只要鼠标停在它的任何内容上，无论是dropdown-label还是dropdown-menu，菜单都会保持打开状态。 ^31594821-59-2941-3032

    • ⏱ 2024-05-24 22:04:31

  • 📌 通常情况下，更稳健的方式是使用JavaScript添加和移除一个控制菜单开关的类名。这样就能在打开和关闭菜单之前添加适当的延迟，防止用户在鼠标快速滑过时无意间触 ^31594821-59-3435-3515

    • ⏱ 2024-05-24 22:06:27

  • 📌 创建一个CSS三角形下拉菜单距离完美还差 ^31594821-59-3937-3987

    • ⏱ 2024-05-24 22:08:13

7.4 层叠上下文和z-index ​

  • 📌 浏览器会先绘制所有非定位的元素，然后绘制定位元素。 ^31594821-60-2107-2132

    • ⏱ 2024-05-26 09:36:21

  • 📌 菜单都会出现在静态内容之前（符合预期），但是源码里后出现的元素会绘制在先出现的元素之前。解决这个问题的一个办法是在源码里将<div class="modal">及其内容移到下拉菜单后面 ^31594821-60-2621-2713

    • ⏱ 2024-05-26 09:36:23

  • 📌 通常情况下，模态框要放在网页内容的最后，</body>关闭标签之前。大多数构建模态框的JavaScript库会自动这样做 ^31594821-60-2749-2809

    • ⏱ 2024-05-26 09:36:22

  • 📌 但是对相对定位或绝对定位的元素来说，通常无法用改变标记位置的方法 ^31594821-60-2908-2940

    • ⏱ 2024-05-26 09:36:20

  • 📌 拥有较高z-index的元素出现在拥有较低z-index的元素前面。拥有负数z-index的元素出现在静态元素后面。 ^31594821-60-3273-3331

    • ⏱ 2024-05-26 09:36:24

  • 📌 第一，z-index只在定位元素上生效，不能用它控制静态元素。第二，给一个定位元素加上z-index可以创建层叠上下文。 ^31594821-60-3822-3882

    • ⏱ 2024-05-26 09:36:23

  • 📌 如果一个元素叠放在一个层叠上下文前面，那么层叠上下文里没有元素可以被拉到该元素前面。同理，如果一个元素被放在层叠上下文后面，层叠上下文里没有元素能出现在该元素后面。 ^31594821-60-4322-4404

    • ⏱ 2024-05-26 09:36:24

  • 📌 给一个定位元素加上z-index是创建层叠上下文最主要的方式，但还有别的属性也能创建，比如小于1的opacity属性，还有transform、filter属性。由于这些属性主要会影响元素及其子元素渲染的方式，因此一起绘制父子元素 ^31594821-60-5774-5888

    • ⏱ 2024-05-26 09:36:20

  • 📌 所有层叠上下文内的元素会按照以下顺序，从后到前叠放：❑ 层叠上下文的根❑ z-index为负的定位元素（及其子元素）❑ 非定位元素❑ z-index为auto的定位元素（及其子元素）❑ z-index为正的定位元素（及其子元素） ^31594821-60-5964-6223

    • ⏱ 2024-05-26 09:36:26

  • 📌 如果你使用预处理器，比如LESS或SASS（参见附录B），或者你支持的所有浏览器都支持自定义属性（参见第2章），就能很方便地处理这个问题 ^31594821-60-6516-6584

    • ⏱ 2024-05-26 09:36:19

7.5 粘性定位 ​

  • 📌 器前缀（position: -webkit-sticky）才支持。记得在Can I Use网站中检索CSS position:sticky查看最新的支持情况。如果不支持，通常要用固定定位或者绝对定位来回退处理。 ^31594821-61-711-816

    • ⏱ 2024-05-26 09:36:26

  • 📌 [插图] ^31594821-61-2148-2149

    • ⏱ 2024-05-26 09:36:25

第8章 响应式设计 ​

  • 📌 响应式设计的三大原则如下。(1) 移动优先。这意味着在实现桌面布局之前先构建移动版的布局。(2) @media规则。使用这个样式规则，可以为不同大小的视口定制样式。用这一语法，通常叫作媒体查询（media queries），写的样式只在特定条件下才会生效。(3) 流式布局。这种方式允许容器根据视口宽度缩放尺寸。 ^31594821-63-1675-2022
    • ⏱ 2024-05-26 09:36:21

8.1 移动优先 ​

  • 📌 屏幕阅读器将某些HTML5元素，比如<form>、<main>、<nav>以及<aside>作为里程碑，帮助弱视用户快速浏览网页。因此，要将控制菜单显示的汉堡包按钮放在<nav>元素里，以便用户浏览到这里的时候快速发现它。否则，用户跳到<nav>的时候只会发现它是空的（屏幕阅读器忽略了display: none的下拉菜单） ^31594821-64-6024-6236

    • ⏱ 2024-05-29 22:12:37

  • 📌 使用类is-open是另一个“小把戏”。使用这个类时，最后的选择器（.menu.is-open.menu-dropdown）就会选中下拉菜单。没有这个类时，就不会选中下拉菜单。这样就实现了菜单下拉的功能。如图8 ^31594821-64-7464-7569

    • ⏱ 2024-05-29 22:14:10

8.3 流式布局 ​

  • 📌 的flex-grow和flex-shrink（更重要） ^31594821-66-893-920

    • ⏱ 2024-06-10 22:37:27

  • 📌 [插图] ^31594821-66-2544-2545

    • ⏱ 2024-06-10 22:37:23

  • 📌 [插图] ^31594821-66-3971-3972

    • ⏱ 2024-06-10 22:37:31

8.4 响应式图片 ​

  • 📌 使用响应式技术给不同屏幕尺寸提供最合适的图片 ^31594821-67-859-881

    • ⏱ 2024-06-10 22:37:29

  • 📌 8.4.2 使用srcset提供对应的图片媒体查询能够解决用CSS加载图片的问题，但是HTML里的<img>标签怎么办呢？对于这种行内图片，有另一个重要的解决方法：srcset属性（“source set”的缩 ^31594821-67-1572-1707

    • ⏱ 2024-06-10 22:37:31

  • 📌 现在大多数浏览器支持srcset。不支持的浏览器会根据src属性加载相应的URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做 ^31594821-67-2132-2212

    • ⏱ 2024-06-10 22:37:24

第9章 模块化CSS ​

  • 📌 模块化CSS（Modular CSS）是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系 ^31594821-70-1191-1265
    • ⏱ 2024-06-10 22:37:35

9.1 基础样式：打好基础 ​

  • 📌 [插图] ^31594821-71-776-777

    • ⏱ 2024-06-10 22:37:28

  • 📌 这里推荐一个叫作normalize.css的库，这个小样式表可以协助消除不同的客户端浏览器渲染上的不一致 ^31594821-71-1139-1191

    • ⏱ 2024-06-10 22:37:25

9.2 一个简单的模块 ​

  • 📌 模块的选择器由单个类名构成 ^31594821-72-1639-1652

    • ⏱ 2024-06-10 22:37:34

  • 📌 通过定义一个以模块名称开头的新类名来创建一个修饰符。例如，消息模块的error修饰符应该叫作message-error。通过包含模块名称，可以清楚地表明这个类属于消息模块。说明 常用的写法是使用两个连字符来表示修饰符，比如message--erro ^31594821-72-2601-2798

    • ⏱ 2024-06-10 22:37:26

  • 📌 覆盖dropdown类提供的默认颜色。现在要写模块化CSS，这样的选择器是严格禁用的。虽然使用后代选择器可以满足当下的需要，但接下来可能会带来很多问 ^31594821-72-6209-6283

    • ⏱ 2024-06-10 22:37:33

  • 📌 千万不要使用基于页面位置的后代选择器来修改模块。坚决遵守这个原则，就可以有效防止样式表变成一堆难以维护的代码。 ^31594821-72-7402-7457

    • ⏱ 2024-06-10 22:37:28

  • 📌 [插图] ^31594821-72-10045-10046

    • ⏱ 2024-06-10 22:37:23

9.3 把模块组合成更大的结构 ​

  • 📌 是下拉模块的子元素。点击触发器可以显示或者隐藏抽屉元素。JavaScript代码为下拉模块的主元素添加或者移除is-open类，以此来实现这个功能。 ^31594821-73-2434-2508

    • ⏱ 2024-06-10 22:37:30

  • 📌 原则。例如，如果已经有按钮模块了，就不应该使用button--red和button--blue命名红色和蓝色变体子类。网站设计在将来有可能会改变，你不知道这些按钮的颜色会不会也跟着变化。应该使用一些更有意义的名称，比如button--danger和button--success ^31594821-73-6944-7083

    • ⏱ 2024-06-10 22:37:32

11.1 渐变 ​

  • 📌 渐变实际上就是背景图片，渐变本身不会影响元素的大小 ^31594821-83-2055-2080
    • ⏱ 2024-06-10 22:48:44

11.2 阴影 ​

  • 📌 阴影与元素的大小和尺寸相同。如果元素设置了border-radius，那么阴影相应地也会有圆角。阴影的水平偏移量（x）、垂直偏移量（y）和颜色都不可或缺。还有两个值是可选的：模糊半径和扩展半径。完整的语法如图11-9所示。 ^31594821-84-980-1147

    • ⏱ 2024-06-10 23:01:19

  • 📌 [插图] ^31594821-84-1186-1347

    • ⏱ 2024-06-10 23:01:26

  • 📌 阴影加强了这种效果。我们还将在本例中使用：active伪类来创建另一种阴影效果，供按钮摁下的时候使用 ^31594821-84-1655-1705

    • ⏱ 2024-06-10 23:02:15

  • 📌 focus状态默认添加的轮廓线。可以通过设置．button:focus{ outline: none; }来移除轮廓线。建议你在移除轮廓线的同时，添加一些其他特效来代替，这样当用户使用键盘导航的时候，就可以看到当前焦点状态在哪里。 ^31594821-84-3457-3572

    • ⏱ 2024-06-22 07:22:59

11.3 混合模式 ​

  • 📌 background-size属性接受了两个特殊的关键字值，分别是cover和contain。使用cover值可以调整背景图片的大小，使其填满整个元素，这样会导致图片的边缘被裁切掉一部分；使用contain值可以保证整个背景图 ^31594821-85-2589-2702
    • ⏱ 2024-06-27 17:21:02

12.3 间距 ​

  • 📌 元素的行高决定了内容盒子最终的高度 ^31594821-90-3896-3913
    • ⏱ 2024-06-22 07:34:34

14.3 非动画属性 ​

  • 📌 background-color属性只有一个颜色值的时候才可以添加动画，意思是从一个颜色过渡到另一个 ^31594821-102-3318-3368
    • ⏱ 2024-06-27 18:04:22

16.3 动画延迟和填充模式 ​

  • 📌 我们需要把动画样式后向填充设置，就像一直暂停在第一帧，直到动画开始播放。可以使用animation-fill-mode属性来实现 ^31594821-114-1756-1820
    • ⏱ 2024-07-03 17:24:05

读书笔记 ​

3.2 元素高度的问题 ​

划线评论 ​

6.2 网格剖析 ​

划线评论 ​

7.4 层叠上下文和z-index ​

划线评论 ​

  • 📌 然后给它设置z-idne ^37417557-7Rtf7WVNc
    • 💭 typo
    • ⏱ 2024-05-26 09:36:19

本书评论 ​