この記事では、CSS ボックス モデルとは何ですか? CSS ボックス モデルの簡単な紹介は、必要な場合に参考にしていただければ幸いです。
ボックス モデル
1. 任意の要素をボックス モデルとして使用できます
2。ボックスのサイズはコンテンツの幅によって決まります。 /height ) Margin (padding) Border (border)
3. ボックスは外側のマージン (マージン) の影響を受け、ボックスの位置に影響します
一般化されたボックス モデル: ドキュメント内のすべての機能タグとコンテンツ タグ、およびドキュメント タグ内のすべての表示プロパティ。
ナロー ボックス モデル: ドキュメント内にブロック レベルの形式で存在するタグ (ブロック レベルのタグは、ボックス モデルの特性を 100% 備えており、最も一般的に使用されます)
2. ボックス モデル メンバーの概要
content
幅と高さを設定してコンテンツを指定します ブロックレベルのタグは独自の幅と高さを設定できます。デフォルトの幅は親の幅 (width =auto) で、高さは自動です (コンテンツによって拡張されます) インライン タグはできません独自の幅と高さを設定し、デフォルトは自動 (コンテンツによって拡張) border
##Border (境界線) は 3 つの部分で構成されます。 border-width (幅)、border-color (色)、border-style (スタイル)
説明
破線##破線 |
#点線 | #点線
| 二重 | 二重実線
| #グルーブ | グルーブライン
| ridge | ridge
| inset | インセットエフェクトline
| outset | 外側の凸効果ライン
|
margin |
# #margin メンバー: margin-left、margin-right、margin-top、margin-bottom |
| マージン全体の設定
上下左右
3 | 上|左|下 |
4 | 上|右|下|左 |
|
概要: 1. 開始位置を指定します。位置 2. 時計回り 3. 反対側を探しません |
3. 境界半径 |
境界半径 |
border-radius メンバー
メンバー
説明
-
# #border-top-left-radius
左上の位置
border-bottom-left-radius
左下の位置 |
|
border-bottom-right-radius右下半径############
割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 1 解釈: 水平および垂直 割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 2 解釈: 水平 | 垂直
形式: 1/1 解釈:水平|垂直
4. その他の関連属性
##表示 デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。 |
|
hidden
コンテンツはトリミングされ、残りのコンテンツは非表示になります。 |
|
scroll
コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。 |
|
auto
コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。 |
|
inherit
オーバーフロー属性の値を親要素から継承することを指定します。 |
|
表示##値
説明インライン
インライン
|
ブロック |
ブロックレベル
|
inline-block |
Inline-block
|
##5. ボックス モデル レイアウト |
ボックス モデル レイアウトの基本的な概要
レイアウトの方向: マージン-左、マージン-右、マージン-上、マージン-下
- #独自のレイアウトに影響を与える: マージン-左、margin-top
- 兄弟レイアウトに影響を与える: margin-right、margin-bottom
- 順方向/逆方向: 正の値 / 負の値
- マージン レイアウト ピット
多くのセマンティック タグにはデフォルトのマージンがあります
- 親タグと子タグのいずれかmargin-top のオーバーラップの方が大きい
- ブラザータグの margin-bottom と margin-top のオーバーラップのどちらか大きい方
|
以上がCSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。