HTML+CSS の部分的なフロントエンドの基本的な面接の質問

1. インライン要素とブロックレベル要素? img とは何ですか? インライン要素をブロックレベル要素に変換する方法

Inline要素: および 他のすべての要素は 1 行上にあり、高さ、行の高さ、外側の余白、および内側の余白は変更できません。テキスト画像の幅は変更できません。テキストまたはその他のインライン要素のみを収容できます。ここで、imgは行要素です。
ブロックレベル要素: 常に新しい行で始まり、高さ、行の高さ、マージン、パディングはすべて制御でき、インライン要素やその他の要素に対応できます。
行要素を変換する方法ブロックレベル要素に: display: block;

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

2. 複数の要素を設定する同じ行の float をクリアする方法は何通りありますか?

複数の要素を同じ行に設定する: float、inline-block
クリア方法floats: 方法 1: 新しい要素を追加、クリアを適用: 両方;
方法 2: 親 p がオーバーフローを定義: 非表示;
方法 3: :after と :before を使用して要素内に 2 つの要素ブロックを挿入し、フロートクリアの効果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

##3. ボックス モデルのボックス サイズが奇妙ですか?フレキシブル ボックス モデル | ボックス レイアウト?

標準モードのボックス モデル: ボックスの合計幅/高さ=幅/高さのパディング境界マージン

奇妙なモードのボックス モデルの下では、ボックスの合計幅と高さにはパディングと境界線の幅が含まれます。ボックスの合計の幅/高さ = 幅/高さのマージン = コンテンツ領域の幅/高さのパディング境界マージン;
box-sizing には 2 つの値があります。1 つは content-box、もう 1 つはコンテンツ ボックスです。ボーダーボックスです。
box-sizing:content-box に設定すると、標準モードの解析と計算が使用されます。
box-sizing:border-box に設定すると、奇妙なモードの解析と計算が使用されます。

4. いくつかの CSS ハックを簡単に説明します?

(1) 画像のギャップ

p に画像を挿入すると、画像が p の下部を拡張します。 3px単位で。 hack1: e388a4556c0f65e1904146cc1a846bee と a1f02c36ba31691bcfe87b2722de723b を同じ行に書きます。ハック 2: の画像ギャップに display: block;
dt li を追加します。ハック: に display: block を追加します。
(2) デフォルトの高さ IE6 より前のバージョンでは、一部のブロック要素にはデフォルトの高さ (18px 未満) があります
hack1: 要素に font-size を追加します: 0;
hack2: ステートメント: overflow: hidden;
フォームの行の高さが一致していません
hack1: ステートメントをフォームに追加します: float: left; height: ; border: 0;
Mouse pointer
ハック: ある要素のマウスポインタを手の形に統一すると:cursor: pointer;
li の a をブロック要素に変換するとき、float を a にすると梯子の形が現れるIE
hack1: inline-block に表示を追加;
hack2: li: left に float を追加;

5. href と src? title と alt# の違いhref (ハイパーテキスト参照) Web リソース (ハイパーテキスト参照) の場所を指定します。これにより、現在の要素または現在のドキュメントと、現在の属性で定義されている必要なアンカーまたはリソースとの間のリンクまたは関係が定義されます。 link や a などの要素で使用されます。

src (ソース) 属性は、現在のドキュメント要素によって定義された位置に現在のリソースを埋め込むだけです。これはページの重要な部分であり、導入部分です。 img、script、iframe、その他の要素で使用されます。

title: html タグと html 属性の両方です。タイトルが属性として使用される場合、要素の追加の説明情報を提供するために使用されます。
alt: alt は html タグの属性です。 alt 属性は、置換テキストを指定するために使用されます。これは、img、area、および input 要素 (アプレット要素を含む) でのみ使用できます。Web ページ上の画像が表示されるときに、ユーザーが画像情報を理解できるようにテキストの説明を提供するために使用されます。正常に表示できません。

6.transform?アニメーション？違い?animation-duration

Transform: width や left と同様に、変形、回転、スケーリング、変位、遠近感などの機能を実装する要素の多くの静的スタイルを定義します。 、非常にクールな静的効果 (非アニメーション) を実現できます。

アニメーション: スタイル属性ではなく要素自体に作用します。これはキーフレーム アニメーションのカテゴリに属します。それ自体は、純粋に表現力豊かな JavaScript コードを置き換えてアニメーションを実装するために使用されます。現在のフレームの属性値は明示的に指定できます。

animation-duration: アニメーションの完了にかかる時間を秒またはミリ秒で指定します。

7.nth-of-type | nth-child?

例:
ff6d136ddc5fdfeffaf53ff6ee95f185 e388a4556c0f65e1904146cc1a846bee11194b3e26ee717c64999d7867364b1b4a3 45a2772a6b6107b401db3c9b82c049c222254bdf357c58b8a65c66d7c19c8e4d114 25edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62bed06894275b65c1ab86501b08a632eb 8e22c81817d224bf490a20f8d20d8ac93bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
li:nth-of-type(2): ul の下の 2 番目の li 要素を表します
li:nth-child(2): 両方の li 要素を表しますul の下の 2 番目の要素です (見つかりません)。
通常は、問題が発生する可能性が低い nth-of-type を使用することをお勧めします。

8. :before と ::before の違いは何ですか?

単一コロン (:) は CSS3 疑似クラスに使用され、二重コロン (:) :) は CSS3 疑似要素に使用されます。 :before など、CSS2 より前に存在した疑似要素の場合、単一コロンと二重コロン::before は同じ効果があります。

9. p を上下左右の中央に配置するにはどうすればよいですか?

回答: 方法は 3 つあります。

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 と css3.0

回答: css3 は css2 の機能を強化し、新しい属性と新しいタグを追加し、削除します 一部の冗長なタグは削減されますレイアウトに関するコードの量。以前は複雑だったレイアウトを 1 つの属性 (列などの属性) だけで解決できるようになりました。さらに多くの効果 (角丸、アニメーションなど) が追加され、ボックス モデルとリスト モジュールに改良が加えられました。ただし、CSS3 の互換性は良好ではなく、一部の高度なバージョンのブラウザのみがサポートしています。

11. フレキシブル ボックス モデル? flex|box の違い?

(1) フレキシブル ボックス レイアウト モデルを導入する目的は、アイテムをより効果的に表示する方法を提供することです。コンテナ内の要素が配置され、整列され、空白が割り当てられます。

フレキシブル ボックス レイアウト モデルは、コンテナ内のアイテムのサイズが不明な場合や動的に変化する場合でも、正常に動作します。このレイアウト モデルでは、コンテナーは、レイアウトのニーズに従って、使用可能なすべてのスペースを最適に埋めるために、コンテナーに含まれるアイテムのサイズと順序を調整します。

画面サイズやウィンドウサイズによってコンテナのサイズが変わると、コンテナに含まれるアイテムも動的に調整されます。たとえば、コンテナのサイズが大きくなると、その中に含まれるアイテムは余分な空きスペースを埋めるために引き伸ばされ、コンテナのサイズが小さくなると、アイテムがコンテナの範囲を超えないように縮小されます。 Flexbox レイアウトは方向に依存しません。

従来のレイアウト方法では、ブロック レイアウトはブロックを上から下に垂直方向に配置しますが、インライン レイアウトはブロックを水平方向に配置します。 Flexbox レイアウトには、そのような固有の方向制限がなく、開発者は自由に操作できます。

(2) flexとbox:display:boxの違いは古い規格なので、アンティークマシンを考慮したい場合は親要素のdisplay:box;属性の後に;を追加してください。 box-flex 属性を子要素に追加します。親要素の幅に応じて、子要素に一定の割合のスペースを占有させることができます。 Flex は最新であり、Dong Ji の古いマシンではサポートされていません;

親要素が display:flex を設定した後、子要素の幅は親要素の幅に応じて変更されますが、display:box は変更されます。ない。 Android UC ブラウザは、display: box 構文のみをサポートしますが、iOS UC ブラウザは両方の方法をサポートします。

12.すべてのプロパティを表示しますか?

(1)width: レイアウト ビューポートの幅を設定します。これは正の整数、または文字列 'device-width';

(2)initial-scale: 初期値を設定します。ページのスケーリング値は、小数を使用できる数値です。
(3)minimum-scale: ユーザーが許可する最小スケーリング値。これは数値であり、小数を含めることができます。
(4)maximum-scale: ユーザーが許可する最大ズーム値。数値であり、小数を含めることができます。
(5)height: レイアウト ビューポートの高さを設定します。この属性は私たちにとって重要ではなく、めったに使用されません。
(6)user-scalable: ユーザーがズームできるかどうか、値は 'いいえ」または「はい」。
Android は、ターゲット デバイスの密度レベルを表す target-densitydpi もサポートしています。その機能は、CSS の 1px が表す物理ピクセル数を決定することです。
(7) target-densitydpi: 値は、数値または高 dpi、これらの文字列のいずれか、中 dpi、低 dpi、デバイス dpi

13. HTML 構造のセマンティクスを理解するにはどうすればよいですか?

いわゆるラベル セマンティクスは、ラベルの意味を指します。セマンティクスの主な目的は、タグ (マークアップ) と属性 (属性) の目的と機能を誰もが直感的に理解できるようにすることであり、検索エンジンにとってフレンドリーです。適切な構造とセマンティクスがあれば、Web ページのコンテンツは自然に検索によってクロールされやすくなります。このアプローチは検索エンジンの検索ルールに準拠しており、Web サイトのプロモーションにかかる労力を大幅に節約でき、構造が明確で非常に読みやすいため、保守性も高くなります。これは、検索エンジン最適化 (SEO) における重要なステップでもあります。

14. 疑似クラスセレクターと疑似要素? c3 で導入された疑似クラス セレクターはありますか? c3 の擬似要素とは何ですか?

疑似クラスは 1 つのコロンで表され、疑似要素は 2 つのコロンで表されます。

擬似クラス セレクター:
状態は動的に変化するため、要素が特定の状態に達すると擬似クラス スタイルを取得する場合がありますが、状態が変化するとこのスタイルは失われます。

擬似要素セレクター:
は実際の要素に使用されるセレクターではなく、CSS で定義された擬似要素に使用されるセレクターです。

c3 で導入されました 擬似クラス セレクター:
:root() セレクター、ルート セレクターは、要素 E が配置されているドキュメントのルート要素と一致します。 HTML ドキュメントでは、ルート要素は常に 100db36a723c770d327fc0aef2ce13b1 です。 :root セレクターは 100db36a723c770d327fc0aef2ce13b1 要素と同等です。

::not() セレクターはネガティブ セレクターと呼ばれ、jQuery の :not セレクターとまったく同じで、特定の要素を除くすべての要素を選択できます。

:empty() セレクターは空を表します。コンテンツのない要素を選択するために使用されます。ここでコンテンツなしとは、スペースも含めてコンテンツがまったくないことを意味します。

: target() セレクターは、ページ上のターゲット要素のスタイルを指定するために使用されます (要素の ID はページ内のハイパーリンクとして使用されます)。このスタイルは、ユーザーがクリックした場合にのみ使用されます。ページ上のハイパーリンクであり、ターゲット要素にジャンプした後に機能します。

: first-child() セレクターは、親要素の最初の子要素である要素 E の選択を表します。簡単に理解すると、要素内の最初の子要素を選択することになりますが、これは子要素であり、子孫要素ではないことに注意してください。

:nth-child() は、要素の 1 つ以上の特定の子要素を選択します。

:nth-last-child() は、親要素の最後の子要素からカウントを開始して、特定の要素を選択します。

:nth-of-type(n) セレクターと: n 番目-child(n) セレクターは非常によく似ていますが、親要素で指定された特定の型の子要素のみをカウントする点が異なります。

:only-child は、要素がその親要素の唯一の子要素であることを意味します。

:first-line 要素のテキストの最初の行にスタイルを使用します。

:first-letter 要素内のテキストの最初の文字または最初の単語のスタイルを使用します。

:before 要素の前にコンテンツを挿入します。

:after 要素の後にコンテンツを挿入します。

c3 の疑似要素:
::first-line は、要素の最初の行を選択します。たとえば、各段落のテキストの最初の行のスタイルを変更します。
::before および: :after この 2 つは主に要素の前または後ろにコンテンツを挿入するために使用されます。これら 2 つのよく使用される「コンテンツ」は一緒に使用されます。私が見た中で最も一般的なのはフロートをクリアすることです。
::selection は次の目的で使用されます。 Web ページの閲覧時にテキストを選択するデフォルトの効果を変更します。

15.html5 の新機能と削除された要素は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

* HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスク、その他の機能の追加を目的としています。
* ドラッグ アンド ドロップ API より優れたセマンティック コンテンツ タグ (ヘッダー、ナビゲーション、フッター、余談、記事、セクション) オーディオ、ビデオ API (オーディオ、ビデオ) キャンバス API 地理位置情報) API ローカル オフライン ストレージ localStorage データの長期ストレージ、ブラウザを閉じてもデータは失われない;
sessionStorage データはブラウザを閉じた後に自動的に削除される フォーム コントロール、カレンダー、日付、時刻、電子メール、URL、検索 新しいテクノロジ Webworker、WebSocket、地理位置情報
* 削除要素 純粋に表現力豊かな要素:basefont、big、center、font、s、strike、tt、u;
ユーザビリティに悪影響を与える要素:frame、frameset、noframes;
HTML5 の新しいタグのサポート:
* IE8/IE7/IE6 は、 document.createElement メソッドによって生成されたタグをサポートします。この機能を使用して、これらのブラウザで HTML5 の新しいタグをサポートすることができます。ブラウザが新しいタグをサポートした後、タグのデフォルトのスタイルを追加する必要があります:
* もちろん、成熟したフレームワークを直接使用するのが最善の方法です。最もよく使用されるのは、html5shim フレームワーク6fc79538f41ba7309e847292db36ab30 3f1c4e4b6b16bbbd69b2ee476dc4f83a src=" http:/ /html5shim.googlecode.com/svn/trunk/html5.js"2cacc6d41bbb37262a98f745aa00fbf0 517970118d82bd6b8f12d30d0d9f6c96`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. HTTP リクエストの数を最小限に抑える
2. DNS ルックアップの数を減らす
3. ジャンプを避ける
4. キャッシュ可能な AJAX
5. コンテンツの読み込みを遅らせる
6.準備の読み込み
7. DOM 要素の数を減らす
8. ドメイン名に従ってページ コンテンツを分割する
9. iframe の数を最小限に抑える
10. 404 エラーを引き起こさないようにする
11.コンテンツ配信ネットワークを使用する
12. ファイル ヘッダーに Expires または Cache-Control を指定する 13. ファイル コンテンツを Gzip 圧縮する
14. ETag を構成する
15. できるだけ早く出力バッファを更新する
16 GET を使用して AJAX リクエストを完了します
17. スタイル シートを先頭に置きます
18, CSS 式の使用を避ける
19, 外部 JavaScript と CSS を使用します
20, JavaScript と CSS をカットします
21. @ import の代わりに 2cdf5bf648cf2f33323966d7f58a7f3f を使用します
22. フィルターの使用を避けます
23. スクリプトをページの下部に配置します
24. 重複したスクリプトを削除します

19.jquery バージョン? 1.11 互換?

Query 2.x シリーズには jQuery 1.x と同じ API がありますが、IE6、7、および 8 はサポートされなくなりました。
IE6、7、および 8 ユーザーが今後 Web サイトにアクセスしないことが確実な場合を除き、1.x バージョンを使用することをお勧めします。
jquery1.11 は 1.x バージョンに属しており、IE6、7、および 8 と互換性があるため、IE9 もサポートします。

20. ブロック レベル?業界内で？空の要素?

インライン要素: 他の要素と同じ行にあります。高さ、行の高さ、外側の余白、内側の余白は変更できません。テキスト画像の幅は変更できません。テキストのみを収容できます。または他のインライン要素
ブロックレベル要素: 常に新しい行で開始し、高さ、行の高さ、マージンとパディングを制御でき、インライン要素とその他の要素を収容できます。
空の要素: HTML 要素では、コンテンツのない HTML 要素は空要素と呼ばれます。空の要素は開始タグで閉じられます。 0c6dc11e160d3b678d68754cc175188a は終了タグのない空の要素です。

21.media 属性?画面？全て？ max-width?min-width?

media 属性は、リンクされたドキュメントが表示されるデバイスを指定します。メディア属性は、メディア タイプごとに異なるスタイルを指定するために使用されます。 Screen はコンピュータのデフォルト画面であり、all はすべてのデバイスに適用されます。max-width は最大幅を超える場合は実行されません。min-width は実行前に最小幅より大きい必要があります。

22. メタタグのname属性値は何ですか?

name 属性は主に Web ページを説明するために使用され、対応する属性値は content です。content 内のコンテンツは、主に検索エンジン ロボットが情報を検索し、情報を分類するために使用されます。
meta タグの name 属性の構文形式は、 です。
name 属性には主に次のパラメータがあります:
A. キーワード (キーワード) の説明: キーワードは、Web ページのキーワードが何であるかを検索エンジンに伝えるために使用されます。
B、説明 (Web サイト コンテンツの説明) 説明: 説明は、検索エンジンに Web サイトのメイン コンテンツを伝えるために使用されます。
C、ロボット (ロボット ガイド) 説明: ロボットは、検索ロボットにどのページが必要かを伝えるために使用されます。インデックスを付ける必要があるページとインデックスが必要ないページ。
コンテンツのパラメータには、all、none、index、noindex、follow、nofollow が含まれます。デフォルトは all です。
例: D、著者(著者)

23. モバイル ページで画像を切り取る方法は何通りありますか?

レスポンシブ レイアウト、柔軟なレイアウト表示: flex、js を使用して比率を記述および設定し、ルート要素にピクセルを設定し、単位として rem を使用します。

24. px/em/rem の違いは何ですか?通常、フォント サイズが 62.5% に設定されるのはなぜですか。

現在のオブジェクトのテキストに対する相対的なフォント サイズです。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。
1. em の値は固定されていません;
2. Em は親要素のフォント サイズを継承します。 rem を使用して要素のフォント サイズを設定する場合、それは依然として相対的なサイズですが、HTML ルート要素に対してのみ相対的なサイズになります。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものと言え、ルート要素を変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。
rem はブラウザを基準にしてスケーリングされます。 1remのデフォルト値は16pxですが、レスポンシブレイアウトではいちいちremに変換するのが面倒なのでrem
body{font-size=62.5% }にリセットします この時、1rem = 10px; 12pxの場合, それは 1.2rem .

25. sass と scss の違いは何ですか? sass は一般的にどのようにコンパイルされますか?

ファイル拡張子が異なります。Sass は拡張子として「.sass」サフィックスを使用し、SCSS は拡張子として「.scss」サフィックスを使用します。構文の書き方が異なります。Sass は、中括弧 ({}) やセミコロン (;) を使用せず、厳密なインデント構文ルールで記述されます。一方、SCSS の構文の記述は、CSS の構文の記述と非常に似ています。

26. CSSの最適化にどう対処するか？

CSS が将来のメンテナンスを確実にできるように、圧縮してパッケージ化し、画像を統合し、Hack の使用を避け、互換性の問題を解決し、略語を使用します。

27. CSS ファイルを圧縮してマージするにはどうすればよいですか? gulp ?

gulp を使用し、ホームページに gulp をグローバルにインストールします。
1. npm install --global gulp
2. 次に、gulp をローカルにインストールします。 npm install gulp --save-dev
3. プロジェクトのルート ディレクトリに gulpfile.js という名前のファイルを作成します
var gulp = require('gulp');
gulp.task('default' , function () {
//ここにデフォルトのタスク コードを入力します});
4. gulp を実行します。 (default という名前のデフォルトのタスクが実行されます。特定のタスクを個別に実行したい場合は、gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869 と入力してください)
gulp
JS 、 CSS ファイルをマージして圧縮します
Compress JS、CSS ファイルは次のコンポーネントを参照する必要があります:
gulp-minify-css: Compress css

28. コンポーネント? モジュール式プログラミング?

コンポーネント プログラミング: js css html をまとめてラップしてメソッドとエフェクトを提供します;
モジュール化: 同じ関数を抽出し、プログラミングのために 1 つの場所に保存します

#29 . 写真と文字を同一行に表示しますか?

1 CSSのpに「vertical-align:middle」属性を追加します。 ＃＃＃２ 絵と文字をそれぞれ別のｐに配置し、同じ行に表示されるように「margin」属性を使って配置します。 ＃＃＃３ 画像を背景画像として設定します。

#30. イベント バブリングを無効にする

event.stopPropagation()

31. デフォルト イベントを無効にする

#event.preventDefault()

32. a タグで訪問したアクティブなホバー リンクの正しい設定シーケンスは何ですか?

a タグのリンク、訪問、ホバー, Active には特定の順序があります

a:link a:visited a:hover

a:active

33. タグ内の href ジャンプ ページを無効にする方法または、リンク

#e.preventDefault();

href="javascript:void(0);

34 を見つけます。携帯電話では、選択した写真を処理する方法?

onselect=function() {

return false

}

35. いくつかの属性メソッドが発生します。ビデオタグ

src: ビデオポスターのURL: ビデオカバー、再生中に画像が表示されない プリロード: プリロード中 autoplay: 自動再生 ループ: ループ再生コントロール: ブラウザ独自のコントロールバー幅: ビデオ幅の高さ: ビデオの高さ

36. 一般的なビデオ エンコード形式はいくつありますか?ビデオ形式はいくつありますか?

ビデオ形式: MPEG-1、MPEG-2、およびMPEG4、AVI、RM、ASF、および WMV 形式

ビデオ エンコード形式: H.264、MPEG-4、MPEG-2、WMA-HD、および VC-1

37.canvas label 幅と高さを設定することと、スタイルで幅と高さを設定することの違いは何ですか?

キャンバス タグの幅と高さは、キャンバスの実際の幅と高さであり、この上にグラフィックスが描画されます そしてスタイルの幅と高さ Height はブラウザでレンダリングしたときのキャンバスの高さと幅です キャンバスの幅と高さが指定されていない場合、または値が間違っている場合は、

38.border-image?box -sizing?

Border-image : グラフィカルボーダー

Box-sizing : プロパティを使用すると、特定の領域に一致する特定の要素を特定の方法で定義できます。

構文: box-sizing: content-box | border-boxContent-box: パディングとボーダーは、定義された幅と高さに含まれません。オブジェクトの実際の幅は、設定された幅値、ボーダー、およびパディングの合計に等しくなります (要素の幅 = ボーダー パディングの幅)。このプロパティは、標準モードではボックス モデルとして動作します。 : パディングとボーダーは幅と高さの範囲内で定義に含まれます。オブジェクトの実際の幅は、設定された幅の値と同じです。ボーダーとパディングが定義されていても、オブジェクトの実際の幅は変更されません。つまり、(要素の幅 = 幅)。この属性は、次のボックス モデルのように動作します。変なモード。

39. 段階的な強化と正常な劣化

段階的な機能強化: 低バージョンのブラウザ用のページを構築して最も基本的な機能を確保し、エフェクトやインタラクションを改善し、高度なブラウザ用の機能を追加して、より良いユーザー エクスペリエンスを実現します。
グレースフル デグラデーション: 最初から完全な機能を構築し、それから下位バージョンのブラウザーと互換性を持たせます。
違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を減らそうとするのに対し、プログレッシブ エンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために拡張し続けます。
劣化（機能の衰退）は過去を振り返ることを意味しますが、漸進的な強化はその基盤を安全領域に置きながら将来を見据えることを意味します。
「エレガントなダウングレード」の観点
「グレースフル ダウングレード」の観点では、Web サイトは最も高度で完全なブラウザー向けに設計されるべきであると考えられます。 「古い」とみなされるブラウザ、または機能が欠落しているブラウザのテストは開発サイクルの最終段階で行われ、テスト対象は主流ブラウザ (IE、Mozilla など) の前のバージョンに限定されます。
この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられます。特定のブラウザに合わせていくつかの小さな調整を行うことができます。ただし、それらは私たちの注意の焦点では​​ないため、大きなバグの修正を除いて、その他の違いは無視されます。
「プログレッシブ エンハンスメント」の観点
「プログレッシブ エンハンスメント」の観点では、コンテンツ自体に焦点を当てる必要があると考えています。
コンテンツは、Web サイトを構築する動機です。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、「プログレッシブ エンハンスメント」がより合理的な設計パラダイムになります。だからこそ、これは Yahoo! によってすぐに採用され、「段階的ブラウザ サポート」戦略の構築に使用されました。
それでは質問が来ます。現在、プロダクト マネージャーは、IE6、7、および 8 の Web ページ効果は、より高いバージョンの最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要である (画像の背景を使用し、CSS3 を放棄する) ことに気付きました。彼を説得しますか？

40. IE の下位バージョンにおける c3 の奇妙なボックス モデルと奇妙なボックス モデルとフレキシブル ボックス モデルについて説明してください?

IE パディング ボーダーの値が幅または高さより小さい:
ボックス モデルの幅 = マージン (左右) 幅 (幅にはパディングとボーダーの値がすでに含まれています)
ボックス モデルの高さ = マージン (上と右) down) height (heightにはすでにpaddingとborderの値が含まれています)
padding borderの値がwidthまたはheightより大きい場合:
ボックスモデルの幅 = margin(左右)のpadding(左と右) ボーダー (左と右)
ボックス モデルの高さ = マージン (上下) パディング (上下) ボーダー (上と下) 19 ピクセル (さらにデフォルトの行の高さ 19 ピクセル)パディング境界と幅または高さの比率のいずれか大きい方と同等です。
上記の DOCTYPE はすべて標準のドキュメント タイプです。DOCTYPE を完全に定義するためにどのモードが使用されても、標準モードがトリガーされます。DOCTYPE が欠落している場合、ie6 では奇妙なモード (quirks モード) がトリガーされます。 ie7 および ie8 CSS3box -sizing には 2 つの値があり、1 つは content-box で、もう 1 つは border-box です。
box-sizing:content-box に設定すると、分析と計算に標準モードが使用され、これがデフォルト モードでもあります。
box-sizing:border-box に設定すると、奇妙なモードが使用されます。
Css3 フレックスボックス モデルでは、新しいボックス モデルであるフレックスボックス モデルが導入されており、ボックスが他のボックスにどのように分散されるか、および利用可能なスペースがどのように扱われるかを決定します。このモデルを使用すると、ブラウザ ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。

41.アニメーション対応属性

記述方法:アニメーション:名前durationtiming-function遅延iteration-countdirection;
以下は対応する属性の紹介です。属性
animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します。
animation-duration は、アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。
animation-timing-function アニメーションのスピードカーブを指定します。
animation-delay アニメーションが開始されるまでの遅延を指定します。
animation-iteration-count アニメーションを再生する回数を指定します。
animation-direction アニメーションを逆方向に順番に再生するかどうかを指定します。

42.transition?

css トランジションを使用すると、css 属性値を一定の時間間隔内でスムーズに遷移させることができます。この効果は、マウスのクリック、フォーカス、クリックされること、または要素への変更によってトリガーされ、アニメーション効果で CSS プロパティ値を滑らかに変更します。移動、拡大縮小、拡大縮小などの 2D 変換を実行する変換との違いに注意してください。要素を近づいて、回転し、引き伸ばします。

43.h5 の新機能?

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器  多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：CSS视频教程

以上がHTML+CSS の部分的なフロントエンドの基本的な面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。