このブログ記事では主に HTML ページレイアウトの基礎知識を整理します。これらのことは基本的に理解していますが、実際に使用すると、細部のいくつかにいつも気付かないことがあります (>_<)。
ボックス モデルは、CSS における重要な概念です。ボックス モデルを理解することによってのみ、より良いレイアウトを行うことができます。ボックス モデルのスコープには、ボーダー、パディング、マージン、コンテンツが含まれます。ボックスモデルには、IE(ウィアードモード)ボックスモデルと標準ボックスモデルの2種類があります。 2 つの違いは、IE ボックス モデルのコンテンツ部分にはパディングとボーダーが含まれるのに対し、標準ボックス モデルには含まれないことです。 css3 の border-sizing 属性は、特定のボックス モデルを選択できます: content-boxing (デフォルトの標準ボックス モデル); border-boxing (IE ボックス モデル) 200
左境界線から右境界線までの長さ: (10+30)*2 + 120
POSITION
絶対要素または固定
要素は、要素自体のタイプに関係なく、
絶対: 絶対位置の要素を生成します。 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) 要素を基準とします。
<!-- 相对定位 --><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 レイアウト - 表示、位置、浮動小数点プロパティから始める