CSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介

この記事では、CSS ボックス モデルとは何ですか? CSS ボックス モデルの簡単な紹介は、必要な場合に参考にしていただければ幸いです。

ボックス モデル

1. 任意の要素をボックス モデルとして使用できます

2。ボックスのサイズはコンテンツの幅によって決まります。 /height ) Margin (padding) Border (border)

3. ボックスは外側のマージン (マージン) の影響を受け、ボックスの位置に影響します
一般化されたボックス モデル: ドキュメント内のすべての機能タグとコンテンツ タグ、およびドキュメント タグ内のすべての表示プロパティ。
ナロー ボックス モデル: ドキュメント内にブロック レベルの形式で存在するタグ (ブロック レベルのタグは、ボックス モデルの特性を 100% 備えており、最も一般的に使用されます)

2. ボックス モデル メンバーの概要

content

幅と高さを設定してコンテンツを指定します
ブロックレベルのタグは独自の幅と高さを設定できます。デフォルトの幅は親の幅 (width =auto) で、高さは自動です (コンテンツによって拡張されます)
インライン タグはできません独自の幅と高さを設定し、デフォルトは自動 (コンテンツによって拡張)
border

##Border (境界線) は 3 つの部分で構成されます。 border-width (幅)、border-color (色)、border-style (スタイル)

• border メンバー: border-left、border-right、border-top、border- bottom

• border-width メンバー: border-left-width、border-right-width、border-top-width、border-bottom-width

• ##border-color メンバー: border-left-color、border-right-color、border-top -color、border-bottom-color

border-style メンバー: border-left-スタイル、ボーダー右スタイル、ボーダートップスタイル、ボーダーボトムスタイル

• スタイル

説明#実線実線破線##破線#点線二重二重実線#グルーブグルーブラインridgeridgeinsetインセットエフェクトlineoutset外側の凸効果ライン# #margin メンバー: margin-left、margin-right、margin-top、margin-bottomマージン全体の設定

	#点線
	margin

#割り当て数

• #方位

1

上下左右2上と下|左と右3上|左|下4上|右|下|左

	概要: 1. 開始位置を指定します。位置 2. 時計回り 3. 反対側を探しません
3. 境界半径	境界半径

border-radius メンバー

メンバー

説明

• # #border-top-left-radius

左上の位置border-bottom-left-radiusborder-bottom-right-radius

border-top-right-radius

右上の位置

左下の位置

右下半径＃＃＃＃＃＃＃＃＃＃＃＃

• 単一方向設定

割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 1 解釈: 水平および垂直
割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 2 解釈: 水平 | 垂直

• 分割全体設定

形式: 1/1 解釈:水平|垂直

4. その他の関連属性

• 最大|最小幅|高さ

• ##オーバーフロー

値##表示hiddenscrollautoinherit

デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
コンテンツはトリミングされ、残りのコンテンツは非表示になります。
コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
オーバーフロー属性の値を親要素から継承することを指定します。

表示

##値 説明インラインインラインブロックレベルInline-blockボックス モデル レイアウトの基本的な概要

	ブロック
	inline-block
	##5. ボックス モデル レイアウト

レイアウトの方向: マージン-左、マージン-右、マージン-上、マージン-下

• #独自のレイアウトに影響を与える: マージン-左、margin-top

• 兄弟レイアウトに影響を与える: margin-right、margin-bottom

• 順方向/逆方向: 正の値 / 負の値

• マージン レイアウト ピット

多くのセマンティック タグにはデフォルトのマージンがあります

• 親タグと子タグのいずれかmargin-top のオーバーラップの方が大きい

• ブラザータグの margin-bottom と margin-top のオーバーラップのどちらか大きい方

以上がCSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。