HTML+CSS 面接の質問の概要 (回答 + 動画解説付き)

各セレクターには重みがあり、重みが大きいほど優先順位が高くなります。
継承されたスタイルは、自己指定したスタイルよりも優先度が低くなります。
重みが同じ場合、要素に近いスタイルの優先順位は、インラインスタイルシート（タグ内）＞内部スタイルシート（現在のファイル内）＞外部スタイルシート（外部ファイル内）の順となります。

4. Web標準とw3cの理解と理解

回答: タグは閉じられており、タグは小文字であり、ランダムな入れ子がないため、検索エンジンの検索確率が向上します。外部リンクの css および js スクリプトを使用すると、構造と動作が分離され、より幅広いデバイスからコンテンツにアクセスできるようになります。

コードとコンポーネントが少なく、保守が容易で改訂が容易で、ページのコンテンツを変更する必要がありません。

5.BFC

BFCのコンセプト

[ブロックレベルの書式設定コンテキスト] とも呼ばれます。簡単に言うと、BFC は完全に独立した空間 (レイアウト環境) であり、空間内のサブ要素は外部のレイアウトに影響を与えません。

BFCとはCSSレイアウトの概念で、内部の要素が外部の要素に影響を与えない環境のことです。

BFC レイアウトルール

内箱は縦方向に順番に配置されます。

ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。

各ボックス (ブロックボックスとラインボックス) のマージンボックスの左側は、それを含むブロックの境界ボックスの左側に接しています (左から右への書式設定の場合、それ以外の場合はその逆です)。これは浮きがあった場合にも当てはまります。

BFC エリアはフロートボックスと重なりません。

BFC はページ上で分離された独立したコンテナであり、コンテナ内のサブ要素は外部の要素には影響しません。およびその逆。

BFC の高さを計算するときは、浮動要素も計算に参加します。

BFC の作成方法

1. float の値は none ではありません。

2. 位置の値は静的でも相対的でもありません。

3. display の値は、inline-block、table-cell、flex、table-caption、または inline-flex です。

4. オーバーフローの値は表示されません

BFCの役割（どのような問題を解決するのか）

余白の重なりを防止する
フロート要素を含めることができます - 内部フロートをクリアします
適応型 2 列レイアウト
要素がフロート要素によって覆われるのを防ぐことができます

6. 要素を非表示にする方法と違いは何ですか?

Visibility: hidden; この属性は単に要素を非表示にしますが、要素が占有するスペースはまだ存在します。
不透明度: 0; CSS3 属性、0 を設定すると要素を完全に透明にすることができますが、ページレイアウトは変更されません。さらに、要素がクリックイベントなどのイベントにバインドされている場合、この領域をクリックするとクリックがトリガーされることもありますイベント。
display: none; 要素は非表示になり、要素の位置を占めなくなります。ページレイアウトを変更させていただきます。
transform:scale(0); 要素を無限に小さくスケールするように設定すると、要素は非表示になり、要素の元の位置が保持されます。

7. ボックスを水平方向と垂直方向の中央に配置する方法

4 つの方法:

絶対配置を使用して、まず要素の左上隅を上:50% および左:50% を通じてページの中央に配置し、次に移動によって要素の中心点をページの中央に調整します。

.div { 位置: 絶対; 幅: 200ピクセル;高さ: 200ピクセル; 背景: サーモン。左: 50%;上: 50%; 変換: 変換(-50%, -50%); }

絶対配置を使用し、4方向の値を0に設定し、マージンを自動に設定します。幅と高さは固定なので、対応する方向を等分割し、水平方向と垂直方向のセンタリングが可能です。達成。この方法は、ボックスに幅と高さがある場合に適しています。

.div { 位置: 絶対;幅: 200ピクセル;高さ: 200ピクセル; 左: 0;右: 0;上: 0;下: 0;マージン: 自動;}

絶対配置を使用して、まず要素の左上隅を上:50% および左:50% を通じてページの中央に配置し、次に負のマージン値を使用して要素の中心点をページの中央に調整します。この方法は、ボックスの幅と高さがわかっている状況に適しています。

.div { 位置: 絶対; 幅: 200ピクセル;高さ: 200ピクセル; 左: 50%。トップ: 50%; マージン左: calc(-200px / 2); マージントップ: calc(-200px / 2); }

フレックスレイアウトを使用して、align-items:center と justify-content:center を使用してコンテナの垂直方向と水平方向の配置を中央に設定すると、その子要素も垂直方向と水平方向の中央に配置できます。

.div { 幅: 100%; 高さ: 100%; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; 整列項目:中央; }

8. 聖杯レイアウトと両翼レイアウト

違い: Holy Grail Layout は、中央の div の左右の内側のマージンを設定し、次に左右の div を配置し、中央の div をブロックしないように左右の属性を設定します。Double Flying Wing レイアウトは、内側にサブ div を直接作成します。コンテンツを配置するための中央の div。、サブ div の左と右のマージンをそれぞれ設定して、左と右の列 div 用のスペースを残します。

聖杯のレイアウト: 左側と右側は固定、中央は適応型で、レンダリングは次のとおりです。

効果：

Holy Grail レイアウトと Double Flying Wings レイアウトは、両側に広い上部と適応型の中央列を備えた 3 列レイアウトであるという同じ問題を解決します。中央の列は優先順位を付けるためにドキュメントフローの前に配置する必要があります。レンダリングへ。

違い：

聖杯レイアウトとダブルウィングレイアウトの問題の解決策は、前半では同じです。つまり、3 つの列すべてをフロートさせますが、左右の列にマイナスのマージンを追加して並べます。中央の列 div を使用して 3 列のレイアウトを形成します。

違いは、「中央列の div の内容がブロックされない」問題を解決するためのさまざまなアイデアにあります。

Holy Grailレイアウトは、中央divのコンテンツがブロックされないように、中央divの左右のpadding-leftとpadding-rightを設定した後、position:relativeで左右のdivの相対レイアウトを使用します。左右の列 div が移動後に中央の div をブロックしないように、それぞれ right 属性と left 属性を一致させます。

ダブルウイングレイアウトでは、ミドルdivの内容が遮られることを防ぐため、ミドルdivのすぐ内側にサブdivを作成し、コンテンツを配置します。左右の列 div 用のスペースを残すために使用されます。

聖杯レイアウトコード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>圣杯布局</title>
    <style>
        #bd {
            padding: 0 200px 0 180px;
            height: 100px;
        }
        #middle {
            float: left;
            width: 100%;
            height: 500px;
            background: blue;
        }
        #left {
            float: left;
            width: 180px;
            height: 500px;
            margin-left: -100%;
            background: #0c9;
            position: relative;
            left: -180px;
        }
        #right {
            float: left;
            width: 200px;
            height: 500px;
            margin-left: -200px;
            background: #0c9;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<div id="bd">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
</body>
</html>

両翼レイアウト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .out,.left,.right{
            float: left;
            height: 200px;
        }
        .out{
            width: 100%;
            background-color: #eee;
        }   
        .main {
            background-color: pink;
            margin: 0 200px;
            height: 200px;
        }
        .left {
            width: 200px;
            background-color: skyblue;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            background-color: skyblue;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

後でまとめますが、ダブルウィングレイアウトの本質は聖杯レイアウトと同じで、どちらもマイナスのマージンを設定することで要素の配置を実現します。

違いは HTML の構造にあり、Shuangfeiyi では中央の要素の内側にミドルインナーを設定し、その左右のマージンを設定しますが、Holy Grail レイアウトではパディングを使用して両側の要素のカバレッジを除外します。
二重飛行翼レイアウトには追加の HTML 構造を含めることができますが、左右の要素の位置を設定する必要はありません。

9. CSSボックスモデル

CSS ボックスモデルは基本的に HTML 要素をラップするボックスであり、ボックスは内側から外側に、content、padding、border、margin の 4 つの属性で構成されます。

2つのボックスモデルの違い

標準ボックスモデル:

幅 = コンテンツの幅

高さ = コンテンツの高さ

奇妙なボックスモデル:

width = コンテンツの幅 + パディングの幅 + ボーダーの幅

これら 2 つのモデルを CSS で設定する方法

標準ボックスモデル：

ボックスのサイズ設定: コンテンツボックス

奇妙なボックスモデル:

ボックスのサイズ変更: ボーダーボックス

標準 CSS ボックスモデルを導入しますか? IE の下位バージョンのボックスモデルとの違いは何ですか?

CSS ボックスモデル: マージン、パディング、ボーダー、コンテンツ領域 (幅と高さ) の 4 つの属性で構成されます。

標準 CSS ボックスモデルは、ローエンド IE CSS ボックスモデルとは異なります。幅と高さが異なります。

標準 CSS ボックスモデルの幅と高さは、コンテンツ領域の幅と高さです。

IE CSS ボックスモデルの幅と高さのパディング + 境界線 + コンテンツ領域。

10. ブラウザのレンダリング機構

1. Web ページの生成プロセス:

Webページの生成プロセスは大きく5つのステップに分かれます。

HTMLコードをDOMに取り込む
CSS コードを CSSOM (CSS オブジェクトモデル) に変換する
DOM と CSSOM を組み合わせてレンダリングツリーを生成します (各ノードの視覚情報を含む)
レイアウトを生成します。つまり、すべてのレンダリングツリーのすべてのノードの平面合成です。
画面上にレイアウト（ペイント）を描画します

　　これら 5 つのステップのうち、ステップ 1 ～ 3 は非常に速く、ステップ 4 と 5 が最も時間がかかります。

　　「レイアウトの生成」（フロー）と「描画」（ペイント）の2つの工程を総称して「レンダリング」と呼びます。

11. CSS3の新機能

css3の新機能	説明する
ボックスシャドウ	ボックスシャドウ
境界半径	フィレ
ボックスのサイジング	ボックスモデル
線形グラデーション、放射状グラデーション	勾配
遷移	遷移
アニメーション化する	アニメーション
変身	2D変換/3D変換
アイコンフォント	フォントアイコン
フレックス	柔軟なレイアウト

フレックスの 12 の共通プロパティ

flex の共通プロパティ	説明する
* フレックス方向	コンテナの主軸の方向を設定します。
* フレックスラップ	コンテナが十分に入るかどうか、ラップするかどうか（なし/上/下）を設定するために使用されます。
* コンテンツの正当化	コンテナ内のコンテンツの配置を設定するために使用されます
* アイテムを揃える	コンテナ全体の配置を設定するために使用されます
コンテンツの整列	複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。
フレックスフロー	flex-deriction プロパティと flex-wrap プロパティの略称で、デフォルト値は [row nowrap] です。

13. スプライトピクチャ（スプライトピクチャ）の原理とメリット・デメリット

英語名は css スプライトで、通常は「CSS 画像の結合」または「CSS テクスチャの配置」として解釈されますが、実際には、Web ページ内の背景画像を画像ファイルに統合し、CSS の「background-画像」に

「background-repeat」と「background-position」を組み合わせて背景を配置します。background-positionは数値を使用して背景画像の位置を正確に特定します。一般的な小さなアイコンに適していますが、大きな背景や大きなレイアウトの背景には適していません

アドバンテージ：

(1) Web ページの http リクエストを削減し、ページのパフォーマンスを大幅に向上させます。

(2) 写真のネーミングの問題

欠点:

(1) コンテナのサイズは、背景画像要素の位置に合わせて制限する必要があり、計算が必要です

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

1. さまざまな機能

Visibility: hidden----要素を非表示にしますが、Web ページ内でその要素が占めるべき位置を占めます。

display: none ----要素の表示を none に設定します。つまり、要素は Web ページ内のどの位置も占めません。

2. 使用後の HTML 要素の変化

Visibility:hidden、この属性を使用した後、HTML 要素 (オブジェクト) は視覚的に見えなくなる (完全に透明になる) だけであり、それが占める空間的位置は依然として存在します。つまり、高さや幅などの属性値が残ります。。

display:none を使用すると、HTML 要素 (オブジェクト) の幅、高さ、その他の属性値が「失われます」。

3. さまざまな定義

Visibility 属性は、要素が表示されるかどうかを指定します。

display 属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。

15. リンクと @import

a. 所属: リンクは HTML タグ、@import は CSS によって提供されます

　　b. 読み込みの違い: ページが読み込まれるとき、リンクも同時に読み込まれますが、@import によって導入された CSS はページが読み込まれた後に読み込まれます。　　

　　c. 互換性: リンクには互換性の問題はありませんが、@import は IE5 未満のブラウザと互換性がありません。

　　d. Link は、JS 操作 dom を通じてリンクタグを挿入してスタイルを変更できますが、@import はできません。

16. セマンティクスについてのあなたの理解を教えてください

　　コンテンツの構造に応じて適切なセマンティックタグを使用すると、コードの可読性と保守性を向上させながら、ブラウザクローラーとマシンの解析が向上します。