フロントエンドのインタビューでの詳細な質問 CSS 記事 - 継続的な更新

HTML
JS記事
TypeScript篇
Vue篇
反応する
フロントエンドのインタビューの質問の概要 (非常に詳細な回答、HTML、JS、CSS の概要を含む) -- 継続的な更新
フロントエンドのインタビューの質問の概要 II (非常に詳細な回答、Vue、TypeScript、React、Webpack の概要を含む) -- 継続的な更新
CSSの面接の質問

1.CSSのボックスモデルを導入しますか？

margin (外側のマージン) - 境界線の外側の領域をクリアし、マージンが透明になります。
border - パディングの周囲とコンテンツの外側の境界線。
パディング - コンテンツの周囲の領域をクリアします。パディングは透明になります。
content (コンテンツ) - ボックスのコンテンツ、表示テキストと画像。

W3C の標準ボックスモデル: 標準ボックスモデルでは、幅はコンテンツ部分の幅を指します。

IE のボックスモデル: IE ボックスモデルでは、幅は content+padding+border の 3 つの部分の幅を表します。

さまざまなボックスモデルを有効にする方法

box-sizing:content-box; 標準ボックスモデル

ボックスサイズ: ボーダーボックス; IE ボックスモデル

2.CSSセレクター?

ID セレクター (#box)、ID が box である要素を選択します

クラスセレクター (.one)、クラス名 one を持つすべての要素を選択します

ラベルセレクター (div)、ラベル div を持つすべての要素を選択します

子孫セレクター (#box div)、box 要素内の id を持つすべての div 要素を選択します。

子セレクター (.one>one_1)。親要素が .one である .one_1 のすべての要素を選択します。

隣接する兄弟セレクター (.one+.two)、.one の直後にあるすべての .two 要素を選択します。

グループセレクター (div、p)、div、p のすべての要素を選択します

疑似クラスセレクター

属性セレクター

3. CSSセレクターの優先順位?

!重要 > インラインスタイル (重み 1000) > ID セレクター (重み 100) > クラスセレクター (重み 10) > ラベル (重み 1) > ワイルドカード > 継承 > ブラウザーのデフォルト属性

4. CSS で継承可能な属性?

フォントファミリー属性

font-family: フォントファミリー

font-weight: フォントの太さ

font-size: フォントサイズ

フォントスタイル: フォントスタイル

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

text-indent: テキストのインデント

text-align: テキストの水平方向の配置

line-height: 行の高さ

色: 文字の色

要素の可視性: 可視性

リストレイアウト属性: list-style

カーソルプロパティ: カーソル

5. 垂直方向に中央揃えにする方法は何通りありますか?

表示モードをテーブルに設定し、display:table-cellを設定します。vertial-align：middle

flexレイアウトを使用して、次のように設定しますalign-item：center

絶対位置決めで設定しbottom:0,top:0、margin:auto

絶対位置決めで高さを固定する場合、設定top:50%，margin-top値は高さの半分のマイナス値となります。

テキストの垂直方向の中央を値line-heightに設定height

6. CSSリンクと@importの違いと使い方を簡単に説明してください?

link は XHTML タグであり、CSS のロードに加えて、RSS の定義、rel 接続属性の定義などにも使用できます。一方、@import は CSS によって提供され、CSS のロードにのみ使用できます。

ページが読み込まれると、リンクも同時に読み込まれます。@import によって参照される CSS は、ページが読み込まれるまで待機してから読み込みます。

importはCSS2.1で提案されておりIE5以上でのみ認識可能、リンクはXHTMLタグなので互換性問題なし

7. rgba の透明効果と不透明度の違いは何ですか?

Rgba は要素の色と透明度の両方を指定できますが、不透明度は要素の透明度を制御することしかできず、色を設定することはできません。

Rgba の透明度は実際の色に基づいており、不透明度は要素自体の透明度に設定されます。rgba を使用すると、要素のさまざまな部分で異なる透明度を実現できますが、不透明度は要素の透明度を一定にします。

rgba をサポートするブラウザは、不透明度をサポートするブラウザよりも一般的ですが、下位のバージョンでは、rgba はサポートされず、不透明度がサポートされます。

8. 属性値と表示機能

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-YE6ys7gx-1683862598768) (C:\Users\lenovo\AppData\Roaming\Typora) \typora-user-images\ 1683804216661.png)]$

9. 表示ブロック、インライン、およびインラインブロックの違いは何ですか?

block: は 1 行を占め、複数の要素は新しい行で始まります。幅、高さ、マージン、パディング属性を設定できます。

inline: 要素は 1 行を占有しないため、幅と高さの属性の設定は無効です。ただし、水平方向のマージンとパディングのプロパティは設定できますが、垂直方向のパディングとマージンは設定できません。

inline-block: オブジェクトをインラインオブジェクトとして設定しますが、オブジェクトの内容はブロックオブジェクトとしてレンダリングされ、後続のインラインオブジェクトは同じ行に配置されます。

10. 表示:なしと可視性:非表示の違いは何ですか?

display:none は、対応する要素を非表示にし、ドキュメントレイアウト内でその要素にスペースが割り当てられないようにします。要素の両側の要素は、あたかも存在しなかったかのように閉じられます。
Visibility:hidden は、対応する要素を非表示にしますが、ドキュメントレイアウト内の元のスペースを保持します。

11. 位置の価値、相対的と絶対的は誰に対して相対的なものですか?

相対: 通常のドキュメントフローにおける自身の位置を基準とした相対位置。
Absolute: 最も近いレベルで位置が静的ではない親要素を基準とした絶対位置を生成します。最後に、本文の
修正が見つかりました: (古いバージョンの IE はサポートしていません)、ブラウザウィンドウまたは位置決め用のフレームを基準にして絶対位置を生成するようになりました。
static: デフォルト値、位置決めなし。要素は通常のドキュメントフローに表示されます。
Sticky: スティッキー配置の要素を生成します。コンテナーの位置は、通常のドキュメントフローに従って計算されます。

12. 要素を非表示にする方法にはどのようなものがありますか?

display: none: レンダリングツリーには染料オブジェクトが含まれないため、要素はページ内の位置を占めず、バインドされたリスナーイベントにも応答しません。

可視性: 非表示: 要素はまだページ内のスペースを占有していますが、バインドされたリスナーイベントには応答しません。

opacity: 0: 要素の透明度を 0 に設定して、要素を非表示にします。要素は引き続きページ内のスペースを占有しており、要素にバインドされたリスニングイベントに応答できます。

位置: 絶対: 絶対配置を使用して表示可能領域から要素を削除して要素を非表示にします。

z-index: 負の値: 他の要素で要素を覆い隠します。

transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。

13.transition和animation区别？

触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。

控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。

耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。

兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。

14.伪元素和伪类区别？

伪元素：是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-gsYGywX7-1683862598769) (C:\Users\lenovo\AppData\Roaming\Typora) \typora-user-images\ 1683805298891.png)]$

伪类：是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-f7vKfsmg-1683862598769) (C:\Users\lenovo\AppData\Roaming\Typora\) typora-user-images\ 1683805345353.png)]$

两者的异同

相同：

伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

差异：

疑似クラスは、実際には通常の DOM 要素に基づいた異なる状態であり、これは DOM 要素の特定の機能です。擬似要素は、DOM ツリーに存在しない抽象オブジェクトを作成でき、これらの抽象オブジェクトにはアクセスできます。

15. requestAnimationframeの理解

HTML5 はアニメーションのリクエスト専用の API を提供します

文法：

window.requestAnimationFrame(callback); このうち、callbackは次の再描画前にアニメーションフレームを更新するために呼び出される関数（つまり上記のコールバック関数）です。コールバック関数には、requestAnimationFrame() がコールバック関数の実行を開始する瞬間を示す DOMHighResTimeStamp パラメーターが渡されます。このメソッドはマクロタスクであるため、マイクロタスクの実行後に実行されます。

アニメーションをキャンセル:

アニメーションの実行をキャンセルするには、cancelAnimationFrame() を使用します。このメソッドはパラメータ (デフォルトでは requestAnimationFrame によって返される ID) を受け取ります。アニメーションをキャンセルするには、この ID を渡すだけで済みます。

アドバンテージ：

CPUの省エネ

機能のスロットリング

DOM 操作を減らす

16. li と li の間に目に見えない空白がある理由は何ですか?その解決方法は何ですか?

ブラウザは、インライン要素間の空白文字 (スペース、改行、タブなど) をスペースに色付けします。美的観点からは、通常、

1 行にすると、次のようになります

改行文字は改行の後に生成され、スペースとなり 1 文字の幅を占めます。

解決：

ために

フロートを設定: 左。不十分：左右切り替えのフォーカスマップなど、一部のコンテナをフローティングに設定できない。

全部するだろう

同じ行に書かれています。不十分：コードが美しくない。

中の文字サイズを直接0、つまりfont-size:0に設定します。不十分：

の他の文字サイズも 0 に設定されるため、他の文字サイズを再設定する必要があり、Safari ブラウザには空白スペースが残ります。

排除

文字間隔letter-spacing:-8px、不十分: これにより、

内の文字スペースなので、

中の文字間隔はデフォルトのletter-spacing:normalに設定されます。

17. CSS3の新機能

さまざまな CSS セレクター (:not(.input): クラスが 'input' ではないすべてのノード) を追加します: 属性セレクター、疑似クラスセレクター、疑似要素セレクター、基本セレクター

3 つの境界線のプロパティ

border-radius: 丸い境界線を作成します

border-shadow: 要素に影を追加します。

border-image: 画像を使用して境界線を描画します

バックグラウンド

背景クリップ: 背景の描画領域を決定します。

background-origin: ボーダーボックス、パディングボックス、コンテンツボックスの左上隅から設定が開始されます。

背景サイズ: 背景画像のサイズを調整します。

background-break: 要素は複数の独立したボックスに分割できます。

文字

word-wrap:normal|break-word ブラウザのデフォルトの改行を使用します|単語内での改行を許可します

text-overflow: 現在の行が指定されたコンテナの境界線をどのように超えて表示するかを設定または取得します。プロパティは 2 つの値で構成されます。

クリップ:テキストのトリム

省略記号: トリミングされたテキストを表す省略記号を表示します。

text-shadow: テキストに影を付けることができます。水平方向の影、垂直方向の影、ぼかし距離、および影の色を指定する機能

text-decoration: CSS3 はテキストのより深いレンダリングをサポートし始め、提供できる 3 つの特定の属性があります。

text-fill-color: テキスト内の塗りつぶしの色を設定します。

text-ストローク-カラー: テキスト境界の塗りつぶしの色を設定します。

text-ストローク-幅: テキストの境界線の幅を設定します

カラー (新しいカラー表現 rgba および hsla)

rgba は 2 つの部分に分かれており、rgb は色の値、a は透明度です。

hsla は 4 つの部分に分かれており、h は色相、s は彩度、l は明度、a は透明度です。

トランジション遷移、トランスフォーム変換、アニメーションアニメーション

フレックスエラスティックレイアウト、グリッドグリッドレイアウト

メディアクエリ

18. 画像フォーマットの作成（簡単な説明）

BMP: 可逆ビットマップであり、インデックス付きカラーと直接カラーの両方をサポートします。

GIF: ロスレスのインデックス付きカラービットマップです。LZW圧縮アルゴリズムでエンコードする

JPEG: 直接カラーの非可逆ビットマップです。JPEG 画像の利点は、直接色を使用することであり、より豊かな色の利点が得られます。

PNG-8: インデックス付きカラーを使用した可逆ビットマップです。

PNG-24: 直接カラーを使用した可逆ビットマップです。

SVG: ロスレスベクターグラフィックスです。SVG はベクトル図であり、SVG 画像が直線と曲線、およびそれらを描画する手段で構成されていることを意味します。

WebP: Google が開発した新しい画像形式で、非可逆圧縮と可逆圧縮の両方をサポートし、ダイレクトカラーを使用するビットマップです。

19. 0.5pxで直線を描きますか？

テストはcss3の変換です

height: 1px;
transform: scale(0.5);

20. calc、support、mediaの意味と使い方は何ですか？

@support は主にブラウザが CSS の特定の属性をサポートしているかどうかを検出するために使用されます. 実際には条件判定です. 特定の属性をサポートしている場合はスタイルのセットを記述できます. 特定の属性をサポートしていない場合は,代わりに、別のスタイルのセットを提供することもできます。

calc() 関数は、長さの値を動的に計算するために使用されます。calc() 関数は、「+」、「-」、「*」、「/」の演算をサポートします。

@media クエリでは、メディアタイプごとに異なるスタイルを定義できます。

21. pxとem、remの違いは何ですか?

px: 絶対的な長さの単位、ピクセル px はディスプレイの画面解像度を基準とします。
em: 相対的な長さの単位、現在のオブジェクト内のテキストのフォントサイズを基準とします。em の値は固定されておらず、em は親要素の font-size の値 (基準は親要素の font-size です)
rem: HTML ルート要素の font-size を基準とした相対値

22. 1rem、1em、1vh、1px、vmin、vmax は何を表しますか?

rem
rem はすべて、ルート要素 element を基準とした長さです。通常は、HTML 要素のフォントサイズを設定し、他の要素の長さの単位は rem になります。

em
サブ要素のフォントサイズの em は、親要素のフォントサイズを基準にします。
要素の幅/高さ/パディング/マージンは、em が使用されている場合は要素のフォントサイズに相対します。

vw/vh
の正式名は、ビューポートの幅とビューポートの高さです。ウィンドウの幅と高さは、画面の幅と高さの 1% に相当します。ただし、幅を扱う場合は % 単位の方が適切で、vh 単位は高さを扱う場合はより良いです。

ピクセル
ピクセルピクセル (ピクセル)。相対的な長さの単位。ピクセル px は、モニターの画面解像度を基準としています。
一般的なコンピュータの解像度は｛1920 1024｝であり、その他の解像度は
1920 1024 です。前者は画面の幅が合計 1920 ピクセル、後者は画面の高さが合計 1024 ピクセルです。

vmin/vmax: ウィンドウの高さと幅の最小値を基準にする/ウィンドウの高さと幅の最大値を基準にする。

ウィンドウの高さが 1080、幅が 1920 の場合。1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。

23. CSSで三角形を描きますか？

これは簡単な CSS テストです。コンポーネントライブラリを使用するときは、ネイティブ CSS を忘れないでください。

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

24. 要素は水平方向と垂直方向の中央に配置されます

位置決め +margin:auto を使用する

位置決め + マージンを使用: 負の値

位置決めと変換を使用する

テーブルレイアウト

フレックスレイアウト

グリッドレイアウト

25. レスポンシブレイアウトの原則

レスポンシブとは: Web ページのデザインレイアウト、ページのデザインと開発は、ユーザーの行動やデバイス環境 (システムプラットフォーム、画面サイズ、画面の向きなど) に応じて応答し、調整する必要があります。

基本原則: メディアクエリを通じてさまざまなデバイスの画面サイズを検出して処理するモバイル端末を処理するには、ページの先頭にメタ宣言ビューポートが必要です。

実現方法

メディアクエリ

パーセントレイアウト

vw/vh

レム

26. CSSの配置方法は？

static: 要素ボックスは正常に生成されます。ブロックレベル要素はドキュメントフローの一部として長方形のボックスを生成しますが、インライン要素は親要素内に配置する 1 つ以上のラインボックスを作成します。

相対: 要素ボックスは特定の距離だけオフセットされます。要素は配置されていない形状を保持し、元の位置にあったスペースも保持されます。

絶対: 要素ボックスはドキュメントフローから完全に削除され、その要素を含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメントフローで要素が以前に占めていたスペースは、その要素が存在しなかったかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスのタイプに関係なく、ブロックレベルのボックスを生成するように配置されます。

修正: 要素ボックスは位置を絶対に設定するように動作しますが、そのボックスを含むブロックはビューポート自体です。

27. cssスプライト（スプライト画像、スプライト画像）とは何ですか、メリットとデメリットは何ですか？

CSSSprites (スプライトイメージ) には、ページに含まれるすべてのイメージが大きなイメージに含まれ、CSS のbackground-image、background-repeat、およびbackground-position属性の組み合わせを背景の位置決めに使用します。

アドバンテージ：

HTTP リクエストを削減し、ページの読み込み速度を大幅に向上させます。

画像情報の繰り返しを増やし、圧縮率を高め、画像サイズを小さくします。

スタイルの変更は簡単です。1 つまたは複数の写真の色やスタイルを変更するだけです。

欠点:

画像結合トラブル

面倒なメンテナンス

28. デバイスピクセル、CSS ピクセル、デバイス非依存ピクセル、dpr、および ppi の違いは何ですか?

设备像素: 物理ピクセルとも呼ばれ、デバイスが表示を制御できる最小の物理単位を指します。必ずしも小さな正方形のブロックである必要はなく、標準の幅と高さもありません。表示するための単なる「点」です。豊かな色。

css像素: CSS のサフィックスに長さの単位である px が付く、Web プログラミングに適しています。CSSにおける長さは絶対単位と相対単位に分かれており、pxは相対単位に属します。

设备独立像素: デバイスに依存しない論理ピクセルは、プログラムによって制御できる仮想ピクセルを表す一般的な概念です。私たちがよく話す解像度は、厳密にはデバイスの独立したピクセルを指すものではありません。JavaScript では、window.screen.width/window.screen.height を通じて表示できます。

dpr: デバイスのピクセル比。デバイスに依存しないピクセルからデバイスのピクセルへの変換関係を表します。

ppi: ピクセル密度。1 インチあたりのピクセル数を示します。

29. マージンとパディングの使用シナリオ

境界線の外側に空白を追加する必要があり、空白スペースに背景（色）が必要ない場合は、マージンを使用します。

パディングは、境界線に空白を追加する必要があり、空白の背景（色）が必要な場合に使用されます。

30. 行の高さと割り当て方法の理解

コンセプト：

line-height 属性は、行間の距離 (行の高さ) を設定します。平たく言えば、テキストの 2 つの段落間の距離を設定します。テキストの行の高さを親の高さに設定すると、コンテナでは、テキストを垂直方向に中央揃えにすることができます。

原理：

div は上マージン、コンテンツ、下マージンの 3 つの部分に分かれていることがわかります。例: div の高さが 100px、フォントが 16px の場合、上下の余白は (100px-16px)/2 として計算されます。

割り当て方法:

単位付き:px固定値でありem、font-size親要素の値を参照して独自の行の高さを計算します。

Pure Numbers: 比率を将来の世代に伝えます。たとえば、親要素の行の高さが1.5、子要素のフォントがの場合18px、子要素の行の高さは次のようになります。1.5 * 18 = 27px

パーセント: 計算された値を子孫に渡します

31. BFC についてのあなたの理解について教えてください。発動条件は？応用シナリオ?

概念: BFC はブロックレベルの書式設定コンテキストであり、ページ内のレンダリング領域であり、独自のレンダリングルールのセットがあります。BFCの目的は、外界から完全に独立した空間を形成することです。让内部的子元素不会影响到外部的元素

発動条件：

ルート要素、HTML要素

浮動要素: 浮動小数点値は左、右

オーバーフロー値は表示されません。自動、スクロール、非表示です。

表示値は、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid です。

位置の値は絶対または固定です

アプリケーションシナリオ:

余白の重なりを防止する

内部フロートをクリア

適応型複数列レイアウト

32. 右側にアダプティブな 2 列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトの真ん中に適応しますか?

两栏布局：

float を使用して左の列を左側にフロートし、margin-left を右側に使用して左の列の幅を拡張します。親要素に BFC を追加し、overflow: hidden で有効にします。

フレックスレイアウト

三栏布局：

以下の 3 つの方法の原理は、2 列レイアウトの最初の方法と同じです。

両側にフロートを使用し、中央にマージンを使用します

両側に絶対値を使用し、中央にマージンを使用します

両側に浮動小数点と負のマージンを使用する

フレックスレイアウト

表示: テーブルの実装

display: table をテーブルとして設定し、 table-layout: fixed` を設定して、列幅が自動的に計算されるのではなく、自動的に決定されることを示します。

内側のレイヤーの左、中央、右は、display: table-cell によってテーブルのセルとして設定されます。

左右に固定幅を設定し、中央に幅を設定: 100%で残りの幅を埋める

グリッドグリッドレイアウト

33. フレックスボックス (エラスティックボックスレイアウトモデル) と適用可能なシナリオについて話しますか?

理解: フレックスレイアウトとは「柔軟なレイアウト」を意味し、さまざまなページレイアウトをシンプルかつ完全かつ応答性の高い方法で実現できます。デフォルトでは、コンテナーには主軸と交差軸という 2 つの軸があり、これらは 90 度の関係にあります。項目はデフォルトで主軸に沿って配置され、flex-direction主軸の方向は次のように決定されます。

属性:

flex-direction は主軸の方向を決定します

flex-wrap は、コンテナ内の項目をラップできるかどうかを決定します。

包む、包む

主軸上の justify-content アイテムの配置

flex-start (デフォルト): 左揃え

フレックスエンド: 右揃え

中心: 中心

space-between: 両端が揃っており、アイテム間の間隔が等しい

space-around: 2 つの項目が両側に等間隔に配置されます。

align-items 項目を交差軸上に配置する方法

flex-start: 交差軸の開始点を揃えます

flex-end: 交差軸の端を揃えます。

center: 交差軸の中点を揃えます。 垂直居中

ベースライン: アイテム内のテキストの最初の行のベースライン配置

ストレッチ (デフォルト): アイテムに高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナ全体の高さを占めます。

コンテンツの整列

34. グリッドグリッドレイアウトの紹介

理解:Gridレイアウトとは、2 次元のレイアウト手法であるグリッドレイアウトであり、縦横に交差する 2 組のグリッド線によって形成され、行と列を同時に扱うことができるフレームワークのレイアウト構造です。

コンテナのプロパティ:

表示: グリッドコンテナーはブロックレベル要素/inline-grid コンテナーはインライン要素です

grid-template-columns 属性，grid-template-rows 属性：

列の幅と行の高さを複数の行と列ごとに設定します。幅と高さが繰り返される場合、repeat(3,200px) を使用して 3 行と列、幅と高さ 200px を表すことができます。

グリッド行ギャッププロパティ、グリッド列ギャッププロパティ、グリッドギャッププロパティ

行と列の間隔を設定します。グリッドギャップは両方の短縮形です。

Grid-template-areas 属性: エリアを定義するために使用されます

Grid-auto-flow 属性: グリッドを分割した後、コンテナの子要素が順番に並びます。その順序は Grid-auto-flow によって決まります。

プロジェクトのプロパティ:

Grid-column-start 属性、grid-column-end 属性、grid-row-start 属性、および Grid-row-end 属性: グリッド項目が配置される 4 つの境界線と、どのグリッド線が配置されるかをそれぞれ指定します。項目の位置を指定するには

グリッドエリア属性: この属性は、アイテムが配置されるエリアを指定します。エリアは、grid-template-areas プロパティによって分割されます。

justify-self 属性、align-self 属性、place-self 属性

35. CSS3 アニメーションとは何ですか?

トランジションを実現するグラデーションアニメーショントランジションアニメーションの詳細説明

変換変換アニメーション変換属性の詳細説明

アニメーションカスタムアニメーションの詳しい説明アニメーション

36. リフローと再描画を理解するにはどうすればよいですか? どのような状況で発動するのでしょうか？

リフロー: レイアウトエンジンは、さまざまなスタイルに基づいてページ上の各ボックスのサイズと位置を計算します。

再描画：ボックスモデルの位置、サイズなどの属性を計算した後、ブラウザは各ボックスの特性に従って描画します。

発動条件：

リフロー:

表示される DOM 要素を追加または削除する

要素の位置が変わります

要素のサイズが変更されます (余白、内側の境界線、境界線のサイズ、高さと幅などを含む)

テキストの変更や画像が異なるサイズの別の画像に置き換えられるなど、コンテンツの変更

ページのレンダリングが開始されるとき (これは回避できません)

ブラウザのウィンドウサイズが変更されます (リフローではビューポートのサイズに基づいて要素の位置とサイズが計算されるため)

再描画 ------触发回流一定会触发重绘

色の変更

テキストの向きの変更

影の修正

37. 最適化を行う場合、パフォーマンスを向上させる CSS の方法は何ですか?

スクロールせずに見えるインラインの重要な CSS

CSS式を避ける

CSSを非同期でロードする

リソースの圧縮

セレクターを賢く使用する

box-shadow/// transparency/などの高価なプロパティborder-radiusの使用を削減filter:nth-child

@import は使用しないでください

38. 単一行/複数行のテキストオーバーフローの省略記号スタイルを実現するにはどうすればよいですか?

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

ホワイトスペース: テキストを 1 行で表示するように設定します。折り返すことはできません。

オーバーフロー: テキストの長さが制限された幅を超える場合、超過したコンテンツは非表示になります。

text-overflow: テキストがオーバーフローした場合に、トリミングされたテキストを表す省略記号が表示されることを指定します。

クリップ: オブジェクト内のテキストのオーバーフロー部分が切り取られる場合

省略記号: オブジェクト内のテキストがオーバーフローした場合に省略記号マーカー (…) を表示します。

text-overflowoverflow:hiddenおよびの場合にwhite-space:nowrapのみ有効になります。

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

高さに基づく切り詰め – 擬似要素 + 位置決め

位置:相対:擬似要素の絶対位置

オーバーフロー: 非表示: テキストが制限された幅を超えてコンテンツが非表示になります)

line-height: 20px: 要素の高さと組み合わせて、高さが固定されている場合、行の高さを設定し、表示される行数を制御します

height: 40px: 現在の要素の高さを設定します

::after {} : スタイル省略記号 – 疑似要素を設定します

位置: 絶対: 省略記号の絶対位置

コンテンツ："…"

行数に基づいて切り詰める - 純粋な CSS

-webkit-line-clamp: 2: ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります)

表示: -webkit-box: -webkit-line-clamp と組み合わせると、オブジェクトはフレキシブルボックスモデルとして表示されます。

-webkit-box-orient:vertical: -webkit-line-clamp と組み合わせて使用し、フレックスボックスオブジェクトの子要素の配置を設定または取得します。

overflow: hidden: テキストが制限された幅を超えてコンテンツを非表示にします。

text-overflow: ellipsis: 複数行のテキストの場合、省略記号「...」を使用して、あふれたテキストを非表示にします。

39. Chrome で 12 ピクセルより小さいテキストをサポートする方法は何ですか? 違い？

中国語版の Chrome では、ページの最小フォントサイズがデフォルトで 12 ピクセルに設定されますが、英語版には制限がありません。

解決：

Zoom : ページ上の要素のサイズを変更できる「ズーム」。実際のサイズに属します。

-webkit-transform:scale():chromeブラウザの場合、webkitプレフィックスを追加し、transform:scale()この属性を使用してスケールします

-webkit-text-size-adjust:none: この属性は、デバイス (ブラウザ) に応じてテキストサイズを自動的に調整するかどうかを設定するために使用されます。

違い：

Zoom非標準の属性、互換性の問題があり、ズームすると要素が占めるスペースのサイズが変更され、再配置が引き起こされます

-webkit-transform:scale()最新のブラウザのほとんどがサポートしており、英語、数字、中国語にも有効です。ズームしても要素が占めるスペースは変更されず、ページレイアウトも変更されません

-webkit-text-size-adjustGoogle Chrome にはバージョン要件があり、27 以降、この属性のサポートはキャンセルされ、英語と数字に対してのみ有効になります。

40. CSS の事前にプログラムされた言語についてのあなたの理解について教えてください。違いは何ですか?

理解:Css言語、変数、ミックスイン、関数などの機能が追加され、Css保守と促進が容易になりました。基本的に、前処理はCssのスーパーセットです。カスタム文法とパーサーのセットが含まれています。これらの文法に従って、独自のスタイルルールを定義できます。これらのルールは最終的にコンパイルされ、パーサーを通じて対応するCssファイル

それは: sass、less、stylus

少ないと生意気な比較:

同じ点：

まず第一に、sass とless はどちらも CSS プリコンパイル済みの処理言語です。ミックスイン、パラメーター、ネストルール、操作、色、名前空間、スコープ、JavaScript の割り当てなどを導入して、CSS の開発効率を向上させます。もちろん、両方とも可能です。 gulp や grunt などのフロントエンドビルドツールを使用する

違い：

Less は JavaScript ベースでクライアント側で処理されるため、インストール時に npm を使用します。

SassはRubyベースなのでサーバー上で処理されます

少ないことのメリットとデメリット

利点:less はシンプルで使いやすい、css の基本的な拡張に属します、less は静的インターフェイスでスタイルを記述するのに適しています。

欠点: JavaScript エンジンはコードを処理し、変更された CSS をブラウザーに出力するために余分な時間が必要です。

Sassのメリットとデメリット

利点: 強力で豊富な拡張 Sass は、さまざまなスタイルを置き換えるためのロジックが必要なゲームやその他のエフェクトに適しています。

短所: 複雑で初心者には不親切

41.FOUCとは何ですか? それを避けるにはどうすればよいでしょうか?

FOUC: スタイルのないコンテンツのちらつきは、ドキュメントスタイルの短期的な障害とも呼ばれます。これは主に、HTML がロードされたがスタイルシートがロードされず、その後スタイルシートが再度ロードされることによって引き起こされるちらつき現象を指します。

回避方法:

スタイルシート前面：ブラウザのレンダリング順序に従って、CSSが導入または埋め込まれます。

@import の使用を避けるためにリンクを使用してみてください。

42. クリアフローティングメソッドの長所と短所は何ですか?

追加ラベルの方法: フロートをクリアする対象を、フロートの後に追加の空白ラベルを追加します。

メリット：分かりやすく、書きやすい。(推奨されません)

短所: 意味のないタグが多く追加され、構造が比較的貧弱です。

親によって追加されたオーバーフローメソッド: BFC をトリガーすることで、明確なフローティング効果を実現できます。

利点: シンプル、少ないコード、優れたブラウザサポート

デメリット: コンテンツが増えると、自動改行がないとコンテンツが隠れてしまい、はみ出す必要のある要素が表示できなくなる可能性があります。余分なサイズが非表示になるため、位置と組み合わせて使用することはできません。

after 疑似要素を使用してフロートをクリアします。 :after メソッドは空要素のアップグレードされたバージョンであり、個別にタグを付ける必要がないという利点があります。

利点: クローズド・フローティングの考え方に従って、構造が意味的に正しく、奇妙な問題が発生しにくい (現在: Tencent、Netease、Sina などの大規模な Web サイトが使用されています)

デメリット：IE6～7はサポートしていないため

43. Web ページでは奇数または偶数のフォントを使用する必要がありますか? なぜ？

偶数は、Web デザインの残りの部分と比例関係を形成するのが比較的簡単です。

44. アニメーションを手動で作成する必要がある場合、最小時間間隔はどれくらいだと思いますか?またその理由は何ですか? （アリ）

ほとんどの表示のデフォルトの頻度は60Hz、つまり1 秒あたりの1更新60回数であるため、理論上の最小間隔は次のようになります。1/60*1000ms ＝ 16.7ms

45. Base64の原理とメリット・デメリットは？

利点暗号化できるため、HTTTPリクエストが削減されます

欠点はCPUコーデックを消費する必要があることです

46. 流体レイアウト、聖杯レイアウト、両翼レイアウト?

聖杯レイアウトと両翼レイアウトの違い:

同じ点

2 つの機能は同じで、どちらも両側が固定幅、中央が適応幅の 3 列レイアウトを実現することです。中間部分は HTML コードの前に記述する必要があります。最初にロードされてレンダリングされます。

違い

主な違いは、中央部分がブロックされている問題を解決するときに採用される解決策が異なることです。聖杯レイアウトは、親要素にpadding-leftとpadding-rightを設定し、左側と右側のコンテンツの位置を相対に設定し、左側と右側のコンテンツを移動してコンテンツを左側にすることです。中央の div の外層に、コンテンツを配置する別の div を設定し、中央の div に margin-left と margin-right を設定します。

47. postcssの役割

PostCSS は、JS プラグインを使用して CSS を変換するツールです。これらのプラグインは、変数とミックスイン、将来の CSS 構文のトランスパイル、インラインイメージなどをサポートできます。

効果：

将来の CSS のサポート: cssnext を使用して将来の CSS を作成します (postcss-cssnext プラグイン)

コンパイル速度が大幅に向上しました。PostCSS はプリプロセッサよりも 3 ～ 30 倍高速であると主張されています。

豊富なプラグインシステムで両手を解放します。

CSS のモジュール化によりスコープがコンポーネントに制限され、グローバルスコープの問題が回避され、スタイル名の重複を心配する必要がなくなります。

Postcss は、CSS を動的にコンパイルする、つまり実行時にコンパイルする CSS ポストプロセッサです。

48. cssにはcontent属性はありますか? 効果は何ですか？アプリケーションとは何ですか?

css のプロパティは、生成されたコンテンツを挿入するために使用される疑似content要素に特別に適用されます。before/after最も一般的なアプリケーションは、疑似クラスを使用して float をクリアすることです。

49. 水平センタリング法

要素はインライン要素です。親要素を設定しますtext-align:center

要素の幅が固定されている場合は、左右を;marginに設定できます。auto

絶対的な位置決めと移動:absolute + transform

flex-boxレイアウトを使用し、justify-content属性を中央に指定します

displayとして設定されtabel-ceil

50. CSS3のアニメーションと遷移について詳しく語る

animation

css3animationは css3 の新しいアニメーション属性です。この css3 アニメーションの各フレームは、アニメーションの名前を@keyframes渡して宣言し、アニメーションプロセスを、またはパーセンテージで定義することによって宣言されます。keyframesfromto

アニメーション要素の各フレームの状態は、animation-nameこのアニメーションを参照するために使用されます。同時に、CSS3 アニメーションでは、アニメーションの継続時間、アニメーションの開始時間、アニメーションの方向、アニメーションのループ数も定義できます。、アニメーションの再生方法。

関連するアニメーションのサブプロパティは次のとおりです。

animation-nameアニメーション名の定義

animation-durationアニメーションの再生時間を定義します

animation-delayアニメーションの再生遅延時間を定義します。

animation-directionアニメーションの再生方向を定義します。

animation-iteration-count再生回数を定義する

animation-fill-modeアニメーション再生後の状態を定義する

animation-play-state一時停止、実行などの再生状態を定義します。

animation-timing-function等速再生、減速再生などの再生モードを定義します。

transition

transition-property: トランジション効果を設定するための CSS プロパティ名を指定します

transition-duration : トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。

transition-timing-function : スピードエフェクトのスピードカーブを指定するトランジション関数を指定します。

トランジション遅延 : 表示が開始されるまでの遅延時間を指定します

51. CSSハックとは何ですか? 一般的なハック

説明: CSS スタイルに特殊な記号を追加することで、ブラウザーごとに異なる記号を認識できるようになります (ブラウザーで認識される記号の種類には標準があり、CSS ハックではこの標準を覚えておくことができます)。目的を達成するためにさまざまな CSS スタイルを適用する方法。

よくあるハック:

属性レベルのハック: たとえば、IE6 はアンダースコア " " とアスタリスク "*" を認識できますが、IE7 はアスタリスク "*" を認識できますが、アンダースコア " " は認識できません。Firefox は両方を認識できません。

セレクターレベルのハック: たとえば、IE6 はhtml .class{} を認識でき、IE7 は+html .class{} または *:first-child+html .class{} を認識できます。

IE 条件付きコメントハック: IE 条件付きコメントは、Microsoft IE5 によって提供される非標準の論理ステートメントです。

52. ブラウザは CSS セレクターをどのように解析しますか?

ブラウザが CSS セレクターを解析する方法は右から左です

53. デタッチドスタイルモジュールの書き方とアイデアの表現方法

CSS は、パブリック CSS とビジネス CSS の 2 つの部分に分割できます。

Web サイトの配色、フォント、インタラクションはパブリック CSS として抽出されます。CSS 命名のこの部分には、特定のビジネスが関与するべきではありません。

ビジネス CSS の場合、名前を統一し、共通のプレフィックスを使用する必要があります。オブジェクト指向CSSを参照できます

54. 要素の垂直方向のパーセンテージ設定はコンテナの高さを基準にしていますか?

不是

垂直方向と水平方向のパーセンテージ設定はどちらもコンテナに対して相対的です宽度。マージンとパディングで検証できます

55. 全画面スクロールの原理は何ですか? CSS のどのプロパティが使用されますか?

原理は画像カルーセルの原理に似ており、非表示部分を超えて、スクロールすると表示されます。

可能な CSS プロパティ:overflow:hidden; transform:translate(100%, 100%); display:none;

56. 要素を float に設定した後、要素の表示値はどのように変化しますか

要素が float に設定されると、要素のdisplay値は自動的に次のようになります。block

57.display:inline-block はいつ表示ギャップを表示しますか?

隣接するinline-block要素が改行またはスペースで区切られている場合、スペースが発生します。

非inline-block水平要素はinline-block水平方向のスペースも持つように設定されています

垂直方向の隙間は次の方法でvertical-align:top;解消でき

必要なフォントサイズを親レベルの子要素font-size：0;に

liタグを同じ行に配置すると、縦方向の隙間をなくすことができますが、コードは読みにくくなります。

58. pageX、clientX、screenX、および offsetX の違いは何ですか?

pageX/Y: ロールアウトされた本体部分の長さを含む、ページ全体の場合

clientX/Y: 現在の本体の表示領域からのクリック位置の x、y 座標

screenX/Y: 現在のコンピュータ画面からのクリック位置の x、y 座標

offsetX/Y: 位置を指定した親ボックスの x、y 座標を基準とした値

ここに画像の説明を挿入

59. 異なる IE バージョンのブラウザの互換性テストを行うにはどうすればよいですか?

ツールを使用して IE バージョンを切り替え、IE ブラウザでテストを実行します。

60. 境界半径の詳細説明

開発では、正方形を通る円を実現するために、境界線の半径: 50% を設定することがよくあります。

境界線の半径パラメータの選択:

border-radius: 10px; 同じサイズの丸い角が 4 つ作成されます

border-radius:10px 15px 10px 15px; 4 つの値は、左上隅、右上隅、右下隅、左下隅を表します。

border-radius:10px 15px; 最初の値は左上隅と右下隅を示し、2 番目の値は右上隅と左下隅を示します

border-radius:10px 15px 5px; 最初の値は左上隅を示し、2 番目の値は右上隅と左下隅を示し、3 番目の値は右下隅を示します。

61. CSS を使用してページ上のフォントをより鮮明かつ細くするにはどうすればよいですか?

-webkit-font-smoothing: アンチエイリアス;

63. CSS3 グラデーション?

CSS3 では、次の 2 種類のグラデーションが定義されています。

線形グラデーション - 下/上/左/右/斜め方向

放射状グラデーション - (放射状グラデーション) - 中心によって定義

線形勾配:

構文: 背景画像:linear-gradient方向、カラーストップ 1、カラーストップ 2、...);

方向: グラデーションの方向/角度、オプション (45 度、下へ、上へ、右へ、左へ、左上へ…)

color-stop: 透明度を設定するためにカラー rgba を選択します。または、设置色标点区域例: rgba(255,255,255,0.3) 20%

放射状グラデーション:

语法：background-image: radial-gradient(位置の形状サイズ, start-color, …, last-color);

形状パラメータは形状を定義します。円または楕円の値を指定できます。このうち、circleは円を表し、ellipseは楕円を表します。デフォルト値は楕円です。

size: 主に放射状グラデーションの終端形状のサイズを決定するために使用されます。省略した場合、デフォルト値は「最も遠いコーナー」です。

位置の開始点: 中心点の位置。キーワード (水平方向 – 左、中央、右、垂直方向 – 上、中央、下)、特定の値、またはパーセンテージにすることができます。

64. レスポンシブレイアウトとアダプティブレイアウトの違いは何ですか?

レスポンシブレイアウトとは、CSS メディアクエリを使用して、さまざまなデバイスやビューポート幅に応じてさまざまなスタイルを設定し、さまざまな画面サイズに適応させ、ページの自動調整と最適化を実現することを指します。レスポンシブレイアウトにより、デスクトップ、タブレット、携帯電話などの複数のデバイスで Web サイトを最適に表示できます。

アダプティブレイアウトとは、画面サイズに応じて適切なレイアウト方法を選択し、さまざまなデバイスでページをより美しく、読みやすくすることを指します。アダプティブレイアウトは比較的固定的です。ページレイアウトは通常、いくつかの固定レイアウトで構成されます。レスポンシブレイアウトのようにスタイルを直接変更するのではなく、異なる画面サイズで異なるレイアウトの組み合わせが選択されて表示されます。

65. z-index が失敗するいくつかの状況

位置属性が設定されていないか、値が静的です。z-index 属性を使用する場合は、まず要素の位置属性を相対、絶対、または固定に設定する必要があります。そうしないと、z-index が設定されていても機能しません。

親要素の z-index 値が子要素の z-index 値よりも高い: 親要素とその子要素に z-index が設定されている場合、子要素の z-index が無効になる可能性があります。

浮動要素の無効な z-index: 浮動要素を使用する場合、z-index プロパティが機能しない可能性があります。これは、フローティング自体に特定のカスケード性があり、フローティング要素の積み重ね順序がドキュメントフロー内の順序によって決定されるためです。

66. float の後に表示値を変更しますか?

ブロック

67. CSSのアンカー

<a name="go">来我这里</a>
......
<a href="#go">我来了</a>

id 属性を使用して name 属性を置き換えたり、id を使用してアンカーポイントを定義したり、ラベルを検索したりできます。name 属性は、a タグに対してのみ配置できます。

68. モバイルでの 1px 問題の解決策

CSS擬似要素::after + transfromによるスケーリング

メリット：全機種対応、実質1px実現、角丸加工可能。古いプロジェクトに適しています。

デメリット：after疑似要素が一時的に使用されるため、フローティングの解除に影響を与える可能性があります。

ビューポートのスケール値を設定する

利点: すべてのモデルと互換性があり、1px を直接書き込むことはこれ以上に便利です。

短所: 新しいプロジェクトには適用されますが、古いプロジェクトは大幅に変更される可能性があります。

コンポーネントライブラリ vant/ant-design-mobile を使用する

69. モバイル H5 開発ブラウザのデフォルトの左右のスライド動作を防止する

html{
    
    
    touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
    
    
touch-action:none;
touch-action:pan-y;
}

70. CSS での移動要素の配置と変換の比較

パフォーマンスの面: 変換パフォーマンスは位置よりもはるかに高い

移動によって移動しても、要素は元のスペースを占有し続けます。位置ごとに移動すると、位置が変更されて再描画がトリガーされます

71.margin-left：auto、margin-right：auto、margin：auto区别

マージン左:自動右对齐

右マージン：自動左对齐

マージン: 自動居中

72.css 全画面スクロール

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;必須の属性

<style>
        html,
        body {
     
     
            height: 100%;
            margin: 0;
        }

        ul {
     
     
            margin: 0;
            /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。
            overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。
            */
            scroll-snap-type: y mandatory;
            /*设置父级*/
            padding: 0;
        }

        li {
     
     
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。
            */
            scroll-snap-align: center;
            /*子级设置*/
            text-align: center;
        }

        li:nth-child(1) {
     
     
            background-color: teal;
        }

        li:nth-child(2) {
     
     
            background-color: gold;
        }

        li:nth-child(3) {
     
     
            background-color: green;
        }
    </style>

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>