CSSボックスモデル

2016-10-22

「CSSビギナーズクラシック」第6章

1. 各 HTML 要素は表示ボックスに対応しますが、すべての要素が画面に表示されるわけではありません。

2. HTML要素をCSS表示ボックスとして表示する実際の方法は、「ビジュアルフォーマット方法」と呼ばれます。視覚的な書式設定は、HTML コンテンツを画面上にどのように表示するかをブラウザーに指示します。

3. 要素の種類:

(1) ブロック要素（block）：改行で始まり改行で終わります。

、、
など。

(2) インライン要素(inline): 排他的な行を占有せず、テキストフローに含まれます。 、、、 など。

4.表示属性

表示属性値を設定することで要素の種類を変更できます

display:none;表示しない

display:block; ブロック要素に設定します

display:inline; インライン要素に設定します

5.匿名ボックス

タグにテキストと一部の HTML タグなどの混合コンテンツが含まれる場合、匿名ボックスと呼ばれる、HTML タグのないボックスが生成されます。匿名ボックスは、そのボックスを含むボックスと同じスタイルになります。

例:

Hello World!

画像からわかるように、「Hello」というテキストは匿名ボックスです。

6. HTML では、 として定義されます。したがって、ページ内の タグの内容は表示されません。

7. ボックスのプロパティを表示します

マージン: マージン

ボーダー: ボーダー

パディング: パディング

(1) マージン: 2 つのボックス間の距離。余白は常に透明です。

注: マージンが重なっている場合、つまり 2 つの垂直ボックスでは、垂直方向の間隔として 2 つの要素間の最大値が使用されます。マージンはブロック要素上でのみ重なり、水平方向ではなく垂直方向に重なります。

(2) 境界線:

ボーダー属性設定: セレクター { ボーダー: サイズ スタイル カラー }

ボーダー幅	枠線の幅を指定します。
ボーダースタイル	枠線のスタイルを指定します。
ボーダーカラー	枠線の色を指定します。
継承	border 属性の設定を親要素から継承することを指定します。

幅:

薄い	細い境界線を定義します。
中	デフォルト。中程度の境界線を定義します。
厚い	太い枠線を定義します。
長さ	境界線の幅をカスタマイズできます。
継承	境界線の幅を親要素から継承することを指定します。

スタイル:

なし	ボーダレスを定義します。
非表示	「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。
点線	点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。
破線	破線を定義します。ほとんどのブラウザでは実線として表示されます。
しっかり	実線を定義します。
ダブル	二重線を定義します。二重線の幅は、border-width の値と同じです。
グルーヴ	3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。
リッジ	3D 尾根の境界線を定義します。効果はborder-colorの値によって異なります。
挿入	3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。
スタート	3D 開始境界線を定義します。効果はborder-colorの値によって異なります。
継承	境界線のスタイルを親要素から継承することを指定します。

説明

最も予測不可能なボーダースタイルはダブルです。これは、2 つの線の幅に、border-width 値に等しい 2 つの線の間のスペースを加えたものとして定義されます。ただし、CSS 仕様では、一方の線が他方の線よりも太いのか、両方の線が同じ太さであるべきなのか、また、線の間のスペースが線よりも太いのかどうかについては規定されていません。これらはすべてユーザー エージェントによって決定され、クリエイティブはこの決定に影響を与えません。 (W3スクール)

(3) パディング: コンテンツの周囲のスペース。パディングは常にコンテンツ自体の背景と同じ色です。

注意:

(1) 表セル

はインライン要素でもブロック要素でもありません。表セルの表示値はdisplay:table-cellです。テーブルセル要素にはマージンを含めることはできません。

(2) 行の長さ em: CSS では、行の長さは位置サイズに等しい測定値として定義されます。これは、フォントの高さと同じ高さと幅を持つ正方形です。