最も包括的な CSS インタビューの質問 (回答を含む)

1. display:none; と Visibility:hidden; の違いは何ですか?

display:none; スペースを空けるために完全に消えます。ページのリフロー (再配置) をトリガーできます。

Visibility:hidden; は非表示ですが、位置は解放されません。たとえば、opacity:0; はページのリフローを引き起こしません。

2. CSSの優先度と重みの値の計算方法

埋め込みスタイル>内部スタイル>外部スタイル>インポートされたスタイル

！重要 > 埋め込み 1000 >ID 100 > クラス=[]=疑似クラス 10 > タグ=疑似要素 1 > ( * + > ~) 0

3. BFCのトリガー方法とBFCの役割

BFC: ブロックフォーマットコンテキストブロックフォーマットコンテキストは、独立したレンダリング領域です。これは内部ボックスのレイアウト方法を指定するもので、この領域の外側とは何の関係もありません。

Trigger: float の値は none ではありません。position の値は静的でも相対的でもありません。display の値は inline-block、block、table-cell、flex、table-caption、または inline-flex、overflow の値は見えない。

機能: マージンの重なりを回避し、2 列のレイアウトに適応し、フローティングをクリアします。

4.CSSボックスモデル

ボックスモデルは、マージン、ボーダー、パディング、コンテンツの 4 つの部分で構成されます。

標準ボックスモデルのサイズ=ボーダー+パディング+コンテンツ

奇妙な箱のモデルのサイズ=内容

奇妙なボックスモデルを変換します: box-sizing:border-box;

標準ボックスモデルに変換します: box-sizing:content-box;

5. 要素を水平方向と垂直方向の中央に配置する方法

5.1. フレキシブルボックス

.box{
  表示: フレックス; 
  コンテンツの位置揃え: 中央; 
  整列項目: 中央; 
}

5.2. 位置決め

.box{
  位置: 相対; 
} 
.box .sub{
  位置: 絶対;
  上: 50%;
  左: 50%;
  変換: 変換(-50%, -50%); 
  /*マージン左: 負の幅の半分* / 
  /*margin-top: 負の高さの半分*/ 
}

6. CSS は三角形を実装します

.triangle{
  幅: 0; 
  高さ: 0; 
  境界線: 100 ピクセルの透明な実線。
  境界左の色: 赤; 
}

7. 左側の固定幅と右側のアダプティブレイアウトを実現する方法

7.1. 聖杯のレイアウト

<div id="コンテナ"> 
  <div id="center" class="column"></div> 
  <div id="left" class="column"></div> 
  <div id="right" クラス="column"></div> 
</div> 
#container { 
  padding-left: 200px; 
  パディング右: 150px; 
#container .column { 
  float: left; 
} 
} 
#center {
  幅: 100%; 
} 
#left {
  幅: 200ピクセル; 
  マージン左: -100%; 
  位置: 相対的; 
  右: 200ピクセル。
} 
#right {
  幅: 150ピクセル; 
  マージン右: -150px; 
}

7.2. 両翼レイアウト

  <div id="container" class="column"> 
    <div id="center"></div> 
  </div> 
  <div id="left" class="column"></div> 
  <div id= "right" class="column"></div> 
  #container { 
    width: 100%; 
  } 
.column
{ 
  float: 左; 
#center 
        
{ 
  margin-left: 200px; 
  マージン右: 150px; 
} 
        
#left {
  幅: 200ピクセル; 
  マージン左: -100%; 
} 
        
#right {
  幅: 150ピクセル; 
  マージン左: -150px; 
}

7.3. 輪郭レイアウト (疑似等高さ) 相補的な内側と外側のマージン

.parent{
  オーバーフロー: 非表示; 
.left 
, .right{ 
  margin-bottom: -10000px; 
  パディングボトム: 10000px; 
}

7.4. 等高レイアウト（真等高）フレキシブルボックス

.parent{
  表示: フレックス; 
.child 
{
  フレックス: 1; 
}

7.5、計算

  <div id="left" class="column"></div> 
  <div id="center" class="column"></div> 
  <div id="right" class="column"></div > 
  .column{
    フロート: 左; 
  } 
  #left{
    幅: 100px; 
  } 
  #right{
    幅: 200px; 
  } 
  #center{
    幅: calc(100% - 100px - 200px); 
  }

7.6. フローティング

  <div id="left" class="column"></div> 
  <div id="right" class="column"></div> 
  <div id="center"></div> 
  #left{ 
    float ： 左; 
    幅: 100ピクセル; 
  } 
  #right{
    フロート: 右; 
    幅: 200ピクセル; 
  #center 
  { 
    margin-left: 100px; 
    マージン右: 200px; 
  }

8. 6pxフォントの実装方法

.font{
  フォントサイズ: 12px; 
  変換: スケール(.5); 
}

9. モバイル端末に1pxの枠線を設定する方法

/* 方法1 */
.border{
  width: 100%;
  height: 1px;
  background: red;
}
/* 方法2 */
.border{
  border-image: url(border.png)
}
/* 方法3 */
.border{
  box-shadow: 0 0 0 1px #000;
}

10. px、em、rem、vh、vw とはそれぞれ何ですか?

px 物理ピクセル、絶対単位。em は自身のフォントサイズを基準とします。サイズがない場合は、親フォントサイズを基準とします。親にサイズがない場合は、html が見つかるまでレイヤーごとに上方向に検索します。相対単位。rem は html のフォントサイズ、相対単位、vh のサイズ、画面の高さ、相対単位、vw のサイズ、画面幅、相対単位。

11. CSS の継承可能なプロパティは何ですか?

継承可能な属性: Text クラス: text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color。

字体类：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust；

その他の種類：visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor 、ページ、改ページ内部、窓、孤児など

最も包括的な CSS インタビューの質問 (回答を含む)

おすすめ