HTMLボックスモデルの詳しい説明

今回は HTML ボックス モデルについて詳しく説明します。 HTML ボックス モデルを使用する際の 注意点 について、実際の事例を見てみましょう。

1.1. ボックスのコンテンツ領域のサイズ (コンテンツの幅とコンテンツの高さ) は、いくつかの要因によって異なります:

-- ボックスを生成する要素に「width」属性が設定されているかどうか。
--ボックスにテキストと他のボックスが含まれるかどうか。
--ボックスがフォームであるかどうかなど。

1.2. ボックスの背景色

-- パディング領域と境界領域の背景スタイルは、(ボックスの) 生成要素の 'background' 属性によって指定されます。マージンの背景は常に透明です

2. マージン属性: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left' および 'margin'

2.1 margin 属性は、ボックス

--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果

2.2 のマージン領域の幅を指定します。 の値は 'margin-top' のいずれかになります。 、' margin-bottom'

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

これらの 2 つのプロパティは、置換されていないインライン要素には無効です

2.4. 'margin-left'

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

2.5。 margins

次の場合を除き、隣接する垂直マージンがマージされます:

----ルート要素ボックスのマージンはマージされません

----要素にギャップ (クリアランス) がある場合、それはクリア属性を意味します。要素の位置が移動します。要素の上マージン (ギャップ) は下マージンに隣接していますが、そのマージンは隣接する兄弟 (要素) のマージンとマージされません。親ブロックの下のマージンとマージします

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

Sublime で HTML ヘッダー コードをすばやく作成する方法

CSS にはどのような長さの単位があるのか​​

CSS (Cascading Style Sheets) コレクション

以上がHTMLボックスモデルの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。