css阻塞

\n \n\n```\n\n在这个例子中，`.child1`设置了`z-index: 999`，`.child2`设置了`z-index: 0`，并且它们都在一个具有`z-index: 1`的父元素中。由于父元素创建了一个堆叠上下文，`.child1`和`.child2`会在这个堆叠上下文中按照它们的`z-index`值进行堆叠，所以`.child1`会显示在`.child2`之上。\n\n但是，如果将父元素的`z-index`值设置为 0，或者去除父元素的定位属性，那么`.child1`和`.child2`的堆叠顺序可能会发生变化，具体取决于浏览器的默认行为和 HTML 结构的顺序。\n","reactions",{"_54":162,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1037/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1037/timeline","performed_via_github_app","state_reason","score",1,{"_54":179,"_56":57,"_58":180,"_60":181,"_62":182,"_64":183,"_66":184,"_68":185,"_70":186,"_72":187,"_74":188,"_107":189,"_120":121,"_122":26,"_123":-5,"_124":191,"_126":192,"_148":177,"_142":204,"_144":205,"_147":-5,"_150":151,"_152":206,"_157":-5,"_158":207,"_160":208,"_172":210,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1032","https://api.github.com/repos/pro-collection/interview-question/issues/1032/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1032/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1032/events","https://github.com/pro-collection/interview-question/issues/1032",2615633402,"I_kwDOJGDC6c6b52X6",1032,"CSS 如何实现固定长宽比的元素【热度: 546】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[190],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":193,"_64":194,"_58":195,"_66":196,"_68":197,"_70":177,"_72":198,"_118":199,"_136":200,"_138":201,"_140":141,"_120":121,"_142":202,"_144":203,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2024-10-26T07:40:12Z","2025-02-16T14:22:33Z",{"_154":141,"_155":141,"_156":141},"**关键词**：固定长宽比\n\n在 CSS 中，可以通过以下几种方式实现固定长宽比的元素：\n\n**一、使用 padding 实现**\n\n1. 原理：\n\n - 利用元素的`padding`属性以百分比形式设置时是相对于父元素宽度的特点，通过设置`padding-top`或`padding-bottom`来实现固定的长宽比。\n\n2. 示例代码：\n ```html\n

\n \n

\n ```\n ```css\n .aspect-ratio-box {\n width: 100%;\n position: relative;\n padding-top: 56.25%; /* 16:9 的长宽比，9/16 = 0.5625，即 56.25% */\n }\n .aspect-ratio-box > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n ```\n - 在这个例子中，设置了一个容器元素，通过`padding-top`为`56.25%`实现了 16:9 的长宽比。容器内的子元素通过绝对定位填充整个容器。\n\n**二、使用伪元素和`vw`单位实现**\n\n1. 原理：\n\n - 利用伪元素`::before`或`::after`，并设置其`content`属性为空，通过设置其`height`或`width`为相对于视口宽度（`vw`单位）的百分比来实现固定长宽比。\n\n2. 示例代码：\n ```html\n

\n \n

\n ```\n ```css\n .aspect-ratio-box-vw {\n width: 100%;\n position: relative;\n }\n .aspect-ratio-box-vw::before {\n content: \"\";\n display: block;\n padding-top: 56.25%; /* 16:9 的长宽比 */\n }\n .aspect-ratio-box-vw > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n ```\n - 这个方法与第一种类似，但是使用了伪元素和`padding-top`相对于视口宽度的特点来实现长宽比。\n\n**三、使用 CSS Grid 实现**\n\n1. 原理：\n\n - 通过 CSS Grid 布局，设置一个网格容器，并定义其中一个维度的大小，然后让另一个维度自动填充以实现固定长宽比。\n\n2. 示例代码：\n ```html\n

\n \n

\n ```\n ```css\n .aspect-ratio-grid {\n width: 100%;\n height: 0;\n padding-bottom: 56.25%; /* 16:9 的长宽比 */\n display: grid;\n }\n .aspect-ratio-grid > * {\n grid-row: 1;\n grid-column: 1;\n }\n ```\n - 在这个例子中，设置容器的`padding-bottom`为`56.25%`来实现 16:9 的长宽比，然后使用 CSS Grid 布局将子元素放置在网格的第一个单元格中。\n",{"_54":209,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1032/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1032/timeline",{"_54":212,"_56":57,"_58":213,"_60":214,"_62":215,"_64":216,"_66":217,"_68":218,"_70":219,"_72":220,"_74":221,"_107":222,"_120":121,"_122":26,"_123":-5,"_124":224,"_126":225,"_148":141,"_142":227,"_144":228,"_147":-5,"_150":151,"_152":229,"_157":-5,"_158":230,"_160":231,"_172":233,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1008","https://api.github.com/repos/pro-collection/interview-question/issues/1008/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1008/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1008/events","https://github.com/pro-collection/interview-question/issues/1008",2597767229,"I_kwDOJGDC6c6a1sg9",1008,"css 如何实现分栏布局【热度: 502】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[223],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":226,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-18T14:57:06Z","2024-10-18T14:57:07Z",{"_154":141,"_155":141,"_156":141},"**关键词**：分栏布局\n\n在前端布局中，可以通过 CSS 实现分栏布局。以下是几种常见的实现方式：\n\n**一、使用`float`属性**\n\n1. **基本原理**：\n\n - `float`属性可以让元素向左或向右浮动，从而实现多栏布局。通过将多个元素设置为浮动，可以让它们并排显示。\n - 例如，可以将一个容器中的子元素设置为左浮动或右浮动，以实现两栏或多栏布局。\n\n2. **示例代码**：\n\n```html\n\n\n \n \n \n\n \n

左栏内容

右栏内容

\n \n\n```\n\n在这个例子中，使用`float: left`将两个`.column`元素设置为左浮动，从而实现两栏布局。每个栏的宽度为`50%`。\n\n**二、使用`flexbox`布局**\n\n1. **基本原理**：\n\n - `flexbox`（Flexible Box Layout）是一种弹性布局模型，可以轻松地实现分栏布局。通过设置容器的`display`属性为`flex`，可以将容器内的子元素进行弹性布局。\n - 可以使用`flex-direction`属性来控制子元素的排列方向，例如设置为`row`可以实现水平排列，设置为`column`可以实现垂直排列。\n\n2. **示例代码**：\n\n```html\n\n\n \n \n \n\n \n

左栏内容

右栏内容

\n \n\n```\n\n在这个例子中，将容器的`display`属性设置为`flex`，然后将子元素的`.column`类设置为`flex: 1`，使每个子元素占据相等的空间，实现两栏布局。\n\n**三、使用`grid`布局**\n\n1. **基本原理**：\n\n - `grid`（Grid Layout）是一种网格布局模型，可以更精细地控制布局。通过设置容器的`display`属性为`grid`，可以将容器划分为网格，然后将子元素放置在网格中的特定位置。\n - 可以使用`grid-template-columns`和`grid-template-rows`属性来定义网格的列和行，以及使用`grid-column`和`grid-row`属性来指定子元素在网格中的位置。\n\n2. **示例代码**：\n\n```html\n\n\n \n \n \n\n \n

左栏内容

右栏内容

\n \n\n```\n",{"_54":232,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1008/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1008/timeline",{"_54":235,"_56":57,"_58":236,"_60":237,"_62":238,"_64":239,"_66":240,"_68":241,"_70":242,"_72":243,"_74":244,"_107":245,"_120":121,"_122":26,"_123":-5,"_124":254,"_126":255,"_148":177,"_142":268,"_144":269,"_147":-5,"_150":151,"_152":270,"_157":-5,"_158":271,"_160":272,"_172":274,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/975","https://api.github.com/repos/pro-collection/interview-question/issues/975/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/975/comments","https://api.github.com/repos/pro-collection/interview-question/issues/975/events","https://github.com/pro-collection/interview-question/issues/975",2569775244,"I_kwDOJGDC6c6ZK6iM",975,"css 中属性选择器及类选择器的权重哪个高【热度: 642】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[246,247],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":248,"_68":249,"_54":250,"_113":251,"_115":252,"_117":26,"_118":253},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",[],{"_54":256,"_64":257,"_58":258,"_66":259,"_68":260,"_70":261,"_72":262,"_118":263,"_136":264,"_138":265,"_140":141,"_120":121,"_142":266,"_144":267,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},425,"2023-03-06T15:00:27Z","2025-02-10T16:49:33Z","2024-10-07T08:48:50Z","2025-01-22T08:46:59Z",{"_154":141,"_155":141,"_156":141},"**关键词**：选择器权重\r\n\r\n> 作者备注\r\n>\r\n> 这个是一个非常贼的问题，可能很多都只是知道，【类选择器、属性选择器和伪类选择器】都为为一样的，但是并不知道【类选择器、属性选择器】之间还有优先级关系\r\n\r\n在 CSS 中，类选择器的权重高于属性选择器。\r\n\r\n**一、权重计算规则**\r\n\r\nCSS 的权重是一个用于确定当多个选择器应用于同一元素时，哪个样式规则将被应用的概念。权重是通过一个四位数字表示的，分别对应不同类型的选择器：\r\n\r\n1. 内联样式：权重为 1000。例如，通过 HTML 元素的`style`属性设置的样式。\r\n2. ID 选择器：权重为 0100。\r\n3. 类选择器、属性选择器和伪类选择器：权重为 0010。\r\n4. 元素选择器和伪元素选择器：权重为 0001。\r\n\r\n通配符选择器（`*`）的权重为 0000。\r\n\r\n**二、类选择器与属性选择器的比较**\r\n\r\n1. 类选择器：使用点号（`.`）后跟类名来选择元素。例如，`.my-class`选择所有具有`class=\"my-class\"`的元素。\r\n\r\n - 类选择器在 CSS 中非常常用，因为它们可以方便地对一组具有相同特征的元素应用相同的样式。\r\n - 由于类选择器的权重为 0010，相对较高，所以在与权重较低的选择器发生冲突时，类选择器的样式通常会被应用。\r\n\r\n2. 属性选择器：根据元素的属性来选择元素。例如，`[type=\"text\"]`选择所有`type`属性为`text`的元素。\r\n - 属性选择器可以提供更具体的选择方式，但相对来说使用频率可能不如类选择器高。\r\n - 属性选择器的权重也为 0010，与类选择器相同。然而，在实际应用中，如果同时存在类选择器和属性选择器，并且它们的特异性相同，通常类选择器会优先被应用。\r\n\r\n3. 加上指定元素的 - 属性选择器。例如 `input[type=\"text\"]` **具体性导致的优先级差异**,`input[type=\"submit\"]`比`[type=\"submit\"]`更具体。具体性在 CSS 优先级判断中是一个重要因素。具体性越高的选择器通常具有更高的优先级, 它的优先级比类选择器更高。 \r\n\r\n\r\n**综上所述：【加上指定元素的属性选择器】> 【类选择器】>【属性选择器】**\r\n\r\n\r\n**三、示例说明**\r\n\r\n以下是一个示例代码，展示了类选择器和属性选择器的权重比较：\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n在这个例子中，``元素同时匹配属性选择器`input[type=\"text\"]`和类选择器`.text-input`。展示的颜色为红色。如果注释掉【加上制定元素的属性选择器】，展示的颜色为 blue , 优先级高于【普通属性选择器】。\r\n\r\n综上所述，在 CSS 中，类选择器的权重高于属性选择器。但在实际应用中，还需要考虑选择器的特异性和其他因素，以确保正确的样式被应用到元素上。",{"_54":273,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/975/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/975/timeline",{"_54":276,"_56":57,"_58":277,"_60":278,"_62":279,"_64":280,"_66":281,"_68":282,"_70":283,"_72":284,"_74":285,"_107":286,"_120":121,"_122":26,"_123":-5,"_124":295,"_126":296,"_148":141,"_142":298,"_144":298,"_147":-5,"_150":151,"_152":299,"_157":-5,"_158":300,"_160":301,"_172":303,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/884","https://api.github.com/repos/pro-collection/interview-question/issues/884/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/884/comments","https://api.github.com/repos/pro-collection/interview-question/issues/884/events","https://github.com/pro-collection/interview-question/issues/884",2526782998,"I_kwDOJGDC6c6Wm6YW",884,"介绍一下 position sticky【热度: 826】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[287,288],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":289,"_68":290,"_54":291,"_113":292,"_115":293,"_117":26,"_118":294},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团","ededed","公司标签",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":297,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:30:34Z",{"_154":141,"_155":141,"_156":141},"**关键词**：position sticky\n\n`position: sticky;` 是 CSS 中的一个定位属性值，它允许元素在页面滚动到某个阈值时“固定”在位置上，而在达到这个阈值之前，元素会像正常文档流中的元素一样表现（也就是说，在特定条件下它表现得像 `position: relative;`，在另一些条件下表现得像 `position: fixed;`）。这种特性使 `sticky` 定位成为实现网页上吸顶或吸底效果的一种非常实用的手段。\n\n### 特性\n\n- **吸顶效果**：最常见的用途之一是导航栏吸顶。当用户向下滚动页面时，导航栏到达视口顶部后就会固定在那里，直到用户向上滚动至原始位置。\n- **滚动容器**：`sticky` 元素将相对于离其最近的拥有滚动机制（例如，`overflow: auto;` 或 `overflow: scroll;`）的祖先元素进行定位。\n\n### 如何使用\n\n要使元素具有 `sticky` 定位，你需要为它指定 `position: sticky;` 以及至少一个“边缘”属性（`top`, `right`, `bottom`, `left`）的值。这个值决定了元素在满足“粘性”条件前与边缘的距离。\n\n### 示例\n\n```css\n.sticky-element {\n position: -webkit-sticky; /* Safari */\n position: sticky;\n top: 0; /* 距离顶部 0px 时生效 */\n z-index: 1000; /* 确保在其他内容之上 */\n background-color: white; /* 可选：为了视觉效果更明显 */\n}\n\n.container {\n overflow-y: auto; /* 确保是滚动容器 */\n height: 500px; /* 举例，根据实际需求设置 */\n}\n```\n\n```html\n

我在滚动时会吸顶

\n \n

\n```\n\n### 注意事项\n\n- **兼容性**：`position: sticky;` 在大多数现代浏览器上都得到了支持，但在一些旧版浏览器中可能需要使用前缀或不被支持。\n- **父元素的 `overflow`**: 如果一个元素的任何父元素具有 `overflow: hidden`、`overflow: scroll` 或 `overflow: auto` 样式，则 `position: sticky` 可能不会生效。\n- **祖先的 `display`**: 某些 `display` 值（如 `display: table-cell` 等）也可能影响 `position: sticky` 的行为。\n- **使用时机**：虽然 `sticky` 提供了一种便捷的方式来实现吸附效果，但在一些复杂的布局中，可能需要额外的样式调整或脚本支持来达到预期的效果。\n\n通过灵活运用 `position: sticky;`，可以在无需 JavaScript 的情况下，实现许多响应用户滚动的交互效果。\n",{"_54":302,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/884/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/884/timeline",{"_54":305,"_56":57,"_58":306,"_60":307,"_62":308,"_64":309,"_66":310,"_68":311,"_70":312,"_72":313,"_74":314,"_107":315,"_120":121,"_122":26,"_123":-5,"_124":322,"_126":323,"_148":141,"_142":325,"_144":325,"_147":-5,"_150":151,"_152":326,"_157":-5,"_158":327,"_160":328,"_172":330,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/881","https://api.github.com/repos/pro-collection/interview-question/issues/881/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/881/comments","https://api.github.com/repos/pro-collection/interview-question/issues/881/events","https://github.com/pro-collection/interview-question/issues/881",2526780781,"I_kwDOJGDC6c6Wm51t",881,"flex 布局中子元素不压缩，该如何设置属性【热度: 200】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[316,317],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":318,"_68":319,"_54":320,"_113":321,"_115":293,"_117":26,"_118":294},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":324,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T07:23:15Z",{"_154":141,"_155":141,"_156":141},"**关键词**：flex 子元素不压缩\n\n在 Flex 布局中，如果你想要子元素在容器内不被压缩，即保持其原始尺寸或指定尺寸，不受容器大小变化的影响，可以通过设置子元素的`flex-shrink`属性来实现。`flex-shrink`属性决定了当父容器大小小于其所有 flex 项总大小时，各 flex 项的缩小比例。默认值是 1，表示 flex 项会等比例缩小，以适应父容器的大小。\n\n要阻止子元素压缩，你应该将它的`flex-shrink`属性设置为 0。这样，无论容器大小如何变化，子元素都不会缩小。\n\n示例如下：\n\nHTML:\n\n```html\n

不压缩的项目

\n \n

\n```\n\nCSS:\n\n```css\n.flex-container {\n display: flex;\n /* 添加其他需要的flex布局属性 */\n}\n\n.flex-item {\n flex-shrink: 0; /* 这使得该flex项目不会被压缩 */\n /* 设置宽度或其他样式 */\n}\n```\n\n在这个例子中，任何带有`flex-item`类的元素都不会在容器空间不足时被压缩。\n\n此外，`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`这三个属性的简写。如果你想在保证元素不被压缩的同时，具体控制元素的放大行为或基础大小，也可以直接使用`flex`属性进行设置。例如，如果你还希望元素不放大，并且有一个固定的基础大小，可以这样设置：\n\n```css\n.flex-item {\n flex: 0 0 auto; /* 不放大，不缩小，基础大小为auto */\n}\n```\n\n这种方式提供了更细致的控制，`0 0 auto`分别对应`flex-grow`、`flex-shrink`和`flex-basis`的值。这告诉浏览器该项目即不应放大，也不应缩小，并且以其默认大小作为基础大小。\n",{"_54":329,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/881/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/881/timeline",{"_54":332,"_56":57,"_58":333,"_60":334,"_62":335,"_64":336,"_66":337,"_68":338,"_70":339,"_72":340,"_74":341,"_107":342,"_120":121,"_122":26,"_123":-5,"_124":349,"_126":350,"_148":141,"_142":352,"_144":353,"_147":-5,"_150":151,"_152":354,"_157":-5,"_158":355,"_160":356,"_172":358,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/870","https://api.github.com/repos/pro-collection/interview-question/issues/870/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/870/comments","https://api.github.com/repos/pro-collection/interview-question/issues/870/events","https://github.com/pro-collection/interview-question/issues/870",2498582754,"I_kwDOJGDC6c6U7Vji",870,"内联加载样式和外联加载样式有啥区别【热度: 383】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[343,344],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":345,"_68":346,"_54":347,"_113":348,"_115":293,"_117":26,"_118":294},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",[],{"_54":193,"_64":194,"_58":195,"_66":196,"_68":197,"_70":177,"_72":198,"_118":199,"_136":351,"_138":201,"_140":141,"_120":121,"_142":202,"_144":203,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T03:15:27Z","2024-08-31T03:15:28Z",{"_154":141,"_155":141,"_156":141},"**关键词**：样式加载\n\n内联样式（Inline Style）和外联样式（External Style）是 CSS 应用在 HTML 文档中的两种不同方法，它们主要的区别在于如何将 CSS 规则与 HTML 元素关联起来。\n\n### 内联样式\n\n- **定义方式**：通过元素的`style`属性直接在 HTML 标签内定义 CSS 样式。\n- **优先级**：内联样式的优先级高于外联样式和嵌入样式（在``标签内的`\n \n\n \n

这是一个打字机效果的文本

\n \n\n```\n\n在上述代码中，`.typewriter` 类的元素用于实现打字机效果。\n\n`animation: typing 4s steps(30), blink 0.5s step-end infinite;` 定义了两个动画：\n\n- `typing` 动画用于模拟文字逐个出现的效果，从宽度为 `0` 逐渐增加到 `300px`，`steps(30)` 表示分 30 步完成动画，使文字出现有逐个显示的效果。\n\n- `blink` 动画用于模拟光标闪烁效果，每 `0.5s` 闪烁一次，在 `50%` 进度时，光标（通过右边框实现）变为透明来模拟闪烁。\n",{"_54":479,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/792/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/792/timeline",{"_54":482,"_56":57,"_58":483,"_60":484,"_62":485,"_64":486,"_66":487,"_68":488,"_70":489,"_72":490,"_74":491,"_107":492,"_120":121,"_122":26,"_123":-5,"_124":499,"_126":500,"_148":141,"_142":502,"_144":503,"_147":-5,"_150":151,"_152":504,"_157":-5,"_158":505,"_160":506,"_172":508,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/789","https://api.github.com/repos/pro-collection/interview-question/issues/789/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/789/comments","https://api.github.com/repos/pro-collection/interview-question/issues/789/events","https://github.com/pro-collection/interview-question/issues/789",2405506925,"I_kwDOJGDC6c6PYR9t",789,"css 实现翻牌效果【热度: 116】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[493,494],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":495,"_68":496,"_54":497,"_113":498,"_115":293,"_117":26,"_118":294},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":501,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-12T12:51:33Z","2024-07-12T12:53:09Z",{"_154":141,"_155":141,"_156":141},"**关键词**：css 动效应用\r\n\r\n主要是考察几个属性的使用\r\n\r\n- `transform: rotateY` 用于 Y 轴旋转\r\n- `transition` 用于过度动画\r\n\r\n还有一个要点：\r\n\r\n- 翻转卡牌的时候，正面在上，要将背面隐藏；背面在上，要将正面隐藏；\r\n\r\n效果如下：\r\n![01.gif](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/404f57ed66964d9a8410bed9d3859c77~tplv-73owjymdk6-watermark.image?policy=eyJ2bSI6MywidWlkIjoiNDEyNTAyMzM1Nzg5OTM2NyJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1720875123&x-orig-sign=VMh9nhfE8JreFH6TyeVg7aOUre4%3D)\r\n\r\n**实现比较简单，直接贴代码**：\r\n\r\n```html\r\n\r\n\r\n \r\n \r\n \r\n \r\n

\r\n

我是正面

\r\n

\r\n 在上述代码中，我们创建了一个带有 card 类的容器，内部有一个 card-inner 元素，它包含了 card-front（正面）和\r\n card-back（背面）两个元素。当鼠标悬停在 card 元素上时，通过 :hover 选择器将 card-inner 元素绕 Y 轴旋转 180\r\n 度，实现翻牌效果。\r\n

\r\n

\r\n \r\n\r\n```\r\n",{"_54":507,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/789/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/789/timeline",{"_54":510,"_56":57,"_58":511,"_60":512,"_62":513,"_64":514,"_66":515,"_68":516,"_70":517,"_72":518,"_74":519,"_107":520,"_120":121,"_122":26,"_123":-5,"_124":523,"_126":524,"_148":141,"_142":526,"_144":526,"_147":-5,"_150":151,"_152":527,"_157":-5,"_158":528,"_160":529,"_172":531,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/787","https://api.github.com/repos/pro-collection/interview-question/issues/787/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/787/comments","https://api.github.com/repos/pro-collection/interview-question/issues/787/events","https://github.com/pro-collection/interview-question/issues/787",2405459055,"I_kwDOJGDC6c6PYGRv",787,"flex：1 代表什么【热度: 400】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[521,522],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":373,"_68":374,"_54":375,"_113":376,"_115":293,"_117":26,"_118":294},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":525,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-07-12T12:27:11Z",{"_154":141,"_155":141,"_156":141},"**关键词**：flex 布局相关属性问题\n\n在 CSS 的弹性盒模型（Flexbox）中，`flex: 1`表示子项（flex 子项）的伸缩性。\n\n具体来说，`flex: 1`是`flex-grow`、`flex-shrink`和`flex-basis`三个属性的简写。其默认值等同于`flex: 1 1 0%`，分别代表以下含义：\n\n- `flex-grow: 1`：定义项目的放大比例为 1。这意味着当弹性容器有剩余空间时，该子项将按照比例伸展以填充剩余空间。如果存在多个`flex-grow: 1`的子项，它们将等分剩余空间。\n- `flex-shrink: 1`：定义项目的缩小比例为 1。即如果空间不足，该项目将缩小。\n- `flex-basis: 0%`：在分配多余空间之前，计算项目是否有多余空间，这里的`0%`表示不考虑项目本身的大小。\n\n`flex: 1`经常用于自适应布局。例如，将父容器的`display`设置为`flex`，侧边栏大小固定后，将内容区设置为`flex: 1`，内容区则会自动放大占满剩余空间。\n\n以下是一个简单的示例代码，展示了`flex: 1`的效果：\n\n```html\n\n\n \n \n \n\n \n

item1

item2

\n \n\n```\n\n在上述代码中，`.container`是一个 flex 容器，它包含两个子元素`.item1`和`.item2`，并且都将`flex`属性设置为`1`。当调整`.container`的宽度时，`.item1`和`.item2`会等比例地增大或缩小，以占满剩余空间。\n",{"_54":530,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/787/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/787/timeline",{"_54":533,"_56":57,"_58":534,"_60":535,"_62":536,"_64":537,"_66":538,"_68":539,"_70":540,"_72":541,"_74":542,"_107":543,"_120":121,"_122":26,"_123":-5,"_124":546,"_126":547,"_148":141,"_142":549,"_144":550,"_147":-5,"_150":151,"_152":551,"_157":-5,"_158":552,"_160":553,"_172":555,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/756","https://api.github.com/repos/pro-collection/interview-question/issues/756/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/756/comments","https://api.github.com/repos/pro-collection/interview-question/issues/756/events","https://github.com/pro-collection/interview-question/issues/756",2310925767,"I_kwDOJGDC6c6Jve3H",756,"CSS 属性计算函数 Calc 介绍一下【热度: 228】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[544,545],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":468,"_68":469,"_54":470,"_113":471,"_115":293,"_117":26,"_118":294},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":548,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-22T16:09:00Z","2024-05-22T16:09:01Z",{"_154":141,"_155":141,"_156":141},"**关键词**：属性计算函数 calc\n\nCSS 属性计算函数 `calc()` 是用来进行动态的尺寸计算以及数值混合运算的一种函数。它增强了纯 CSS 的灵活性，允许你在属性值的设置中直接执行基础的加（`+`）、减（`-`）、乘（`*`）、除（`/`）运算。\n\n###使用方式\n\n`calc()` 函数用于各种 CSS 属性，如 `width`、`height`、`margin`、`padding`、`top`、`right`、`bottom`、`left`、`font-size` 等。以下是 `calc()` 函数的基本语法：\n\n```css\nproperty: calc(expression);\n```\n\n其中，`expression` 可以包括：\n\n- 其他 CSS 单位值\n- 数字常量\n- 括号来控制运算顺序\n\n### 基础示例\n\n```css\n.element {\n width: calc(100% - 50px); // 宽度是容器宽度减50px\n padding: calc(1em + 10px); // 上下内边距是当前字体尺寸的1em加上10px\n margin: calc(10px / 2); // 外边距为5px\n font-size: calc(12px + 2vw); // 根据视窗宽度改变字体大小\n}\n```\n\n### 高级用法\n\n使用 `calc()` 的同时可以嵌套使用 `min()` 和 `max()` 函数，这种组合对响应式设计非常有用。\n\n```css\n.element {\n width: calc(min(100%, 500px)); // 宽度始终是容器的100%，但不超过500px\n font-size: calc(max(12px, 1vw)); // 在某些实现中此用法可能不生效\n}\n```\n\n### 括号\n\n如果要进行优先级计算，你需要使用括号，比如在多重运算中：\n\n```css\n.element {\n width: calc(25% + (2em * (100vw - 200px) / 2));\n}\n```\n\n### 注意事项\n\n- 在进行除法运算时，要注意除数不能为零。\n- CSS 变量可以在 `calc()` 中使用，使得你能够进行更灵活的样式控制。\n- `calc()` 必须确保表达式的两侧是兼容的单位，比如不能将像素（`px`）和百分比（`%`）相除。\n- 我很遗憾要指出一个小误导：`calc()` 并不是 CSS 的原生属性，尽管它是 CSS 核心语法的一部分，它的适用性非常广泛。\n\n### 兼容性\n\n截至我的知识更新点（2023 年），`calc()` 得到了现代浏览器的广泛支持，包括 Chrome、Firefox、Safari、Edge 以及旧的 Internet Explorer 版本。唯一的例外是 Windows Phone 中的老版本浏览器。\n\n### 实际应用场景\n\n`calc()` 的一个常见用途是在响应式设计中，你可以用 `calc()` 来设置一个固定宽度和视口宽度的融合：\n\n```css\n.container {\n width: calc(100% - 20px); /* 虚拟列不存在时，容器宽度为屏幕宽度减去20px */\n}\n.grid {\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n /* 这部分代码创建一个栅格布局，其中每一格至少宽250px，每列最大填充至填满屏幕，如果没有空间填满则按最小宽度计算 */\n}\n```\n\n通过 `calc()` 函数，开发人员可以设计出更加灵活和响应用户屏幕大小的界面布局。\n",{"_54":554,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/756/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/756/timeline",{"_54":557,"_56":57,"_58":558,"_60":559,"_62":560,"_64":561,"_66":562,"_68":563,"_70":564,"_72":565,"_74":566,"_107":567,"_120":121,"_122":26,"_123":-5,"_124":570,"_126":571,"_148":141,"_142":573,"_144":574,"_147":-5,"_150":151,"_152":575,"_157":-5,"_158":576,"_160":577,"_172":579,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/755","https://api.github.com/repos/pro-collection/interview-question/issues/755/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/755/comments","https://api.github.com/repos/pro-collection/interview-question/issues/755/events","https://github.com/pro-collection/interview-question/issues/755",2310917819,"I_kwDOJGDC6c6Jvc67",755,"less 函数如何使用？【热度: 229】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[568,569],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":468,"_68":469,"_54":470,"_113":471,"_115":293,"_117":26,"_118":294},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":572,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-22T16:05:18Z","2024-05-22T16:05:19Z",{"_154":141,"_155":141,"_156":141},"**关键词**：less 函数\n\nLESS 是一种基于 JavaScript 的 CSS 预处理器，它扩展了 CSS 的功能，提供了变量、嵌套、混合（Mixins）、函数等功能。LESS 中的函数允许你执行计算、转换和操纵值的操作，使得你的样式表更加灵活和动态。\n\n### 使用 LESS 函数的基本步骤：\n\n1. **定义函数**：你可以定义一个 LESS 函数，它接受参数并执行代码块。\n\n```less\n.my-function(@arg) {\n .result {\n width: @arg;\n }\n}\n```\n\n2. **调用函数**：使用 `@` 前缀后跟函数名和所需的参数列表来调用函数。\n\n```less\n.my-class {\n .my-function(200px);\n}\n```\n\n3. **传递参数**：函数可以接收一个或多个参数。上面的例子只传递一个参数。\n\n### 示例：简单的 LESS 函数\n\n```less\n// 定义一个 LESS 函数\n.pi(@num) {\n .pi-box {\n width: @num * 3.14159;\n }\n}\n\n// 调用这个函数\nbody {\n .pi(5px);\n}\n```\n\n在该示例中，`pi` 是一个接受数字参数并返回其圆周长度的 LESS 函数。这个 `pi` 函数在 `body` 选择器内部被调用，并设置了宽度为 5 \\* 3.14159 像素。\n\n### LESS 内建函数\n\nLESS 还包括多个内建函数，可以直接在 LESS 代码中使用。以下是一些常见的内建函数示例：\n\n- **`percentage()`**：将值转换成百分比。\n ```less\n margin: percentage(20px / 100px); // 输出 20%\n ```\n- **`round()`**：四舍五入数字。\n ```less\n width: round(23.7px); // 输出 24px\n ```\n- **`floor()`** 和 **`ceil()`**：向下取整和向上取整。\n\n ```less\n height: ceil(14.2px); // 输出 15px\n ```\n\n- **`unit()`** 和 **`convert()`**：分别用来获取值的单位和转换单位。\n\n ```css\n width: convert(10, ms); // 将 10 转换为毫秒\n margin: unit(25, \"%\"); // 输出默认单位为 px，这次你却要改成百分比\n ```\n\n- **`color-function()`**：用于操作颜色值的函数，例如 `lighten()`、`darken()`、`saturate()` 等。\n\n ```less\n background: lighten(#800, 10%); // 将颜色 #800 变亮 10%\n ```\n\n- **`e()`**：允许你将 CSS 代码作为参数传递到 `&` 中，用于可扩展的类选择器。\n ```less\n .borderbox {\n *,\n *:before,\n *:after {\n .box-sizing(border-box);\n }\n }\n ```\n\n### 注意事项：\n\n- 函数可以返回任意值，包括颜色、数字、字符串和数组。\n- 如果想要执行的是一个操作而非函数定义，需要注意的是 LESS 并不像 JavaScript 一样需要用 `function` 关键字声明。\n\n合理使用函数可以极大增加 CSS 的动态性和灵活性，是构建维护性和复用性更强的 CSS 不可或缺的部分。\n",{"_54":578,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/755/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/755/timeline",{"_54":581,"_56":57,"_58":582,"_60":583,"_62":584,"_64":585,"_66":586,"_68":587,"_70":588,"_72":589,"_74":590,"_107":591,"_120":121,"_122":26,"_123":-5,"_124":594,"_126":595,"_148":141,"_142":597,"_144":598,"_147":-5,"_150":151,"_152":599,"_157":-5,"_158":600,"_160":601,"_172":603,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/754","https://api.github.com/repos/pro-collection/interview-question/issues/754/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/754/comments","https://api.github.com/repos/pro-collection/interview-question/issues/754/events","https://github.com/pro-collection/interview-question/issues/754",2310910480,"I_kwDOJGDC6c6JvbIQ",754,"介绍一下 CSS 变量怎么声明和使用？【热度: 688】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[592,593],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":468,"_68":469,"_54":470,"_113":471,"_115":293,"_117":26,"_118":294},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":596,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-22T16:01:19Z","2024-05-22T16:01:20Z",{"_154":141,"_155":141,"_156":141},"**关键词**：CSS 变量\n\nCSS 自定义属性，又称 CSS 变量，是一种在 CSS 样式表中声明可以使用任意值的方法，这样的值在同一份 CSS 代码中可以多次引用并调用来替代特定的内容。使用 CSS 变量可以提高样式表的可维护性和灵活性。以下是如何声明和使用 CSS 变量的步骤：\n\n### 声明 CSS 变量\n\nCSS 变量的声明总是以 `--` 开头，跟随变量名。你可以在 CSS 的任何范围内声明变量，包括 `:root`（相当于 HTML 的根），这样所有样式规则都可以访问到。\n\n**示例**：\n\n```css\n:root {\n --main-color: #3498db;\n --padding: 8px;\n --transition-speed: 0.3s;\n}\n```\n\n### 使用 CSS 变量\n\n在 CSS 中使用变量时，你需要使用 `var()` 函数，并在括号中提供变量名，可以包含在`--` 前缀之后。\n\n**示例**：\n\n```css\nbody {\n background-color: var(--main-color);\n padding: var(--padding);\n transition: all var(--transition-speed) ease-in-out;\n}\n```\n\n### 默认值\n\n有时候，你可能想为 CSS 变量提供一个默认值，以防它未被声明时使用。在 `var()` 函数中，你可以添加一个可选的第二个参数作为默认值。\n\n**示例**：\n\n```css\nbody {\n font-size: var(--font-size, 16px);\n}\n```\n\n在上面的例子中，如果 `--font-size` 变量没有在任何地方声明，`body` 的 `font-size`将默认使用 `16px`。\n\n### 作用域\n\n变量的作用域是根据它们声明的地方确定的：\n\n- 在 `:root` 选择器内声明的变量是全局变量，在任何地方都可以使用。\n- 在其他元素或伪类的 CSS 规则中声明的变量会在该元素或这些伪类中局部有效。\n\n**示例**：\n\n```css\nbutton {\n --button-bg-color: #e74c3c;\n}\n\n.btn-primary {\n background-color: var(--button-bg-color);\n}\n```\n\n在上面的例子中，`--button-bg-color` 变量只在 `button` 元素中声明，因此它只在 `button` 下的所有样式规则中可用，`.btn-primary`则是基于这个变量设置的。\n\nCSS 变量是非常强大的工具，特别是当你需要在整个页面上保持一致性，或者是要实现主题应用时。它们有助于实现动态主题，使样式管理更系统化。\n",{"_54":602,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/754/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/754/timeline",{"_54":605,"_56":57,"_58":606,"_60":607,"_62":608,"_64":609,"_66":610,"_68":611,"_70":612,"_72":613,"_74":614,"_107":615,"_120":121,"_122":26,"_123":-5,"_124":618,"_126":619,"_148":141,"_142":621,"_144":622,"_147":-5,"_150":151,"_152":623,"_157":-5,"_158":624,"_160":625,"_172":627,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/751","https://api.github.com/repos/pro-collection/interview-question/issues/751/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/751/comments","https://api.github.com/repos/pro-collection/interview-question/issues/751/events","https://github.com/pro-collection/interview-question/issues/751",2290001931,"I_kwDOJGDC6c6IfqgL",751,"CSS 在2023 迎来重大更新，更新内容是什么【热度: 548】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[616,617],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":468,"_68":469,"_54":470,"_113":471,"_115":293,"_117":26,"_118":294},[],{"_54":256,"_64":257,"_58":258,"_66":259,"_68":260,"_70":261,"_72":262,"_118":263,"_136":620,"_138":265,"_140":141,"_120":121,"_142":266,"_144":267,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-10T16:04:00Z","2024-05-10T16:04:01Z",{"_154":141,"_155":141,"_156":141},"**关键词**：CSS 2023 年重大更新\n\n新特性非常多，总结在下面\n\n详情请看文档：https://juejin.cn/post/7320288231111016498\n\n### 架构基础\n\n- 级联层\n- 嵌套\n- 作用域\n- 选择器 :is() 和 :where()\n- 选择器 :has()\n- 复杂的第 n-. 选择\n- CSS 三角函数\n- 子网格 subgrid\n\n### 排版\n\n- 首字下沉\n- 均衡和美观\n\n### 颜色\n\n- 高清色彩空间\n- color-mix() 函数\n- 相对颜色语法\n- 响应浅色或深色模式的 light-dark() 函数\n\n### 响应式设计\n\n- 容器查询之尺寸查询\n- 容器查询之样式查询\n- 容器查询之状态查询\n- 更新媒体查询\n- 脚本媒体查询\n- 降低透明度的媒体查询\n- 媒体查询范围\n\n### 交互动画\n\n- 视图过渡\n- 滚动驱动动效\n- 离散属性动画\n- @starting-style\n- overlay\n- 锚点定位\n- 动画合成\n- 缓动函数 linear()\n- Scrollend 事件\n- 滚动捕捉\n",{"_54":626,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/751/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/751/timeline",{"_54":629,"_56":57,"_58":630,"_60":631,"_62":632,"_64":633,"_66":634,"_68":635,"_70":636,"_72":637,"_74":638,"_107":639,"_120":121,"_122":26,"_123":-5,"_124":642,"_126":643,"_148":141,"_142":645,"_144":645,"_147":-5,"_150":151,"_152":646,"_157":-5,"_158":647,"_160":648,"_172":650,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/740","https://api.github.com/repos/pro-collection/interview-question/issues/740/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/740/comments","https://api.github.com/repos/pro-collection/interview-question/issues/740/events","https://github.com/pro-collection/interview-question/issues/740",2279582114,"I_kwDOJGDC6c6H36mi",740,"vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥？【热度: 244】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[640,641],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":289,"_68":290,"_54":291,"_113":292,"_115":293,"_117":26,"_118":294},[],{"_54":256,"_64":257,"_58":258,"_66":259,"_68":260,"_70":261,"_72":262,"_118":263,"_136":644,"_138":265,"_140":141,"_120":121,"_142":266,"_144":267,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-05T15:20:28Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Scoped Styles 样式隔离\n\n在 Vue 中，`.vue` 单文件组件的 `\n```\n\n`vue-loader` 将处理上述代码，模板中的 `\n```\n\nCSS 则会被转换成：\n\n```css\n.btn[data-v-f3f3eg9] {\n background-color: blue;\n}\n```\n\n因此，`.btn` 类的样式仅会应用于拥有 `data-v-f3f3eg9` 属性的 `

这是红色的

这是红色的