フロントエンド インタビューのハイライト -- CSS_html/css_WEB-ITnose

三、CSS篇

3.1、谈谈你对CSS布局的理解

 

3.2、请列举几种可以清除浮动的方法（至少两种）

浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。

a. 添加额外标签，例如

b. br タグとその独自の HTML 属性 (

など) を使用します。IE6 では、親要素で hasLayout もトリガーする必要があります。親要素は、overflow: auto 属性を設定します。同様に、IE6 は、float

f を設定します。 IE6 ～ 7 では :after がサポートされていないため、:after 疑似要素を使用して、hasLayout をトリガーします。

CSS2.1 には、ブロック フォーマット コンテキスト (略して BFC) という非常に重要な概念があります。

BFC を作成する要素は独立したボックスです。同時に、BFC はドキュメント内の通常のフローに属します。

IE6〜7の表示エンジンは、レイアウトと呼ばれる内部概念を使用します。

「あの頃一緒にクリアしたフロート」を参照してください

3.3. 要素を非表示にする方法をいくつか挙げてください

a. この属性は要素を非表示にしますが、要素が占有するスペースはそのままです。存在します。

b. 不透明度: 0; CSS3 プロパティを 0 に設定すると、要素が完全に透明になり、可視性と同じ効果が得られます。可視性と比較して、遷移してアニメーション化することができます

c.position:Absolute; 要素をドキュメント フローの外に、表示領域内に要素を配置するための大きな左の負の値を設定します。外。

d. 表示: なし; 要素は非表示になり、ドキュメント内のスペースを占有しなくなります。

e. 変換:scale(0); 要素をinfinitesimalに設定すると、要素は非表示になります。要素の元の位置は保持されます。

f. hidden 属性は、display:none; と同じ効果を持ちます。この属性は、要素

のステータスを記録するために使用されます。縦方向、要素を非表示にします。この手法は、要素に境界線が表示されない限り、正常に機能します。

h. filter: Blur(0); 要素のぼかしを 0 に設定し、それによって要素がページから「消える」ようにします。

「CSS を使用して HTML 要素を非表示にする 4 つの一般的な方法」「HTML と CSS を使用して要素を非表示および表示する 4 つの方法」を参照してください。

3.4. テキストの段落内のすべての英単語の最初の文字を大文字にする方法

text-transform:

none | Capitalize (各単語の最初の文字を大文字に変換) | 小文字 (各単語を小文字に変換)

3.5 、CSS について簡単に説明してください。スタイルシートの継承

CSS スタイルシートの継承とは、特定の CSS プロパティが子孫要素に受け継がれるという事実を指します。継承される属性は以下の通りです。 『CSSスタイルシート継承 詳細解説』を参照

テキスト関連：font-family、font-size、font-style、font-variant、font-weight、font、letter- spacing、line-height、color

リスト関連: list-style-image、list-style-position、list-style-type、list-style

3.6 CSS セレクターについて簡単に説明してください

要素セレクター: *、E、E#id、E.class

関係セレクター: E、F、E>F、E+F、E~F

属性セレクター: E[att]、E[att="val"]、 E [att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

疑似クラスセレクター: E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、 E :last-chil など

疑似オブジェクトセレクター: E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、 E:after /E::after, E::selection

「セレクターリスト」を参照

3.7. CSS 疑似クラスと CSS 疑似オブジェクトの違い

CSS では、疑似クラスと CSS の概念が導入されています。 CSS では記述できない既存のものを記述するための疑似要素

根本的な違いは、新しい要素 (抽象化) を作成するかどうかです

疑似クラス: 元々は一部の要素の動的な状態を表すために使用されていましたが、CSS2 標準によってその概念が拡張されました論理的に存在するが、ドキュメント ツリー内で識別する必要がないすべての「ゴースト」カテゴリ

擬似オブジェクト: このサブ要素は論理的には存在しますが、実際には存在しません。

「CSS 疑似クラスと CSS 疑似要素の違いと由来」を参照

3.8 の CSS のウェイトルールを簡単に説明してください

インラインスタイル +1000、ID +100、および属性セレクター /class class/ 擬似クラス セレクターの場合は +10、要素名/擬似オブジェクト セレクターの場合は +1。

関係セレクターは、計算前に 2 つのセレクターに分割されます。 「CSS Weight」

3.9 を参照して、さまざまな等高さのレイアウトを作成してください

a. 偽の等高さの列: 背景画像を使用し、この背景画像を列の親要素に使用してレイアウトします。 Y 軸なので、同じ高さの列の錯覚を実現します

b. コンテナ div に別の背景色を使用します (固定レイアウト):

要素の最大の高さを使用して、他の

列を作成します。ボーダー付き 等しい高さのレイアウト: これを行うには、ボーダー左を使用します。使用できるのは 2 列のみです。

d. 正のパディングと負のマージン ヘッジを使用して、複数列のレイアウト方法を実装します。すべての列で正の上部と下部のパディングと負の上部と下部のマージンを使用し、すべての列の外側にコンテナを追加して、overflow:hiden を設定します。オーバーフロー背景

e. 境界線と配置を使用して列の高さをシミュレートします: ただし、複数の列では使用できません

f. テーブル レイアウトの同じ高さの列効果をシミュレートします: 互換性が低く、ie6-7 では適切に実行できません

3.10 . px と em は CSS スタイルでよく使用されますが、それぞれのメリットとデメリットは何ですか?

px は、モニター画面の解像度に対する相対的な長さの単位です。

em は、現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位です。

pxで定義されたフォントはブラウザのフォント拡大機能では使用できません。

em の値は固定ではなく、親要素のフォント サイズを継承します。 1 ÷ 親要素のフォント サイズ × 変換されるピクセル値 = em の値。

3.11. CSS のリンクと @import の違いは何ですか?

a. リンクは HTML タグですが、@import は CSS によって提供され、CSS のみをロードできます

b. ページがロードされると、リンクも同時にロードされ、@import によって参照される CSS が待機します。ページが読み込まれるまで

c. import は IE5 以降でのみ認識され、リンクは HTML タグであるため、互換性の問題はありません

d. @import

e. Javascript を使用して DOM を制御してスタイルを変更する場合、@import は制御できる DOM ではなく CSS のみを参照するため、リンク メソッドのみを使用できます。絶対位置と固定位置の類似点と相違点

同じ:

a. インライン要素メソッドの表示を変更し、表示をブロックするように設定します

b. 要素を通常のフローから切り離し、スペースを占有しないようにします

c. デフォルトでは、位置決めされていない要素をカバーします

違い:

Absolute の「ルート要素」は設定可能であり、fixed の「ルート要素」はブラウザ ウィンドウに固定されます。

Web ページをスクロールすると、固定要素とブラウザ ウィンドウの間の距離は一定のままです。

3.13. 位置の値、相対と絶対は誰に対して相対的に位置しますか?

absolute: 静的配置以外の最初の祖先要素を基準にして絶対配置の要素を生成します。

fixed: ブラウザ ウィンドウを基準にして絶対配置の要素を生成します。 (IE6 ではサポートされていません)

relative: 通常のフロー内の位置を基準にして、相対的に配置された要素を生成します。

static: デフォルト値。位置決めはなく、要素は通常のフローで表示されます

3.14 の新機能は何ですか?

CSS3 は、丸い角 (border-radius)、影 (box-shadow)、テキストの特殊効果 (text-shadow)、線形グラデーション (gradient)、変換 (transform) を実装します

CSS セレクターをさらに追加しました 背景 rgba、 CSS3で導入された擬似要素は::selection、メディアクエリ、マルチカラムレイアウトのみです

「CSS3のアニメーション効果レコード」「CSS3のborder-radius、box-shadow、gradient」を参照 》

3.15 . なぜ CSS スタイルを初期化する必要があるのでしょうか?

ブラウザの互換性の問題により、CSSが初期化されていない場合、ブラウザごとに一部のタグのデフォルト値が異なり、ブラウザ間でページの表示に差異が発生することがよくあります。

もちろん、初期化スタイルは SEO に一定の影響を与えますが、ケーキを持って食べることはできませんが、影響を最小限に抑えて初期化するようにしてください。

3.16. CSS スプライトの原理、メリット、デメリットを説明します

CSS スプライトは実際に Web ページの背景画像を画像ファイルに統合します。

CSS "background-image"、"background-repeat" を再利用する

background-position は、数値を使用して背景画像を正確に配置するために、「background-position」の組み合わせが使用されます。

利点:

a. Web ページの http リクエストを削減します

b. 画像のバイト数を削減します

c. 画像のコレクションに名前を付けるだけです。それぞれの小さな要素に名前を付けます

d. スタイルを変更するのは簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。

短所:

a. ワイドスクリーンや高解像度の画面のアダプティブ ページでは、写真の幅が十分でない場合、背景が壊れやすくなります

b. CSS スプライトを開発する場合は、Photoshop またはその他 このツールは各背景ユニットの正確な位置を測定して計算します

c. ページの背景がわずかに変更されると、通常は結合された画像を変更する必要があります

。

3.17. フロートとその動作原理を説明しますか?

a. フローティング要素はドキュメント フローから切り離され、スペースを占有しません (「高さの崩壊」現象が発生します)

b. フローティング要素は、それを含む境界線またはフローティング要素の境界線に遭遇すると停止します。

3.18. 浮動要素によって引き起こされる問題

a. 親要素の高さを拡張することはできず、親要素と同じレベルの要素に影響します

b.フローティング要素がそれに続きます

c. 最初の要素がフローティングでない場合は、その前の要素もフローティングにする必要があります。そうしないと、ページ表示の構造に影響します

3.19. FOUC (スタイルなしのフラッシュ) とは何ですか。コンテンツ）？どうすればFOUCを回避できるのでしょうか？

インポートメソッドを使用して CSS をインポートすると、一部のページで Windows の IE で奇妙な現象が発生します。

ページのコンテンツがスタイルなしで一瞬点滅します。この現象は、ドキュメント スタイルの一時的な失敗 (スタイルのないコンテンツのフラッシュ) と呼ばれます。 ）、FOUCと呼ばれます。

原則: スタイル シートが構造 HTML よりも後に読み込まれる場合、このスタイル シートが読み込まれると、ページは前のレンダリングを停止します。このスタイル シートがダウンロードされて解析された後、ページが再レンダリングされ、その結果、画面が短時間ぼやける現象が発生します。

回避策: LINK タグを使用して、スタイルシートをドキュメントの HEAD に配置します。

3.20 と line-height の 3 つの割り当て方法の違いは何ですか? (単位付き、純粋な数値、パーセンテージ)

単位付き: px を計算する必要はありません。em は、要素がその親要素のフォント サイズの値を参照として使用して、独自の行の高さを計算します

純粋な数値: パス子孫への割合。たとえば、親要素の行の高さが 1.5、子要素のフォントが 18px の場合、子要素の行の高さは 1.5*18=27px になります

パーセンテージ: 計算された値を子孫に渡します

「理解」を参照してください行の高さの「浅い」行の高さと垂直の分析」では、オンライン ソース コードを表示します。

3.21. :link、:visited、:hover、:active の実行順序は何ですか?

L-V-H-A、l(link)ov(visited)e h(hover)a(active)te、これは like と hat の 2 つの単語で要約できます

3.22. よく遭遇するブラウザの互換性は何ですか?の解き方？

a. ブラウザのデフォルトのマージンとパディングが異なります

b. IE6 と IE7 では、要素の高さが自己設定の高さを超えます。その理由は、IE8 より前のブラウザでは要素のデフォルトの行の高さが設定されるためです

d。min-height は IE6

e では機能せず、透明度については IE は filter:Alpha(Opacity=60) を使用し、他の主流ブラウザは不透明度を使用します。 :0.6

f. 入力境界線の問題。通常、入力境界線を削除するには border:none; を使用しますが、入力スタイルを解析するときの IE6 のバグ (優先度の問題) のため、IE6

3.23 では無効です。 DOM の CSS スタイルを設定する方法はありますか?

a. 外部スタイル シート: タグを通じて外部 CSS ファイルを導入します

b. CSS コードを