HTML ページ レイアウトの基本_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:27:54
オリジナル
1355 人が閲覧しました

このブログ記事では主に HTML ページレイアウトの基礎知識を整理します。これらのことは基本的に理解していますが、実際に使用すると、細部のいくつかにいつも気付かないことがあります (>_<)。

ボックス モデル

ボックス モデルは、CSS における重要な概念です。ボックス モデルを理解することによってのみ、より良いレイアウトを行うことができます。ボックス モデルのスコープには、ボーダー、パディング、マージン、コンテンツが含まれます。ボックスモデルには、IE(ウィアードモード)ボックスモデルと標準ボックスモデルの2種類があります。 2 つの違いは、IE ボックス モデルのコンテンツ部分にはパディングとボーダーが含まれるのに対し、標準ボックス モデルには含まれないことです。 css3 の border-sizing 属性は、特定のボックス モデルを選択できます: content-boxing (デフォルトの標準ボックス モデル); border-boxing (IE ボックス モデル) 200

コンテンツの高さ: 100

    左枠から右枠までの長さ: (10+30)*2 + 200
  • 奇妙なモード
  • コンテンツの幅: 12 0

コンテンツの高さ: 20

左境界線から右境界線までの長さ: (10+30)*2 + 120
  • POSITION
  • この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。どの要素でも配置できますが、

    絶対要素または固定

    要素は、要素自体のタイプに関係なく、
  • ブロックレベルのボックス
  • を生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

static: デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)

絶対: 絶対位置の要素を生成します。 relative:

自身の位置を基準にして相対的に配置された要素を生成します
  • fix:
  • ブラウザウィンドウを基準にして配置された絶対配置の要素を生成します
  • inherit:位置属性の値は親要素から継承する必要があります
  • 相対配置

    相対配置は比較的単純で、position 属性の相対値に対応します。要素が相対的に配置されている場合、その位置に表示されます。垂直位置または水平位置を設定すると、要素はそれ自体に対して相対的に移動します。要素が移動するかどうかに関係なく、要素はドキュメント フロー内の元のスペースを占有しますが、パフォーマンスは変わります。
  • <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>box</title></head><style>/* 标准模式 */.content-box{ box-sizing: content-box; width:200px; height:100px; margin:20px; padding:30px; border:10px solid green; }/* 怪异模式 */.border-box{ box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:200px; height:100px; margin:20px; padding:30px; border:10px solid green; }</style><body><divclass="content-box">标准模式</div><divclass="border-box">怪异模式</div></body></html>
    ログイン後にコピー
  • <!-- 普通流 --><divstyle="border: solid 1px #0e0; width:200px;"><divstyle="height: 100px; width: 100px; background-color: Red;"></div><divstyle="height: 100px; width: 100px; background-color: Green;"></div><divstyle="height: 100px; width: 100px; background-color: Red;"></div></div>
    ログイン後にコピー

    絶対配置
  • 相対配置は、要素の位置が通常のフロー内の位置に対して相対的に変化するのに対し、絶対配置は要素の位置を独立させます。ドキュメント フローのスペースを占有せず、通常のフロー内の要素は、絶対に配置された要素が存在しないかのようにレイアウトされます。

    絶対的に配置された要素の位置は、最も近い非静的祖先要素の位置を基準にして決定されます。つまり、position 属性が静的でない限り、最も近い祖先要素を絶対位置決めの参照基準として使用できます。要素に位置決めされた祖先がない場合、その位置は元の含まれるブロック (body または html) 要素を基準とします。
絶対配置はドキュメント フローとは関係がないため、絶対配置された要素はページ上の他の要素を覆うことができ、z-index 属性によって積み重ね順序を制御できます。z-index が高いほど、その位置が高くなります。要素。

<!-- 相对定位 --><divstyle="border: solid 1px #0e0; width:200px;"><divstyle="height: 100px; width: 100px; background-color: Red;"></div><divstyle="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;"></div><divstyle="height: 100px; width: 100px; background-color: Red;"></div></div>
ログイン後にコピー

固定配置

固定配置は、実際には、通常のドキュメント フローには含まれない特別な種類の絶対配置です。 )

注: このプロパティは IE6 とは互換性がありません

リファレンス

CSS レイアウトを学ぶ

css3 ボックス サイズ プロパティ

CSS レイアウト - 表示、位置、浮動小数点プロパティから始める

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート