CSS Webページレイアウトの基礎知識（まとめ）-CSSチュートリアル-php.cn

CSS Webページレイアウトの基礎知識（まとめ）

青灯夜游

リリース： 2018-09-20 15:47:58

オリジナル

2408 人が閲覧しました

この章では、CSS Web ページレイアウトに関するいくつかの知識ポイントを理解できるように、CSS Web ページレイアウトの基本的な知識 (概要) を紹介します。困っている友人は参考にしていただければ幸いです。

1. ボックスモデルの 1 番目から 5 番目のレイヤー:

ボーダー、パディングコンテンツ、背景画像、背景色、マージン

2。フローティングの影響を受けるラベルに対して次の操作を実行します:

1. クリア: 両方;

2. クリア: 右; クリア: 左;

3. 幅幅を設定します。 100% (または固定幅) オーバーフロー: hidden;

3. 2 つのクリアフローティングメソッドの使用シナリオ:

1. 子要素が float に設定されている場合、親要素は設定されません。子要素が親要素からはみ出す場合は、幅を 100% (または固定幅値) に設定する方法が適しています。 overflow: hidden を使用すると、フロートを同時にクリアできます。このメソッドは、すぐに隣接するブロックレベルの要素がフロートの影響を受けるため、隣接するブロックレベルの要素からフロートを削除する必要はありません。浮きの影響を受ける。

2. 隣接するブロックレベル要素がフローティングの影響を受ける場合、影響を受けるブロックレベルに対してclear: Bothまたはclear: left、clear: rightを設定する方が適切です。

注: 幅を 100% に設定すると、親コンテナの幅が継承されます。容器全体を左右に埋めて、フロートをクリアするための条件を自分で作ります。オーバーフロー非表示を追加することで、パッケージの浮いた部分を削除できます。

4. 絶対位置決め機能:

1) ブロックビットに基づいて位置決めを確立します。

2) 標準のドキュメントフローから完全に分離します。 ) 次に、オフセット属性と z-index 属性があります:

オフセットが設定されていない場合 (左、上):

配置された祖先要素があるかどうかに関係なく、要素の初期位置で標準ドキュメントフローから外してください。

設定オフ: オフセット参照のベンチマーク:

位置指定された祖先要素はありません。オフセット参照としてを使用してください。配置された祖先要素があります。最も近くに配置された祖先要素がオフセット参照として使用されます。

注: 要素が絶対配置に設定され、幅が設定されていない場合、要素の幅はコンテンツに応じて調整されます。

演習問題: 絶対配置を持つ要素 b がその親要素 a に位置することがわかっています。a 要素が静的要素の場合、b 要素は (html) に基づいてオフセットされます。

回答: a は静的位置であるため、HTML 要素であるルート要素に基づいてオフセットする必要があります (静的位置決めは、要素のデフォルトの位置決め属性であるposition:staticです。絶対、相対、配置された親要素を計算します

5. ボタンのテキストを非表示にするためのヒント:

text-indent: -999px と overflow: hidden;

原則: まず text-indent:-999px; ステートメントを使用して、設定された要素を「絞り出し」、次に、はみ出した要素を非表示にします。つまり、絞り出された要素を非表示にします。

## は、CSS の @media および @import ルールに使用できます。また、HTML および XML でも使用できます。1) @media screen および (幅: 800px)。 # 2) @import url(example.css) screen and (width: 800px);

3)0

以上がCSS Webページレイアウトの基礎知識（まとめ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。