大規模な工場へのインタビュー、これらの CSS の質問は習得する必要があります

現代のフロントエンドでは、インタビューは CSS 調査の要件が低く、JavaScript や JavaScript の特定の細分化されたトピックと比較することはほとんどできません。

この記事では、ほとんどの企業で CSS 面接に使用できる CSS 面接の質問をいくつか紹介します。

その他の CSS インタビューの質問については、CSSインタビューの質問をご覧ください。

ボックスモデル

トピック: CSS ボックスモデルの簡単な説明

CSS のボックスモデルには、主に次の 2 つのタイプが含まれており、 box-sizingプロパティで設定できます。

content-box: デフォルトのプロパティ。幅にはコンテンツのみが含まれます
border-box:幅が含まれています (コンテンツ、パディング、境界線)

CSS の特異性 (重み)

トピック: CSS の特異性について簡単に説明する

css specificityつまりcssでのセレクターの重みは、以下の3種類のセレクターが順番に降りてくる

idなどのセレクター#app
class、および、などのセレクターattributepseudo-classes.header[type="radio"]:hover
typeh1、pおよびなどのラベルセレクターおよび疑似要素セレクター::before

その中で、ワイルドカードセレクター*、組み合わせセレクター、+ ~ >および否定された疑似クラスセレクターは、優先度に影響:not()し

追加のインラインスタイル<div class="foo" style="color: red;"></div>と!important(最高) は重みが高くなります

:not優先度の影響 - codepen:notは、セレクターの優先度に影響を与えていないことがわかります。

CSS の特異性 - codepenは、12 を超えるクラスセレクターがあり、どの id セレクターも重みが高くないことを確認できます。

補足質問:

100 个 class 选择器和 id 选择器那个比较高
属性选择器和类选择器哪个权重较高
通配符选择器和元素选择器哪个权重教高

'+' 与 '~' 选择器有什么不同

【Q315】'+' 与 '~' 选择器有什么不同
+ 选择器匹配紧邻的兄弟元素
~ 选择器匹配随后的所有兄弟元素

z-index 与层叠上下文

题目：如何更好地给元素设置 z-index
题目：z-index: 999 元素一定会置于 z-index: 0 元素之上吗

z-index 高数值一定在低数值前边吗，div 层级如下所示

A -> 3
- AA -> 1000
B -> 4
- BB -> 10

代码见 zindex - codepen

不一定，更复杂的示例见层叠上下文 - MDN

水平垂直居中

题目: 如何实现一个元素的水平垂直居中
代码: absolute/translate

宽高不定的块状元素水平垂直居中，可见以下示例

absolute/translate

同时提供几种不同的思路：

flex:
- justify-content: center
- align-content: center
grid
- place-items: center
absolute/translate
- position: absolute
- left/top: 50%
- transform: translate(50%)
##absolute/inset##

左侧固定、右侧自适应

题目: css 如何实现左侧固定300px，右侧自适应的布局
代码: 代码

提供 flex 与 grid 布局的两种思路

flex:
- 左侧: flex-basis: 200px
- 右侧: flex-grow: 1; flex-shrink: 0;
grid
- 父容器: grid-template-columns: 200px 1fr;

.container
  .left
  .main
复制代码

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}
复制代码

三栏均分布局

题目: 如何实现三列均分布局
コード: 3 列のレイアウトを実装する方法

との 2 つのスキームもflex提供します。grid

フレックス：
- オプション 1:flex: 1;
- オプション II:flex-basis: calc(100% / 3)
グリッド：
- 親コンテナ:grid-template-columns: 1fr 1fr 1fr

さらなる質問: 16 列の等分割レイアウトを実現するにはどうすればよいですか?

長さと幅が固定された正方形/長方形を描く方法

質問:長さと幅が固定された正方形/長方形を描画する方法

古い解決策はを使用することでしたpadding。要素がパーセンテージで設定されているpadding場合は、親要素の幅が基準として使用されることを意味し、この原則に従って縦横比を設定できます。しかし実際には、意味は限られています. 結局、あなたはパディングを占有し、コンテンツのための領域はありません.

最新のソリューションは、アスペクト比の CSS プロパティを使用することです: aspect-ratio.

CSS がスタイルの競合を回避する方法

トピック: CSS を記述するときに命名スタイルの競合を回避する方法

1. BEM 式:`.home-page .home-page-btn`

.home-page {
  .home-page-btn {}
}
复制代码

BEM には欠点があります。つまり、長すぎるため、ページコンポーネントのルートクラス名をラップするだけで適切に単純化できますが、スタイルの競合のリスクが高まる可能性があります。

.home-page {
  .btn {}
}
复制代码

2. CSS スコープ

scoped css現在のコンポーネント (スコープ) の下にあるすべての要素に対して一意の属性またはクラス名が生成され、すべての CSS ルールが一意の属性を持ち、スコープの命名保護を実現します。

// 手动写
.btn {}

// 编译后
.btn .jsx-1287234 {}

复制代码

css scoped demo

3.CSSモジュール

module cssクラス名はハッシュ化されます

css modules demo

CSS 変数

トピック: css 変数を使用したことがありますか?それによってどのような問題が解決されますか?

:root{
  --bgcolor: #aaa;
  --color: #000;
}
复制代码

CSS 構成のダークモード

トピック: CSS を使用して Web サイトのダークモードを実装する方法 (ダークモード)

最も単純な方法として、これはメディアクエリ@media (prefers-color-scheme: dark)とます。

@media (prefers-color-scheme: dark) {
    :root{
    }
}
复制代码