列を作成します。ボーダー付き 等しい高さのレイアウト: これを行うには、ボーダー左を使用します。使用できるのは 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 コードを
