ゴールド、スリー、シルバー、フォーの採用シーズン、職場の新人もベテランも、フロントエンドエンジニアの面接で面接官から何を聞かれ、どう答えたらいいかわからず困っていませんか？面接官に気に入られ、スムーズに面接を通過し、大きな工場に飛び込み、人生の頂点に到達するために、フロントエンドの面接をいくつか整理しました。面接でも勉強でも仕事でも！
01. CSS3の新機能
ボックスの影: (ボックスの影);
境界線: 角を丸くした境界線 (border-radius)、境界線の背景画像 (border-image);
IE (奇妙な) ボックス モデル: (box-sizing: border-box);
背景: 背景画像のサイズ (background-size)、位置に対する指定された背景画像の位置 (background-origin)、および背景の描画領域 (background-clip)。
弾性レイアウト: フレックス;
グラデーション: 線形グラデーション (線形グラデーション)、放射状グラデーション (放射状グラデーション);
トランジション効果: トランジション;
2D 変換: 変換: 移動 平行移動(x, y)、回転 回転(x, y)、反転 傾斜(x, y)、ズーム スケール(x, y);
3D 変換: translate3d(tx, ty, tz)、rotate3d(x, y, z, a)、scale3d(sx, sy, sz)、perspective(l) など。
カスタム アニメーション:アニメーション;
メディアのお問い合わせ: @media.
02.H5の新機能
セマンティック タグの追加: ヘッダー、ナビゲーション、記事、セクション、脇、フッター。
新しいデータ ストレージ メソッド: sessionStorage、localStorage;
ビデオ ビデオ タグとオーディオ オーディオ タグを追加します。
ペイント キャンバスと svg 要素を追加します。
新しい入力タグのタイプ属性タイプ: 日付、時刻、月、電子メール、URL、検索、範囲、色、数値。
フォーム入力要素の検証を追加: 必須、パターン。
ユーザーの地理的位置を取得するための API が追加されました: Geolocation。
03. ボックスモデルを簡単に説明してください
ボックス モデルには、標準ボックス モデル (W3C ボックス モデル) と奇妙なボックス モデル (IE ボックス モデル) の 2 種類があります。
ボックス モデルは、margin (外側のマージン) + border (ボーダー) + padding (内側のマージン) + content (コンテンツ) で構成されます。
標準的なボックス モデルの幅は、コンテンツ コンテンツの幅を指し、高さはコンテンツ コンテンツの高さを指し、奇妙なボックス モデル (IE ボックス モデル) の幅は、コンテンツ (コンテンツ) + パディング (内側) を指します。 margin) + border (ボーダー) ) 合計の幅、高さは同じです。
奇妙なモード (IE ボックス モデル) は、IE ブラウザーの IE6、IE7、および IE8 バージョンでトリガーされ、W3C 標準モードは他のブラウザーの既定値です。標準 (W3C) ボックス モデルの CSS プロパティは box-sizing: content-box であり、奇妙な (IE) ボックス モデルの CSS プロパティは box-sizing: border-box です。
04. リンクタグとインポートの違い
link は html タグに属し、css ファイルをロードでき、RSS や rel 接続属性なども定義でき、@import はスタイルをインポートする機能を持つ css によって提供されます。
ページが読み込まれると同時にリンクが読み込まれ、@import で参照される css はページが読み込まれるまで待機します。
linkはhtmlタグなので互換性はなく、@importはIE5以上でしか認識できません。
リンク スタイル スタイルは、@import スタイルよりも重みが高くなります。
リンクは js を使用して動的に作成およびインポートできますが、@import はできません。
05. 水平・垂直センタリングの実現方法
CSS で要素の水平方向および垂直方向のセンタリングを実現するためのいくつかの方法の要約。常にあなたに合った方法があります!
06. CSS での BFC
07. ブロック要素と行要素の違い
インライン要素は 1 行に表示されます. この行の残りのスペースが現在のインライン要素を運ぶことができない場合, インライン要素は新しい行に表示されます. 各要素は水平に配置されます. 各ブロックレベル要素は 1 行を占めます.要素が縦に配置されます。
ブロック レベルの要素には、インライン要素とブロック レベルの要素を含めることができ、既定の幅は 100% で、ブラウザーと同じ幅です。インライン要素にブロック レベルの要素を含めることはできません。
インライン要素とブロック レベル要素の属性の違いは、主にボックス モデルの属性にあります。
一般的なブロック要素には、div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、header、section、article、footer などがあります。
一般的な行要素とインライン ブロック要素には、span、img、a、label、input、em、i、textarea、select、strong などがあります。
ブロック要素に変換: display: block;
線要素に変換: 表示: インライン;
インライン ブロック要素に変換します: display: inline-block。
08. 高度に崩壊しクリアなフローティング
高崩壊:
標準ドキュメントフローでは、親要素の高さが設定されていない場合、親要素の高さが子要素によって拡張されます.子要素の高さは親要素の高さになります.ただし、子要素の場合float に設定すると、子要素が分離されます。標準ドキュメント フローでは、位置がなくなり、親要素の高さが 0 になります。この現象は、高さの崩壊と呼ばれます。
高さの崩壊のほとんどは、子要素がオフラベルで位置を占めていないために、親要素の高さが失われることによって引き起こされます. 通常、高さの崩壊は、子要素がフロートした後に発生します. したがって、フロートをクリアすることで解決できます。
フロートをクリアする方法:
フローティング要素は標準のドキュメント フローを離れ、標準のドキュメント フローを離れる要素はドキュメント フロー内の位置を占有しません。
浮動要素の親要素の高さを設定し、
親要素に overflow: hidden 属性を設定し、
親要素の末尾にブロック レベル要素の空のタグを追加し、この空のタグの両方に clear: を設定します。 ;
単一の疑似要素:
.clearfix::after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
zoom: 1;
}
二重疑似要素 (推奨):
.clearfix::before, .clearfix::after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
zoom: 1;
}
09. 位置の属性と機能
位置属性は、通常、「左」、「上」、「右」、および「下」属性と組み合わせて使用されます。
相対的な配置相対: 要素が相対的に配置されている場合は、その場所に表示されます。次に、垂直位置または水平位置を設定することにより、この要素を原点に対して「相対的に」移動させることができます。相対配置を使用する場合、要素が移動されるかどうかにかかわらず、要素は引き続き元のスペースを占有します。したがって、要素を移動すると、他の要素が覆われます。
絶対配置絶対: 絶対配置された要素の位置は、最も近くに配置された親要素に対して相対的です。または、要素に配置された親要素がない場合、その位置はそれに対して相対的です。絶対配置では、要素の位置がドキュメント フローから独立しているため、スペースを占有しません。絶対配置要素は他の要素と重なっています。
固定位置固定: 要素の位置はブラウザ ウィンドウに対して固定されており、ウィンドウがスクロールされても移動しません。固定配置では、要素の位置がドキュメント フローから独立しているため、スペースを占有しません。固定配置要素は他の要素と重なっています。
スティッキー ポジショニング スティッキー: 要素は最初に通常のドキュメント フローに従って配置され、次に要素のフロー ルート (BFC) およびフロー内の包含ブロック (最も近いブロック レベルの祖先要素) に対して相対的に配置されます。要素の配置は、特定のしきい値を超えるまでは相対配置として表示され、その後は固定配置として表示されます。
デフォルトの配置静的: デフォルト値。配置しない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index の宣言は無視されます)。
inherit: position 属性の値を親要素から継承する必要があることを指定します。
10.要素を非表示にする方法
透明度を 0 に設定: 不透明度: 0;
要素の表示をなしに設定: 表示: なし (Web ページ内の位置を占有しない);
要素を非表示: 可視性: 非表示 (依然として Web ページ内の位置を占有);
要素を 0 に縮小します: transform: scale (0);
要素のレベルを設定します: z-index: 9999、要素は position: absolute を設定する必要があります。
11. CSS リセットの役割
さまざまなブランドのブラウザーの既定のスタイルが使用されていないため、ブラウザーの既定の css プロパティをリセットします。css リセットを使用してリセットし、各ブラウザーのスタイルが統一されるようにします。
12. cssスプライトの役割 (css sprites)
CSS スプライトは、実際には、Web ページの背景画像を画像ファイルに統合することで、ページに含まれる散発的な画像をすべて大きな画像に含めることができるため、ページにアクセスしたときにインポートされた画像が読み込まれません。以前のように 1 枚ずつゆっくりと表示されるため、サーバーからの画像のリクエスト数が減少します。原則として、背景の配置には CSS の background-image、background-repeat、background-position の組み合わせを使用します. background-position は、数値を使用して背景画像の位置を正確に特定できます.
13. CSS のセレクターと優先順位
主なセレクターは、id、クラス、ラベル、疑似要素、疑似クラス、属性選択、ワイルドカード、継承などです。
複数のスタイルが同じ要素によって参照されている場合、後のスタイル属性が優先されます。
スタイル セレクターのタイプが異なる場合、優先順位は次のとおりです。id セレクター > クラス セレクター > ラベル セレクター。
タグ間に階層的な包含関係がある場合、子孫要素は祖先要素のスタイルを継承します。子孫要素が祖先要素と同じスタイルを定義する場合、祖先要素の同じスタイル属性がオーバーライドされます。継承されたスタイルの優先度は低く、少なくともラベル セレクターよりも低くなります。
!important でマークされたスタイル属性が最も優先されます。
スタイルシートのソースが異なる場合の優先順位は、インラインスタイル > 内部スタイル > 外部スタイル > ブラウザユーザー
カスタム スタイル > ブラウザのデフォルト スタイル。
優先順位：！重要 > インライン スタイル > id > クラス > ラベル/疑似クラス/属性の選択 > 疑似要素 > 継承 > ワイルドカード
14.トランジションとアニメーションの違い
transition はトランジション効果であり、開始状態と終了状態の 2 つの状態しかなく、主にスタイル値の変更プロセスを強調し、中間状態を設定することはできず、特定のイベントによってトリガーされる必要があります (たとえば、 : マウスパス、クリックなど)。
アニメーションは、キー フレームとも呼ばれるアニメーションです。複数のキー フレームを設定できます。状態は任意の中間フレームに設定できます。付加されたイベントのトリガーなしで自動的に実行できます。
15. CSS は iPhone のデフォルトのボタン スタイルを削除します
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
16. Doctype の役割
DOCTYPE タグは、標準の一般マークアップ言語のドキュメント タイプ宣言です。その目的は、標準の一般マークアップ言語パーサーに、ドキュメントの解析に使用する必要があるドキュメント タイプ定義 (DTD) の種類を伝えることです。正しいドキュメント タイプが決定された場合にのみ、HTML または eXtensible HTML のタグとカスケード スタイル シートが有効になり、JavaScript スクリプトも影響を受ける可能性があります。
タグの完全な形式は <!DOCTYPE> です。
17. 厳密モードと混合モードの違い
標準モードは、ブラウザが W3C 標準に従ってドキュメントを解析およびレンダリングすることを意味し、変則モード ブラウザは、古い非標準実装に従ってドキュメントを解析およびレンダリングすることを意味します。解析時にブラウザーが標準モードを使用するか変則モードを使用するかは、Web ページのドキュメント タイプ定義 (DTD) ステートメントに直接関係します. ドキュメント タイプ定義 (DTD) ステートメントは、標準ドキュメント (標準モード解析) ドキュメント タイプのタイプを定義します。これにより、ブラウザは対応するメソッドを使用して Web ページをロードおよび表示し、ドキュメント タイプ定義 (DTD) ステートメントを無視します。これにより、Web ページは奇妙なモードになります。
なぜこの2つのパターンが生じるのでしょうか?
最新のブラウザーには、通常、標準モードと互換モードの 2 つのレンダリング モードがあります。標準モードでは、ブラウザーは HTML および CSS 標準に従ってドキュメントを解析およびレンダリングしますが、奇妙なモードでは、ブラウザーは古い非標準実装に従ってドキュメントを解析およびレンダリングします。古いウェブページを正常に表示するための奇妙なモードを開始します。
厳密モードをトリガーするには:
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
無差別モードのトリガー
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
18. 両面余白が重なる問題（外余白のつぶれ）
複数の隣接する (兄弟または親子) ノーマル フローのブロック要素の垂直方向のマージンが重なります。
折り畳みの結果は次のとおりです。
隣接する 2 つのマージンが両方とも正の場合、折りたたまれた結果はそれらの間の大きい方の値になります。
隣接する 2 つのマージンが両方とも負の場合、折り畳み結果は 2 つの絶対値の大きい方の値になります。
2 つのマージンが正と負の場合、折り畳み結果は 2 つの合計になります。
19.要素モードがインラインブロックに変換された後、ギャップをクリアします
要素のモードがインライン ブロックに変換された後、インライン ブロック要素間にギャップが生じます。これは多くの場合、コード ラッピングによって引き起こされます。
親要素に font-size:0 を設定する; インライン ブロック要素の font-size サイズをリセットする (推奨);
インライン ブロック要素に左マージンまたは右マージンを設定し、値を負の値に設定する;
display を使用する:table; および display:table-cell; 属性を display:inline-block の代わりに使用する;
親要素に display:flex; 属性を設定する (推奨);
インライン ブロック間の改行を手動で削除する.
20. rgba() の透過効果と不透明度の違い
rgba() と opacity はどちらも透明度を実現できますが、最大の違いは、不透明度が要素と要素内のすべてのコンテンツの透明度に作用するのに対し、rgba() は要素の色またはその背景色にのみ作用することです。(rgba 透明度を設定する要素の子要素は、透明度効果を継承しません!)
要約する
読んでくれてありがとう！この記事は最初にここに要約されています. html+css, js, es6, vue などのトピックを含む web フロントエンドのインタビューは、近いうちに更新されます. これらのフロントエンドの知識があなたのインタビューや改善に役立つことを願っています.仕事と勉強。さらに記事を読みたい場合は、wxgzh [Front-end Nonsense] のメニュー バー [High Quality Articles]に移動して、視聴して読むことができます。