CSS レイアウト モデル 2 の簡単な分析

前のセクションでは、レイアウト モデル全体の概要を説明しました。このセクションでは、まずレイアウト モデルのいくつかの属性について説明します。

z-index属性

このプロパティは、オブジェクトの重なり順を取得または設定するためのもので、デフォルト値は親オブジェクトの配置に従います。

マージされたオブジェクトの場合、この属性の値が大きいほど、2 つのオブジェクトの属性が同じ値を持つ場合、ドキュメント フローの順序に従って、最初に書き込まれたものが上書きされます。オブジェクトの位置を定義する必要があります。この値は、属性値が相対、絶対、または固定の場合にのみ有効です。

上、右、下、左

これら 4 つの属性はすべて、オブジェクトの相対オフセットを表します。デフォルト値は auto です。位置属性の値を相対、絶対、または固定として定義する必要もあります。

表示

表示属性の一般的に使用される値をいくつかリストします。

none: 隠しオブジェクト。可視性属性の非表示値とは異なり、非表示オブジェクト用に物理スペースを予約しません

inline: オブジェクトをインライン要素として指定します。

block: オブジェクトをブロック要素として指定します。

inline-block: オブジェクトをインラインブロック要素として指定します。

box: オブジェクトをフレックスボックス モデルとして表示します。

inline-box: オブジェクトをインライン ブロックレベルのフレックスボックス モデルとして表示します。

フロート

この属性の値は、none、left、right です。値が none ではなく、オブジェクトが浮動する場合、そのオブジェクトはブロック オブジェクトとみなされます。つまり、display の値はブロックと見なされます。

晴れ

none: 両側の浮遊オブジェクトを許可します

両方: 浮遊オブジェクトは許可されません

左: 左側では浮遊物は許可されません

右: 右側では浮遊物は許可されません

属性値方向のフローティング属性を無視し、組版の標準ドキュメント フローとして扱います。

視認性

デフォルト値が表示され、設定オブジェクトが表示されます。値が非表示の場合、オブジェクトも非表示になり、collapse 属性によりテーブルの行と列が非表示になります。

写真に示すように、隠れた部分には物理的な空間がまだ残っています。

クリップ

rect(|auto |auto |auto |auto): オブジェクトの左上隅 (0,0) を右上、の順に提供します。左下 座標計算用の 4 つのオフセット値。いずれも auto に置き換えることができます。つまり、このエッジはカットされません。例: Clip:rect(0 auto 20px 20px); 上は0ピクセルからカットされ、右側はカットされず、下は20ピクセルからカットされ、左側は20ピクセルからカットされます。カットした部分は透明になります。注: この属性は位置の値を絶対または固定に設定する必要があります。

オーバーフロー

visible: コンテンツを切り取らないでください。

非表示: オブジェクトのサイズを超えるコンテンツが切り取られ、スクロール バーは表示されません。

スクロール: オブジェクトのサイズを超えるコンテンツをトリミングし、超過したコンテンツをスクロール バーの形式で表示します。

auto: 必要に応じてコンテンツを切り取り、スクロール バーを追加します。これは本文オブジェクトとテキストエリアのデフォルト値です。

さらに、overflow-x と overflow-y という 2 つの属性があり、それぞれ x 軸と y 軸に overflow 属性を設定するのと同等です。