三、CSS篇
浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。
a. 添加额外标签，例如
b. br タグとその独自の HTML 属性 (
f を設定します。 IE6 ～ 7 では :after がサポートされていないため、:after 疑似要素を使用して、hasLayout をトリガーします。
CSS2.1 には、ブロック フォーマット コンテキスト (略して BFC) という非常に重要な概念があります。
BFC を作成する要素は独立したボックスです。同時に、BFC はドキュメント内の通常のフローに属します。
IE6〜7の表示エンジンは、レイアウトと呼ばれる内部概念を使用します。
「あの頃一緒にクリアしたフロート」を参照してください
3.3. 要素を非表示にする方法をいくつか挙げてください
a. この属性は要素を非表示にしますが、要素が占有するスペースはそのままです。存在します。
b. 不透明度: 0; CSS3 プロパティを 0 に設定すると、要素が完全に透明になり、可視性と同じ効果が得られます。可視性と比較して、遷移してアニメーション化することができます
c.position:Absolute; 要素をドキュメント フローの外に、表示領域内に要素を配置するための大きな左の負の値を設定します。外。
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 について簡単に説明してください。スタイルシートの継承
テキスト関連：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
要素セレクター: *、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 など
「セレクターリスト」を参照
3.7. CSS 疑似クラスと CSS 疑似オブジェクトの違い
CSS では、疑似クラスと CSS の概念が導入されています。 CSS では記述できない既存のものを記述するための疑似要素
根本的な違いは、新しい要素 (抽象化) を作成するかどうかです
疑似クラス: 元々は一部の要素の動的な状態を表すために使用されていましたが、CSS2 標準によってその概念が拡張されました論理的に存在するが、ドキュメント ツリー内で識別する必要がないすべての「ゴースト」カテゴリ
擬似オブジェクト: このサブ要素は論理的には存在しますが、実際には存在しません。
3.8 の CSS のウェイトルールを簡単に説明してください
インラインスタイル +1000、ID +100、および属性セレクター /class class/ 擬似クラス セレクターの場合は +10、要素名/擬似オブジェクト セレクターの場合は +1。
関係セレクターは、計算前に 2 つのセレクターに分割されます。 「CSS Weight」
3.9 を参照して、さまざまな等高さのレイアウトを作成してください
b. コンテナ div に別の背景色を使用します (固定レイアウト):
d. 正のパディングと負のマージン ヘッジを使用して、複数列のレイアウト方法を実装します。すべての列で正の上部と下部のパディングと負の上部と下部のマージンを使用し、すべての列の外側にコンテナを追加して、overflow:hiden を設定します。オーバーフロー背景
e. 境界線と配置を使用して列の高さをシミュレートします: ただし、複数の列では使用できません
f. テーブル レイアウトの同じ高さの列効果をシミュレートします: 互換性が低く、ie6-7 では適切に実行できません
3.10 . px と em は CSS スタイルでよく使用されますが、それぞれのメリットとデメリットは何ですか?
em は、現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位です。
pxで定義されたフォントはブラウザのフォント拡大機能では使用できません。
em の値は固定ではなく、親要素のフォント サイズを継承します。 1 ÷ 親要素のフォント サイズ × 変換されるピクセル値 = em の値。
3.11. CSS のリンクと @import の違いは何ですか?
c. import は IE5 以降でのみ認識され、リンクは HTML タグであるため、互換性の問題はありません
d. @import
e. Javascript を使用して DOM を制御してスタイルを変更する場合、@import は制御できる DOM ではなく CSS のみを参照するため、リンク メソッドのみを使用できます。絶対位置と固定位置の類似点と相違点
同じ:
a. インライン要素メソッドの表示を変更し、表示をブロックするように設定します
b. 要素を通常のフローから切り離し、スペースを占有しないようにします
違い:
Absolute の「ルート要素」は設定可能であり、fixed の「ルート要素」はブラウザ ウィンドウに固定されます。
Web ページをスクロールすると、固定要素とブラウザ ウィンドウの間の距離は一定のままです。
3.13. 位置の値、相対と絶対は誰に対して相対的に位置しますか?
absolute: 静的配置以外の最初の祖先要素を基準にして絶対配置の要素を生成します。
fixed: ブラウザ ウィンドウを基準にして絶対配置の要素を生成します。 (IE6 ではサポートされていません)
relative: 通常のフロー内の位置を基準にして、相対的に配置された要素を生成します。
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 に一定の影響を与えますが、ケーキを持って食べることはできませんが、影響を最小限に抑えて初期化するようにしてください。
CSS スプライトは実際に Web ページの背景画像を画像ファイルに統合します。
CSS "background-image"、"background-repeat" を再利用する
background-position は、数値を使用して背景画像を正確に配置するために、「background-position」の組み合わせが使用されます。
a. Web ページの http リクエストを削減します
b. 画像のバイト数を削減します
c. 画像のコレクションに名前を付けるだけです。それぞれの小さな要素に名前を付けます
d. スタイルを変更するのは簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。
短所:
a. ワイドスクリーンや高解像度の画面のアダプティブ ページでは、写真の幅が十分でない場合、背景が壊れやすくなります
b. CSS スプライトを開発する場合は、Photoshop またはその他 このツールは各背景ユニットの正確な位置を測定して計算します
c. ページの背景がわずかに変更されると、通常は結合された画像を変更する必要があります
。
a. フローティング要素はドキュメント フローから切り離され、スペースを占有しません (「高さの崩壊」現象が発生します)
b. フローティング要素は、それを含む境界線またはフローティング要素の境界線に遭遇すると停止します。
3.18. 浮動要素によって引き起こされる問題
b.フローティング要素がそれに続きます
c. 最初の要素がフローティングでない場合は、その前の要素もフローティングにする必要があります。そうしないと、ページ表示の構造に影響します
3.19. FOUC (スタイルなしのフラッシュ) とは何ですか。コンテンツ）？どうすればFOUCを回避できるのでしょうか？
ページのコンテンツがスタイルなしで一瞬点滅します。この現象は、ドキュメント スタイルの一時的な失敗 (スタイルのないコンテンツのフラッシュ) と呼ばれます。 ）、FOUCと呼ばれます。
原則: スタイル シートが構造 HTML よりも後に読み込まれる場合、このスタイル シートが読み込まれると、ページは前のレンダリングを停止します。このスタイル シートがダウンロードされて解析された後、ページが再レンダリングされ、その結果、画面が短時間ぼやける現象が発生します。
回避策: LINK タグを使用して、スタイルシートをドキュメントの HEAD に配置します。
3.20 と line-height の 3 つの割り当て方法の違いは何ですか? (単位付き、純粋な数値、パーセンテージ)
純粋な数値: パス子孫への割合。たとえば、親要素の行の高さが 1.5、子要素のフォントが 18px の場合、子要素の行の高さは 1.5*18=27px になります
パーセンテージ: 計算された値を子孫に渡します
「理解」を参照してください行の高さの「浅い」行の高さと垂直の分析」では、オンライン ソース コードを表示します。
3.21. :link、:visited、:hover、:active の実行順序は何ですか?
3.22. よく遭遇するブラウザの互換性は何ですか?の解き方？
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 コードを
