ボックスモデル CSS_html/css_WEB-ITnose

ボックスの内部世界

1. モデル

CSS の目を通して見ると、HTML のすべての要素は段落、タイトルなどのボックスとして見えます。 、ブロック 参照、リスト、リスト項目など。インライン要素も。

ボックスの構成

コンテンツエリア(コンテンツ): コンテンツ(テキストまたは画像)が含まれます

パディング: オプション

ボーダー: オプション

マージン: オプション

画像

2. 簡単な紹介

コンテンツエリア

コンテンツエリアにはテキストまたは画像が保存されます。

上の画像の周囲の枠線はブラウザでは見えません。

パディング

パディングは

透明

で、色がなく、独自の装飾もありません CSSを通じて、コンテンツ領域全体の周囲のパディングの幅を制御できます

幅を制御することもできます(

上、下、左、右

) のパディング幅

ボーダー

ボーダーにはさまざまな

幅、色、スタイルを指定できます

外側マージン

外側マージンも同様です

透明

、色や装飾なし

3. カスタマイズされたボックス

コンテンツエリア

高さ

幅

パディング

すごい

ボーダー

スタイル

rreee

幅

 1 h1{ 2     /*在内容四周增加20像素的内边距*/ 3     padding: 20px; 4 } 5  6 h2{ 7     /*分别指定内容四周增加的像素量*/ 8     padding-bottom:20px; 9     padding-left: 20px;10     padding-right: 20px;11     padding-top: 20px 12 }

色

h2{    border-style: groove;}

境界線の角丸を指定

1 h2{2     border-width: thin;3     border-width: 5px;4 }

辺を指定

余白