CSS 面接の一般的な質問を整理する

ボックスモデル

標準ボックスモデル ： content
• 奇妙なボックス モデル: ボーダー コンテンツ

特別な推奨事項:2020 年の CSS 面接の質問のまとめ(最新)

インライン要素

機能
• 幅と高さの設定は無効です
  • マージンの設定のみが有効です左右、上下に対して無効です
  • パディングの設定は上下左右に対して有効であり、スペースが確保されます
  • 行は自動的に折り返されません
一般的なインライン要素
• a span b i Strong

インライン ブロック要素

機能
• 幅と高さを設定できます
  • すべてのインライン要素は同じ行に表示されます
共通のインライン ブロック要素
• img input button select
#ブロックレベル要素

機能

• 幅と高さを設定できます
  • すべてのブロック レベルの要素は 1 行を占めます
  • 幅と高さが設定されていない場合、デフォルトで親から継承されますレベルの幅と高さ
  Commonブロックレベルの要素
• p p ul li h1-h6
中央揃えを実現するcss

margin: 0 auto;

• position 位置は、translate:translate
• flexlayout
• text-align は、line-height と一致し、使用されます。フォントは、親要素の領域内の中央に配置されます。
• vertical-align: middle; インライン要素のセンタリングを設定するために使用されます
• css hack

説明: ブラウザーごとに、互換性のために別の CSS を作成します

• 条件ハック

  • <!--[if IE]>
    <style>
      p {
          color: red;
      }</style>
    <![endif]-->

  属性ハック

  • .p {
        color: red; /*IE 8+*/
        *color: green; /*IE 7*/
        _color: yellow; /*IE 6*/}

  セレクター ハック

  • /*IE 6*/* html .p {
        color: red;}/*IE 7*/* + html .p {
        color: green;}

px と em

px は絶対単位であり、値は固定です

• em は親から継承されます要素のフォント サイズのサイズ単位
support

@support は、ブラウザが特定の css 属性をサポートしているかどうかを検出するために使用され、条件判断として理解でき、一般に互換性処理に使用されます。

media

ビューポートのケースに対応する CSS スタイルに基づくメディア クエリは、通常、モバイル互換性を確保するために rem で動作します。

calc

css 計算属性。長さの値を動的に計算するために使用され、数学的演算をサポートします。

Float のクリア

疑似要素の float のクリア

• 原則: 高さ崩れの問題を解決するには、親要素の疑似要素に clear:both を設定します。

  • ::after {
      content: "";
      clear: both;
      overflow: hidden;
      height: 0;}

BFC: 独立したレイアウト環境です

書式設定コンテキストは独立したレンダリング領域であり、BFC 内の要素を外部から分離できます。内部要素と外部要素の位置が相互に影響を与えないように要素を配置します。

• ルール
• 同じ BFC の下では、デフォルトで 2 つの隣接するボックスが縦に配置されます。
  • 同じ BFC の下では、上下の隣接する 2 つのボックスの余白が重なり合います。
  ##BFC はフロート領域と重なりません
  • #BFC の高さを計算するとき、フローティング サブ要素も計算に参加するため、BFC の高さが設定されていない場合は、BFC も引き伸ばされます。浮動サブ要素によって。
  • テキスト レイヤーはフローティング レイヤーで覆われませんが、フローティング レイヤーを囲みます。
  親エッジと子のエッジが重なる問題を解決するには、マージン子要素の位置は親要素とともに移動します
原則: 擬似要素を使用して高さ 0 のテーブルを親要素に追加します

#ボックス モデル

標準ボックス モデル: コンテンツ
奇妙なボックス モデル: 境界線のコンテンツ

インライン要素

機能
• 幅と高さの設定は無効です
  マージンの設定は左右にのみ有効で、上には有効ではありませんおよび一番下
  パディングの設定は上下左右の両方で有効であり、スペースをサポートします
  自動的にラップされません
commonインライン要素
• スパンビストロング

インラインブロック要素

機能
• 幅と高さ
  すべてのインライン要素と同じ行に表示
共通のインライン ブロック要素
• img 入力ボタンの選択

ブロック レベルの要素

機能
• 幅と高さを設定できます
  すべてのブロック レベルの要素は、排他行
  • ##幅と高さが設定されていない場合、デフォルトで親の幅と高さが継承されます
  ##共通ブロックレベル要素
p p ul li h1-h6
• css センタリング

margin: 0 auto;

position 変換による位置決め:翻訳
flexレイアウト
text-align with line-height、親要素領域内のフォントに使用されます Center
vertical-align: middle; の中央揃えを設定するために使用されます。インライン要素
• cssハック

説明: ブラウザごとに異なるCSSを記述し、互換性のあるものとして使用します

条件ハック

• <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • #属性ハック

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • セレクター ハック

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

  px および em

px は絶対単位であり、値は固定です

em は親要素から継承されたフォント サイズのサイズ単位です

support
@support が使用されますブラウザが特定の css 属性をサポートしているかどうかを検出するための条件判定として理解でき、一般に互換性処理に使用されます。

media

ビューポートのケースに対応する CSS スタイルに基づくメディア クエリは、通常、モバイル互換性を確保するために rem で動作します。

calc

css 計算属性。長さの値を動的に計算するために使用され、数学的演算をサポートします。

Float のクリア

疑似要素の float のクリア

原則: 高さ崩れの問題を解決するには、親要素の疑似要素に clear:both を設定します。

• ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

  • BFC: 独立したレイアウト環境です

書式設定コンテキストは独立したレンダリング領域であり、BFC 内の要素を外部から分離できます。内部要素と外部要素の位置が相互に影響を与えないように要素を配置します。

ルール

• 同じ BFC の下では、デフォルトで 2 つの隣接するボックスが縦に配置されます。
• 同じ BFC の下では、上下の隣接する 2 つのボックスの余白が重なり合います。
  ##BFC はフロート領域と重なりません
  • #BFC の高さを計算するとき、フローティング サブ要素も計算に参加するため、BFC の高さが設定されていない場合は、BFC も引き伸ばされます。浮動サブ要素によって。
  • テキスト レイヤーはフローティング レイヤーで覆われませんが、フローティング レイヤーを囲みます。
  • 親エッジと子のエッジが重なる問題を解決するには、マージン子要素の位置は親要素とともに移動します
  • 原則: 擬似要素を使用して高さ 0 のテーブルを親要素に追加します

推奨される関連チュートリアル:

CSSビデオチュートリアル

以上がCSS 面接の一般的な質問を整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。