ボックスモデル
考え方
：cssの各タグを
行列とみなして
、
その行列の内側から外側に向かって一連の属性を持ち
、
この一連の属性をボックス
モデル
構成
: コンテンツのパディング境界マージン
背景色を追加した後の視覚領域
: コンテンツ + パディング + 境界線
1.
コンテンツ内容
幅
と
高さは
彼のために設定されています
2.
内側のマージンのパディング
コンテンツ
レイヤー
から
境界線までの
距離
パディングには上/右/下/左の4 つの方向があります。
元のサイズを維持したい場合は
、
デフォルトで表示領域が増加します: box-sizing: border-box
3.
ボーダー
3 つのプロパティによって制御されます
。
ボーダースタイル
ボーダースタイル
境界線の幅
境界線の太さ
境界線の色
境界線の色
元のサイズを維持したい場合は
、
デフォルトで表示領域が増加します。
境界線は個別に設定できます: border-left/top/right/bottom-style/width/color
境界円弧
:境界半径:50%
個別に設定可能
: border-top/bottom-left/right-radius
4.マージン
外側マージン
上/右/下/左の4方向のマージンがあります
margin:auto は
コンテナを現在のドキュメント フローの中心に置きます