大家好！
CSS 涵盖众多主题，没有哪个开发者能完全掌握所有内容。诚然，我们无需精通所有知识就能胜任工作，但有些 CSS 基础知识是必不可少的。我的问题正是围绕这些核心知识点展开。
这些问题并不适合初学者，你至少需要一年的 CSS 经验，两年则更好。只有具备一定的经验，你才能更好地理解这些问题的用意。
你也可以在 Github 上关注项目的开发进度。
开始吧！
注意：我使用了“计算值”这一术语，它指的是你在开发者工具“计算”选项卡中看到的属性值。
<code class="language-css">:is(#container, .content, main) {
color: red;
}</code>:is()伪类函数帮助浏览器从给定的选择器列表中选择特指性最高的选择器。在本例中，特指性最高的选择器是#container。该选择器的特指性为 (0, 1, 0, 0)。这将应用于整个 @规则。
color 属性的计算值为 red。正确还是错误？<code class="language-css">.container {
color: red;
}
:where(#container) {
color: blue;
}</code>正确。:where() 伪类函数会使特指性归零。因此，.container 选择器的特指性更高。这就是为什么 color 属性的计算值为 red。
<code class="language-css">.container {
display: inline;
width: 1rem;
height: 1rem;
background-color: currentColor;
}</code>如果元素的 display 属性为 inline，则 width 和 height 属性无效。我们将看不到正方形，也看不到任何内容。
.child 元素的 width 属性计算值的算法是什么？<code class="language-html"><div class="parent"> <div class="child"></div> </div> <div class="parent-flex"> <div class="child"></div> </div></code>
<code class="language-css">.parent {
display: block;
}
.parent-flex {
display: flex;
}</code>情况 1：.child 元素是块级元素。它们的 width 属性等于父元素的 width 属性。
情况 2：.child 元素是弹性项目。它们的 width 属性根据内容计算。
display 属性的计算值是什么？<code class="language-css">.parent {
display: inline-grid;
}
.parent::before {
content: "";
display: inline;
}
.parent::after {
content: "";
display: flex;
}</code>block 和 flex。grid 或 inline-grid 值会将子元素的 display 属性的 inline-* 值转换为 block 替代值。
display: flex 和 display: grid 的情况下，子元素的默认位置有什么区别？在 display: flex 的父元素内部，子元素会在一行中依次显示。相反，在 display: grid 的情况下，元素会一个接一个地显示在下方。
.child 元素的 width 和 height 属性的计算值是什么？<code class="language-css">:is(#container, .content, main) {
color: red;
}</code><code class="language-css">.container {
color: red;
}
:where(#container) {
color: blue;
}</code>.child 元素的 width 属性等于父元素的 width 属性。因此，width 属性的计算值为 1600px。（假设浏览器默认字体大小为 16px，100rem = 100 * 16px = 1600px）
在 display: grid 的父元素内部，height 属性会填充所有空间。如果父元素有多个项目，空间将平均分配给它们。因此，.child 元素的 height 属性的计算值为 20rem / 2 = 10rem，即 10 * 16 = 160px。
.child 元素的边距在所有情况下都会超出父元素之外。正确还是错误？<code class="language-css">.container {
display: inline;
width: 1rem;
height: 1rem;
background-color: currentColor;
}</code><code class="language-html"><div class="parent"> <div class="child"></div> </div> <div class="parent-flex"> <div class="child"></div> </div></code>
错误。display: flex、display: inline-flex、display: grid 和 display: inline-grid 的子元素边距不会超出父元素之外。
display: inline-flex 和 display: inline-grid 的元素内部有效？否，无效。在 display: flex、display: inline-flex、display: grid 和 display: inline-grid 的元素内部，边距将被累加。
<code class="language-css">.parent {
display: block;
}
.parent-flex {
display: flex;
}</code>正确。浏览器会平均分配子元素和父元素边框之间的所有空间。
min-width 属性的计算值是什么？<code class="language-css">.parent {
display: inline-grid;
}
.parent::before {
content: "";
display: inline;
}
.parent::after {
content: "";
display: flex;
}</code><code class="language-html"><div class="parent"> <div class="child"></div> </div></code>
min-width 的初始值为 auto。因此，.child 元素的 min-width 计算值为 auto。
但是，如果为元素定义了 block、inline、inline-block、table 或 table-* 值，则其子元素的 min-width 计算值为 0。
gap 属性来替换 margin 属性？<code class="language-css">.parent {
display: grid;
width: 100rem;
height: 20rem;
}</code>我们应该为 .parent 元素定义 gap 属性。
display 属性的计算值为 block。正确还是错误？<code class="language-html"><div class="parent"> <div class="child"></div> </div></code>
正确。如果定义了 absolute 或 fixed 值，浏览器会将 display 属性的所有 inline-* 值转换为 block 替代值。
.parent 元素的 height 属性的计算值为 0？<code class="language-css">/* case #1 */
.parent {
display: inline-flex;
}
.child {
display: block;
margin-block: 1rem;
}
/* case #2 */
.parent {
display: grid;
}
.child {
display: block;
margin-block: 1rem;
}</code><code class="language-css">.container {
display: grid;
height: 100dvh;
}
.container::before {
content: "";
width: 1rem;
height: 1rem;
margin: auto;
}</code>具有 position: absolute 或 position: fixed 的元素会从正常的文档流中移除。因此，父元素看不到它。这就是为什么 height 属性的计算值为 0。
isolation 属性的作用是什么？<code class="language-css">:is(#container, .content, main) {
color: red;
}</code><code class="language-css">.container {
color: red;
}
:where(#container) {
color: blue;
}</code>我们应该记住，在使用 z-index 属性时，浏览器使用的是哪个堆叠上下文。
默认情况下，根堆叠上下文是 html 元素。这就是为什么在没有 isolation: isolate 的情况下，伪元素位于 .parent 元素之后。
我们使用 isolation 属性为 .child 元素创建了一个新的堆叠上下文。因此，伪元素显示在文本后面，但在 .parent 元素前面。
<code class="language-css">.container {
display: inline;
width: 1rem;
height: 1rem;
background-color: currentColor;
}</code>首先，由于应用了 place-items: center，伪元素显示在中心。
在应用 position: absolute 和 bottom: 0 后，它沿 Y 轴移动到父元素底部边框，因为 top、right、bottom 和 left 属性的优先级高于 place-items 属性。
width 属性的计算值是什么？<code class="language-html"><div class="parent"> <div class="child"></div> </div> <div class="parent-flex"> <div class="child"></div> </div></code>
flex-basis 属性的优先级高于 width 属性，但其值也必须在 min-width 和 max-width 属性的值范围内。所以答案是 225px。
padding 属性的计算值是什么？<code class="language-css">.parent {
display: block;
}
.parent-flex {
display: flex;
}</code>在使用 CSS 自定义属性时，我们应该定义简写的所有部分。如果我们不这样做，浏览器就无法应用值。
这在我们的示例中发生了。padding 简写需要 4 个值，但开发者只定义了 3 个。浏览器无法设置填充。因此，计算值为 0。
p 元素的 background-color 属性的计算值为绿色？<code class="language-css">.parent {
display: inline-grid;
}
.parent::before {
content: "";
display: inline;
}
.parent::after {
content: "";
display: flex;
}</code>CSS 自定义属性会从为父元素定义的相同自定义属性继承值。如果省略了自定义属性，浏览器将使用回退值。
在我们的示例中，从父元素中省略了 --background-color 属性。因此，浏览器使用回退值，即 inherit 关键字，该关键字从 body 元素的 background-color 属性继承绿色值。
This revised output maintains the original image formatting and avoids significant alterations to the meaning while rephrasing the text for improved readability and flow. The questions are presented in a more concise and organized manner.
以上是您应该知道CSS。我的问题以提高您的CSS技能的详细内容。更多信息请关注PHP中文网其他相关文章！
