CSS インタビューの質問のステレオタイプのエッセイのまとめ

1.cssセレクター

• ソース: インライン スタイル > 内部スタイル > 外部スタイル > ブラウザーのカスタマイズ > カスタム スタイル
• タイプ: id セレクター (1000) > クラス セレクター > 疑似クラス セレクター (:hover など、属性セレクター > ラベル セレクター、疑似要素 (1) > ワイルドカード セレクター、子セレクター、隣接セレクター 補足
  :
• ! 重要は最高の優先度を持っています
• 優先度は同じで、最後のものが有効になります
• 継承の優先度が低い

2.cssのボックスモデル

• 標準ボックス モデル (W3C)
  box-sizing: content-box (デフォルト値)
  標準ボックス モデルの合計幅/高さ: margin+border+padding+content 領域の幅/高さ (つまり、幅/高さにはパディングと境界線の値は含まれません) )))
  

• 奇妙なボックス モデル (IE ボックス モデル)
  box-sizing:border-box
  IE ボックスの合計幅/高さ == (コンテンツ領域の幅/高さ + パディング + ボーダー) + マージン。(つまり、幅/高さにはパディングとボーダーの値が含まれます))

3.css 継承プロパティ

• フォント ファミリー: font-family、font-weight、font-size、font-style
• テキストシリーズ: text-align、line-height、color
• 要素の可視性: 可視性
• リスト レイアウト属性: list-style

4.レイアウト方法

静的レイアウト:
アダプティブ レイアウト:
流動的レイアウト:
レスポンシブ レイアウト:
エラスティック レイアウト:

5. css 属性の position 属性とは?

ドキュメント フローとは、要素のタイプセットとレイアウトのプロセスを指し、要素は左から右、上から下に自動的に配置され、最終的にフォームは上から下の行に分割され、各行は順序に従って分割されます。左から右へ 要素を正しい順序で並べます。[文書の流れから逸脱するということは、要素が配置を乱すことを意味します]、または組版からそれを取り除くことです。

css には、ドキュメント フロー、フロート、および位置の 3 つの配置メカニズムがあります。

A: position: absolute は、静的配置以外の最初の親要素に対して相対的に配置される絶対配置要素を生成します; 絶対配置により、ドキュメント フローから切り離されます。

B: position: fixed は、ブラウザー ウィンドウに対して相対的に配置された絶対配置要素を生成し、通常の順序とは関係ありません。

C: position: relative 通常の位置に対して相対的に配置された、相対的に配置された要素を生成します。ドキュメント フローから抜け出す方法はありません。

D: float: left 浮き上がり、元の位置を維持できなくなります。
ポジショニング

• static: デフォルト値、配置なし、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言を無視)
• absolute: 絶対配置を生成する要素は、静的配置以外の最初の親要素に対して相対的に配置され、要素は "left"、"top"、"right"、および "bottom" 属性によって指定されます。
• flxed: ブラウザー ウィンドウに対して相対的に配置された固定配置要素を生成します。
• Relative: 相対位置を生成し、他の通常の位置との相対位置を生成します
• sticky: スティッキー ポジショニング。ポジショニングはユーザーのスクロール位置に基づきます。

6. 表示: なしと可視性: 非表示の違い

• さまざまな機能の可視性: hidden---- 要素を非表示にしますが、Web ページ内で占めるべき位置を占めます。display: none---- 要素の表示を none に設定します。つまり、要素は Web ページのどの位置にもありません。
• さまざまな表示プロパティを定義して、要素が表示されるかどうかを指定します。display この属性は、レイアウトが確立されたときに要素によって生成される表示ボックスのタイプを定義するために使用されます。

7. CSS 測定単位

1. rem は、ルート フォント サイズに相対的な単位です。たとえば、1rem=50px を設定できます。
2. em は、font-size: 16px (ブラウザのデフォルト)、2em=32px のように font-size に相対的です。
3. vm は視点の幅、つまりウィンドウの幅です。たとえば、1vm の幅はウィンドウの幅の 1 パーセントです。
4. vh は視点の高さ、つまりウィンドウの高さです。たとえば、1vm の高さはウィンドウの高さの 1 パーセントです。

8. リフローと再塗装

ブラウザがページをレンダリングする
● HTML パーサーを介して、HTML が DOM ツリーに解析されます。
● CSS パーサーを介して、CSS ファイルを解析し、カスケーディング スタイル シート モデルの CSSOM ツリーを形成します。
● DOM ツリーと CSSOM ツリーを組み合わせてレンダリング ツリーにする
● レイアウト、ブラウザはレンダリング ツリーの各ノードを画面に描画します。これをレイアウト (Layout) と呼びます
● 描画、レンダリング ツリーの各ノードを画面に描画します。ステップは描画（ペイント）と呼ばれます

再配置 (リフロー)
再配置とは、ブラウザが最初にページ レイアウトをレンダリングした後に、ページ上の各ノードの位置を再計算または再レイアウトする動作です。

• 要素の位置またはサイズが変更されたため、ブラウザはレンダリング ツリーを再計算し、レンダリング ツリーの一部またはすべてが変更され、ページ上の影響を受ける要素を再描画する必要があります。
• 
  再配置を引き起こす可能性のある動作には、ページ サイズの変更、要素のサイズまたは位置に関する操作などがあります
  。変更、要素の再描画プロセス
  ● 再描画が必ずしも再配置をトリガーするとは限りませんが、再配置は必ず再描画をトリガーします
  ● 例: 可視性、アウトライン、および背景色などの属性の変更 よく
  HTML と呼びます Web ページの構造です。 CSSはウェブページの見た目、JSはウェブページの動作ですが、一般的にはウェブページのHTMLの変更（つまりDOM要素の変更）を伴うものは再配置であり、CSSを伴うものは、 color, reordering. Drawing (display: flex を使用するなど、DOM に影響を与えるものはカウントしない) を
  減らして回避する
  . 並べ替えや再描画を避けるには、複数の DOM 操作を 1 つの DOM 操作に減らすかマージする必要がある
  .絶対的な配置は要素を作ることができます 文書の流れから離れて、外の世界に影響を与えずに部分的な再配置のみを開始します .インタビューの回答を
  集中的に変更する場合, サイズや位置を変更するなど、ページのレイアウトに影響を与える場合、それは再配置のトリガーとなります。背景色などを変更する場合は再描画です。
  
  

9.CSSボックスセンター表示

1. 父と息子を探す

• 1.1マージンは自動に設定されています

.child { トップ: 0px; 左: 0px; 下: 0px; 右: 0px; マージン: 自動; }

• 1.2 変換により、子ボックスが幅と高さの半分の「後方」に移動します

.child { 位置: 絶対; 上: 50%; left: 50%; transform: translate(-50%, -50%);

2. フレックス レイアウト
親ボックスをフレキシブル ボックス コンテナーとして設定し、
子要素を水平方向および垂直方向の中央に配置します。

.parent { 表示: フレックス; 正当化コンテンツ: センター; 整列項目: センター; }

• 3. inline-block インライン ブロック要素
  text-align: center; インライン要素とインライン ブロック要素にのみ有用

.parent { text-align: center; line-height: 500px; } .child { display: inline-block; vertical-align: middle; vertical-align プロパティは、要素の垂直方向の配置を設定します。middle は、この要素を親要素の中央に配置します。}

CSS ボックスは右側が固定され、左側がアダプティブです
1. 固定ボックス フローティング + アダプティブ ボックス幅: 100%;//幅は 100% に等しい

.left { float: left; width: 200px; height: 400px; background: red; } .right { width: 100%;// width は 100% に等しいheight: 400px; margin-left: 200px; background: blue; }

2. フレックス レイアウトの親コンテナーは display: flex に設定され、Right パーツは flex: 1 に設定されます。

.box{ 表示: フレックス;}

.left{幅:200px;背景:赤;}

.right{width:%;flex:1;background: blue;}/左の列の幅に等しい/

3.両側絶対位置決め

.left{幅:200px;背景: 赤; 位置: 絶対;左:;}

.right{width:100%;background: blue;position: absolute;left:200px;}/左の列の幅に等しい/

10. CSS スタイルの隠し要素

画面外への配置、透過変形、表示、不透明度、

• opacity 属性の効果は、背景色に透明度を追加することです. 値の範囲は 0~1 ですが、背景色のフォントも一緒に透明にします. 単独で使用するとうまく機能します.
• 要素の可視性を設定します。hidden もこの要素を非表示にできますが、非表示の要素は非表示でない場合と同じスペースを占有する必要があります。つまり、要素は非表示ですが、ページ レイアウトには影響します。 .
• 要素に display: none が設定されている場合、要素とそのすべての子孫要素が非表示になります。これは、フロントエンド開発者が最も頻繁に使用する非表示方法です。非表示の要素はクリックできず、スクリーン リーダーなどの補助デバイスでアクセスできず、占有されていたスペースが消えます。

補足：
視認性と表示の違い

• Visibility は継承されます。visibility:hidden を親要素に設定すると、子要素もこのプロパティを継承します。しかし、可視性を子要素に再度設定すると、子要素が再び表示されます。これは display: none とは質的に異なります。
• 図に示すように、visibility: hidden はカウンターのカウントには影響しませんが、visibility: hidden は要素を非表示にしますが、そのカウンターはまだ実行されています。これは、display: none とはまったく異なります。
• The CSS3 transition supports the visibility attribute, but not support the display. トランジションは遅延できるため、可視性と組み合わせて使用​​し、純粋な CSS を使用してホバー遅延表示効果を実現できます。ユーザーエクスペリエンスを向上させます。

11.CSSスタイル表示

• block" 要素をブロックレベル要素として表示する
• none は、visibility 属性の hidden 値と異なります。非表示のオブジェクト用に物理的なスペースを予約しません。Web ページでは消えますが、要素はドキュメントでは削除されず、Web ページで隠されているだけです。構造であり、Web ページには表示されません。物理的なスペースを占有せず、Web ページには表示されませんが、DOM 構造はそのままです
• inline」は、主にブロックレベル要素をインライン要素に変換するために使用されます

12. CSS の疑似クラス

リンク疑似クラス: 訪問したリンク ホバー アクティブ
構造疑似クラス: 最初の子 最後の子 nth-child(n) nth-last-child(n)
N: 偶数 奇数 n 2n など
ターゲット疑似クラス: :target { }

13.CSSアニメーション

アニメーションの共通属性:
アニメーション フレーム アニメーション
animation-name: アニメーション名
animation-duration: 継続時間
animation-timing-function: アニメーションの速度曲線
animation-delay: アニメーションの開始時間
animation-iteration-count: 指定したアニメーション再生回数 デフォルトは 1
アニメーションです- 方向: アニメーションが次のサイクルで逆方向に再生されるように指定します。デフォルトは公称です。