CSS フロントエンドの面接での質問 (3)

記事ディレクトリ

1. 継承可能な属性と継承できない属性

私の観点は、継承可能なプロパティだけを覚えておいてください。その他は継承できないプロパティです。さらに、開発プロセス中にスタイルの問題が見つかり、そのようなスタイルがコードに追加されていない場合、そのスタイルは次から継承されている可能性があります。親がここに来ました。

フォントファミリーのプロパティ

font-family: フォントファミリー
font-weight: フォントの太さ
font-size: フォントサイズ
font-style: フォントスタイル

テキストシリーズのプロパティ

text-indent: テキストのインデント
text-align: テキストの水平方向の配置
line-height: 行の高さ
word-spacing: 単語間の間隔
Letter-spacing: 中国語または文字間の間隔
text-transform: テキストの大文字と小文字の区別 (つまり、大文字、小文字、大文字) (3)
色: 文字の色

要素の可視性

可視性: 要素の表示と非表示を制御します。

リストレイアウトのプロパティ

list-style: list-style-type、list-style-image などを含むリストスタイル。

カーソルのプロパティ

カーソル: カーソルがどのような形で表示されるか

2. linkと@importの違い

外部 CSS を参照するには通常 2 つの方法があります。

<style>
    @import url("./style.css");
</style>
	或者
<link rel="stylesheet" href="./style.css">

1. Link は XHTML タグであり、CSS のロードに加えて、RSS などの他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードできます。CSS ファイルの参照に加えて、リンクタグは他のファイルも参照できます。
2. リンクが CSS を参照する場合、ページのロードと同時に CSS がロードされますが、@import ではページが完全にロードされた後にページをロードする必要があります。したがって、スタイルがちらつく問題が発生した場合は、リンクタグを使用して CSS を参照してください。
3. リンクは XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザではサポートされていません。
4. JS を介して DOM を操作し、リンクタグを挿入してスタイルを変更できますが、@import は js を介して追加することはできません。

3.CSSの最適化

セレクターの最適化:

*{} の使用は避けてください。多くのプロジェクトでは、ブラウザの互換性の問題を解決するために、すべてのタグに付属するマージンとパディングがキャンセルされ、次のスタイルが書き込まれます。*{} は驚くべき数で計算されます。すべての DOM がこのスタイルルールの計算に含まれます。

* {
    
    
	margin: 0;
	padding: 0;
}

タグの選択はできる限り少なくし、代わりにクラスを使用してください。これは理解しやすく、クラスを使用することでメンテナンスが容易になり、後続のメンテナがタグを変更した後でもスタイルを変更する必要がありません。
子孫セレクターの使用はできる限り少なくしてください。子孫セレクターは、特定の DOM ノードの下にあるすべての DOM に影響します。一部の DOM が条件を満たしていない場合でも、条件を満たしているかどうかを判断するために、このルールによって一度走査されます。
継承されたプロパティを適切に使用すると、CSS コードの作成を減らすことができます。たとえば、親 dom のスタイルに既に font-size または line-height が含まれている場合、これらのスタイルは継承できるため、子 dom はこれらのスタイルを追加する必要はありません。
スタイルセレクターを 3 レベルを超えてネストしないでください。これは重要です。ブラウザはレンダリング時に CSS ツリーをトラバースします。レベルが深すぎると、パフォーマンスに影響します。また、スタイルの重み付けが不十分になるのを防ぐために、ネストによって重み付けを増やす必要は実際にはありません。

レンダリングパフォーマンスの最適化:

属性値が 0 の場合、ユニットは追加されません。
属性値は浮動小数点 0.xx で、小数点前の 0 は省略可能です。
同じページ内の同じような部分に小さなアイコンを配置する CSS スプライト画像は、ページリクエスト数を減らすことができて便利ですが、同時に画像自体も大きくなってしまいますので、メリット・デメリットをよく考慮して使用するようにしてください。それを使って。
ページの再配置と再描画を最小限に抑えます。この問題には多くの注意点が含まれており、たとえばアニメーションが動く場合、マージンやパディングではなくトランスフォームによって制御されます。
表示属性を正しく使用してください。表示の役割により、一部のスタイルの組み合わせは無効になり、スタイルのサイズが増大するだけであり、解析パフォーマンスにも影響します。たとえば、タグスパンが元々 inline である場合は、block に設定せずに inline-block に設定します。

スタイルをよりエレガントに：

同じ属性を持つスタイルを抽出して統合し、クラスを通じてページ内で使用することで CSS の保守性を向上させます。これは非常に興味深いものです。これは実際にはスタイルのカプセル化です。たとえば、すべてのタグに特別なスタイルを持たせたい場合は、それを main.css に追加します。

.custom-a {
    
    
	xxx
}

a タグでこのスタイルを使用したい場合は、このクラス名を a タグに直接追加することで柔軟かつ経済的です。

スタイルとコンテンツの分離: CSS コードを外部 CSS に定義します。これは実際には、保守や変更が不便なインラインスタイルを使用しないことを強調しています。

4. CSS プリプロセッサ/ポストプロセッサとは何ですか? なぜそれらを使用するのでしょうか?

CSS プリプロセッサとはよく聞きますが、CSS ポストプロセッサとは何ですか?
cssプリプロセッサ:less、sass
ポストプロセッサ:postcss

最近の多くのプロジェクトでは、通常、私たちが直接記述するスタイルコードは CSS ではありません。例として挙げてみましょう。変数、セレクターのネスト、ミックスインの再利用、関数、ループ、その他自由な方法でスタイルコーディングを実装できるため、コストを節約できます。お金、開発者の時間。

しかし、最終的には、ブラウザーは、less によって書かれたコードを認識しないため、less を CSS に変換する必要があり、この部分の作業は通常、webpack のless-loader などの他のツールに任せられます。

レスをcssに変換すれば自然にブラウザで認識されます直接書いたcssスタイルと違いはありませんが、もしかしたら自分で開発したブラウザなら問題なく表示されるかもしれませんが、全てのユーザーのブラウザで表示できるという保証はありません一部の CSS 言語には、異なるブラウザーや異なるバージョンとの互換性の問題があるため、通常はこれが行われます。

ほとんどのブラウザースタイルの問題と互換性を持たせるための作業を手動で実装するのは非常に面倒なので、postcss を再度コンパイルする必要があります。

Postcss は、互換性の問題がある多くのスタイル属性にプレフィックスを追加し、セマンティクスは同じだが記述方法が異なる他のすべての CSS スタイル構文を追加して、異なるブラウザーに一致して有効な記述方法が常に存在するようにします。また、新しい記述方法はスタイルの下部に配置されるため、新しいブラウザーは常に最新の CSS 構文と一致します。

postcssは一般のフロントエンド開発者にとっては触れることが難しいものですが、通常はプロジェクト設立時に設定されており、通常の開発では再設定されることはなく、コンパイルやパッケージ化の際に毎回使用されます。 webpackではpostcss-loaderです

さらに詳しく説明すると、CSS がおそらく通過するコンパイルプロセスはすでにわかっています。したがって、webpack では、less-loader が最初に来て、次に postcss-loader が後に来るため、postcss-loader は常にless-loader の左側に書かれます。 Webpack のローダーの実行ルールは下から上、右から左です。

 {
    
    
   test: /\.less$/,
   use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
 },

5. 単一行および複数行のテキストのオーバーフローの非表示

これは空母を建造するための面接ではなく、仕事でネジを締めるときに使うものなので、毎回確認したくない人は覚えておくと良いでしょう。

単一行テキストのオーバーフロー

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

複数行のテキストのオーバーフロー

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

6. 扇形の実装

扇形を実装する方法は、長方形が楕円になることを除いて、三角形の列を実装する方法と同じです。

div {
    
    
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    // 没有这个border-radius就是一个三角形
    border-radius: 100px;
    border-top-color: red;
}

7. アダプティブスクエアの実装

vw を通じて実装
vw と vh の 2 つの魔法のユニットがあります。100vw はブラウザの視覚領域の幅の 100% です。

.square {
    
    
  width: 10vw;
  height: 10vw;
  background: red;
}

これは、要素のマージン/パディングのパーセンテージが親要素の幅に相対的であるという事実を利用して実現されます。

.square {
    
    
  width: 10%;
  padding-top: 10%;
  background: red;
}

8. 現在のデバイスの解像度はなぜこれほど異なるのでしょうか? すでに 2.5k の画面が登場しているのに、CSS ではまだ 1px が使用されていますか?

これは実際に、デバイスの物理ピクセルと CSS のピクセル単位の関係を調べています。

window.devicePixelRatio = デバイスの物理ピクセル/CSS ピクセル。

通常、PC 上のこの値は 1 です。私の csdn ブログのホームページを例に挙げます。

ここに画像の説明を挿入します
iPhone se では、devicePixelRatio は 2 です。

devicePixelRatio = 2 たとえば、CSS が 1px の場合、物理画面には 2 ピクセルがレンダリングされるため、この比率は非常に合理的であるように見えます。
物理解像度が高いほど、devicePixelRatio の値が大きくなるため、コンテンツのプレゼンテーションがより鮮明になります。iPhone 12 pro の場合、devicePixelRatio は 3 です。

ここに画像の説明を挿入します