CSS面试题精选及详细解答。😁🏆🥇💯 第二部分
欢迎回来。这是关于CSS面试常见问题及答案系列文章的第二篇。希望您喜欢第一篇：
今天我将发布一系列关于 CSS flex-box、网格布局等问题。和往常一样，我会先发布问题，然后再发布答案。
我希望这些答案具有代表性，但并非绝对必要。如果你正在准备技术面试，你需要能够用自己的语言解释事物的工作原理，最好还能举一些例子。你不必事事精通，但至少要坦诚地说明你知道什么或不知道什么，这样才能清晰地表达自己的想法。
那我们开始吧。
问题🤔💭
Q1.)如果向同级元素添加相同方向的内容会发生什么？float
Q2）浮动元素会增加其父元素的高度。正确还是错误？
Q3）什么是伪元素？举例说明。
Q4.)我们通常如何使页面内的内容居中？
Q5.)请用简单的语言解释什么是块格式上下文（BFC）？
Q6.)请解释和之间的区别？:nth-child:nth-of-type
Q7.)弹性容器的默认方向是什么？
Q8.)说明如何使用属性选择器，根据元素的某个属性来选择元素。
Q9.)弹性盒布局包含多少个轴？
Q10.)和之间有什么区别？inline-flexinline-block
Q11.)如果一个物品的弹性增长值为 0，会发生什么情况？
Q12）给定以下 HTML 和 CSS 代码：
<div class="flex">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
.flex {
display: flex;
}
.column {
flex-basis: 40%;
flex-shrink: 0;
}
在这种情况下，我们的弹性容器会发生什么情况？我们该如何解决？
Q13.)该规则的完整展开式是什么flex: 2？
Q14）给定以下 HTML 和 CSS 代码：
<body class="flex">
<div class="column-main"></div>
<div class="column-sidebar"></div>
</div>
.flex {
display: flex;
}
.column-main {
flex: 2;
}
.column-sidebar {
flex: 1;
}
我们还知道该body元素没有边距或内边距，视口的总宽度为 1157px。
column-main和元素的宽度分别是多少像素column-sidebar？
Q15.)给定以下 HTML 代码：
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
<li class="nav-right"><a href="/contact">Contact</a></li>
</ul>
如何才能找到紧随其他列表项之后的每一个列表项？
Q16.)如果在 Safari 中运行以下规则会发生什么？
.nav {
display: -ms-flexbox;
}
Q17.)当我们需要flex-direction: column执行flex-basis,,flex-grow并flex-shrink应用于高度或宽度时？
Q18）我们想要选择所有类型不是单选按钮或数字的输入元素。该如何操作？
Q19.)柔性包装箱中，和有什么区别？align-itemsalign-content
Q20）你有一个input type=text元素并应用了一条display: block规则。你注意到输入内容单独占一行，但并没有扩展以填充输入文本区域的整个宽度。这是为什么？如何解决这个问题？
Q21.)网格布局中的单位是什么意思？fr
Q22.)当规则flex-wrap失效时wrap，wrap-reverse会发生什么flex-shrink？
Q23.)我们有以下 html 和 css 代码：
<div class="flex">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
.flex {
display: flex;
justify-content: flex-start;
}
.column {
background-color: blue;
width: 70px;
margin: auto;
height: 70px;
}
我们注意到这些项目并没有按照规则左对齐justify-content。这是为什么呢？
Q24.)如何创建一个 3x2 的等分网格布局，单元格之间有 0.25em 的间隙？
Q25）随着网格布局的出现，弹性盒子布局就没用了。对还是错？
Q26）我们需要定义一个两列的网格，网格中有三条垂直线，分别命名为起点、中间和终点。第一列的宽度是第二列的两倍。我们该如何实现？
Q27.)你对特征查询了解多少？我们如何声明它们？
Q28.)该规则的目的是什么object-fit？
Q29.)定义网格模板时，属性和属性之间有什么区别？auto-fillauto-fit
Q30）justify-content在网格布局中没有实际意义。正确还是错误？
答案⛅🗽
A1.) 如果将多个元素沿同一方向浮动，它们将并排堆叠在一起。
A2）错误。这是因为浮动元素只是允许文本环绕它们，并不会增大父容器的高度来适应新的高度。
A3.) 伪元素是特殊的选择器，以双冒号 (::) 语法开头。它们通常用于定位文档的特定部分。例如，`<pre>`::before和 ` ::after<pre>` 用于在元素的开头或结尾插入内容。
A4.) 我们使用两个嵌套容器，然后设置内部容器的边距，使其位于外部容器内。例如：
.container {
max-width: 960px;
margin: 0 auto;
}
<body class="main">
<div class="container"></div>
</body>
这样，在较小的视口中，内部容器将填满屏幕，但在较大的视口中，它将停止在 960px 宽度。
A5.) 块格式上下文是块框布局发生的区域，也是浮动元素与其他元素交互的区域。
换句话说，我们有一个部分，其中某些规则仅适用于同一块格式上下文中的元素，而不适用于不同块格式上下文中的元素。创建块格式上下文的一种简单方法是使用 overflow 属性值不为 visible 的块元素overflow: auto，或者使用绝对定位的元素。
A6.) 我们过去常常:nth-child从 0 开始定位兄弟元素中的位置。例如，:nth-child(0) 将定位第一个子元素，:nth-child(2n)将定位每隔一个子元素，依此类推。我们过去常常:nth-of-type从 0 开始定位兄弟元素中相同类型的位置。
A7.) 默认情况下，弹性项目从左到右并排排列成一行。
A8）属性选择器定义如下：
[class*="column-"] {
}
这将匹配所有 class 属性包含指定column-值的元素。例如： `<class>`将被匹配column-1，但`<class>` 不会被匹配。column-2column
A9.) 两个轴。主轴和横轴。
A10.)inline-flex创建一个容器，其中的元素
不会自动扩展到 100% 宽度。它使弹性容器以行内方式显示，并且容器项的行为与display:flex.
项目的行为与容器内联显示inline-block相同。display:block
A11.) 当一个项目的 flex-grow 为 0 时，它不会超过其 flex 基础参数。
A12.) 由于规则的限制，弹性项目会超出容器宽度，因为它们的总宽度超过了 100% flex-shrink: 0。我们可以通过将其更改为flex-shrink: 1.来解决这个问题。
A13.)flex: 2是以下缩写的缩写：
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
A14.) 它将分别约为 1157771px和386px1157。我们可以将其计算为总宽度的比例，例如，我们总共有 2 + 1 = 3 个弹性项目，其中column-main1157 占用 2/3 = 0.666 倍，即 771px，其余部分占用约column-sidebar386px。
A15.) 我们需要使用以下选择器：
.nav > li + li {}
该操作将以每个容器nav > li的第一个列表项为目标，并将匹配紧随其后的元素。.nav+ li
A16.) 它会忽略此规则，并且不会应用它，display: flex因为 Safari 没有关联的规则。这是一个适用于 IE10 等旧版浏览器的浏览器厂商前缀示例。
A17.) 它将应用于元素的高度而不是宽度。
A18.) 我们需要使用两个not反转选择的选择器，并将它们合并在一起。例如：
input:not([type=radio]):not([type=number]
A19.) 此align-items规则控制项目沿交叉轴的位置。例如，对于flex-direction: row列轴，它控制项目沿交叉轴的位置，反之亦然。此align-content规则仅flex-wrap在启用时生效，并控制弹性行沿交叉轴的间距。
A20.) 对于input元素而言，该size属性决定了它的宽度，大致指示了它在不滚动的情况下应该包含的字符数。设置该属性display:block will只会将其放置在单独的一行中。您可以通过应用规则来修复它width: 100%。
A21.)fr表示网格布局中用于表示整体的一部分的分数单位。
A22.) 在这种情况下，因为我们允许换行，所以flex-shrink不会按照该规则缩小。
A23.) 因为我们添加了该规则，所以margin: auto;该justify-content规则不会生效。
A24.) 我们可以使用以下 CSS：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0.25em;
}
A25.) 错误。网格布局和弹性盒子布局是互补的。例如，弹性盒子布局是一维的，适用于基于内容的规则，而网格布局是二维的，适用于基于布局的规则。
A26.) 我们需要使用以下规则：
grid-template-columns: [start] 2fr [middle] 1fr [end];
这里[start]标记了起始网格线、[middle]中间网格线和[end]终点网格线。中间的分数表示布局的跨度。我们现在可以这样使用它：
grid-column: [start] / [end];
列将横跨整个宽度，从始至终。
A27.) 特性查询与特性标志非常相似。它们是我们添加的检查，用于验证当前浏览器是否支持特定的 CSS 属性或值。例如：
@supports (display: grid) {
...
}
会检查该display: grid规则是否受支持，如果受支持，则会将块规则应用于当前样式。如果不受支持，则会跳过该样式。
A28.) 此object-fit规则仅适用于 <div>img或video<span> 元素。它用于确定如何调整它们的大小以适应其容器。
例如，我们有一个宽高比为 4:3 的图像：
img {
width: 400px;
height: 300px;
}
如果我们改变图像的尺寸，width: 300px, height 400px就会破坏其宽高比，导致图像失真。
为了解决这个问题，我们需要应用例如缩放object-fit: cover或object-fit:contain调整等方法，以保持宽高比不变。
A29.)auto-fill浏览器会尽可能将多个项目放置在同一行或同一列中，如果有空间，则会创建额外的空白轨道。另一方面，auto-fit它不会创建额外的轨道，而是会尝试扩展轨道，使其占据所有可用空间。例如，使用以下规则：
.grid-container--fill {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-container--fit {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
添加的列越多，grid-container--fill元素就越容易被挤压到最小宽度 100 像素，达到该宽度后会自动换行。它grid-container--fit会尝试将元素扩展到可用空间，直至达到可用宽度的百分比。
A30.) 错误。实际上它确实有这个功能。它用于网格容器中，以便在其中水平放置轨道。
例如：
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(4, 200px);
justify-content: center;
}
如果容器空间宽度大于 800px，则所有列将居中放置。