ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS Webページレイアウトの基礎知識(まとめ)
この章では、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 属性があります:
オフセットが設定されていない場合 (左、上):
配置された祖先要素があるかどうかに関係なく、要素の初期位置で標準ドキュメント フローから外してください。
設定オフ: オフセット参照のベンチマーク:
注: 要素が絶対配置に設定され、幅が設定されていない場合、要素の幅はコンテンツに応じて調整されます。
回答: a は静的位置であるため、HTML 要素であるルート要素に基づいてオフセットする必要があります (静的位置決めは、要素のデフォルトの位置決め属性であるposition:staticです。絶対、相対、配置された親要素を計算します
5. ボタンのテキストを非表示にするためのヒント:
## は、CSS の @media および @import ルールに使用できます。また、HTML および XML でも使用できます。1) @media screen および (幅: 800px)。 # 2) @import url(example.css) screen and (width: 800px);
3)0
以上がCSS Webページレイアウトの基礎知識(まとめ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。