HTML ページレイアウトの基本_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:27:54

オリジナル

1364 人が閲覧しました

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

ボックスモデル

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

コンテンツの高さ: 100

コンテンツの幅: 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 レイアウト - 表示、位置、浮動小数点プロパティから始める