CSS仕様 > 8ボックスモデルボックス Model_html/css_WEB-ITnose-htmlチュートリアル-php.cn

8 ボックスモデルボックスモデル

URL: http://www.w3.org/TR/CSS2/box.html

翻訳者: HaoyCn

日付: 2015 年 8 月 15 日

翻訳者注: この翻訳のみ重要な部分は仕様に翻訳されており、主にボックスモデルの構造を説明し、マージンの折りたたみの分析に焦点を当てています。個人レベルには限界があるので、修正は大歓迎です!

CSS ボックスモデルによって記述される長方形のボックスは、ドキュメントツリー内の要素から生成され、ビジュアルフォーマットモデルに従ってレイアウトされます。

8.1 ボックスのサイズ

各ボックスにはコンテンツ領域 (テキスト、画像など) と、オプションの周囲のパディング領域、境界領域、およびマージン領域があります。各領域のサイズは、この記事で後述する属性の仕様によって決まります。以下の図は、これらの領域の関係と、マージン、ボーダー、パディングのさまざまな部分を説明するために使用される用語を示しています。

マージン、ボーダー、パディングは、上、右、下、左の部分に分解できます (たとえば、上の図では、LM は左マージンを表し、RP は右パディングを表し、TB は上ボーダーを表します) ）。

4 つの領域 (コンテンツ、パディング、ボーダー、マージン) の境界は「エッジ」と呼ばれ、各ボックスには 4 つのエッジがあります:

コンテンツエッジまたはインナーエッジ

コンテンツエッジは、次で指定される長方形を囲みます。ボックスの幅と高さ。通常、要素のレンダリングされたコンテンツによって決まります。 4 つのコンテンツエッジは、ボックスのコンテンツボックスを定義します。

パディングエッジ

パディングエッジはボックスのパディングを囲みます。パディング幅が 0 の場合、パディングエッジはコンテンツエッジになります。 4 つのパディングエッジは、ボックス Padding Box のパディングボックスを指定します。

ボーダーエッジ

ボーダーエッジはボックスの境界線を囲みます。境界線の幅が 0 の場合、境界線のエッジはパディングエッジになります。 4 つの境界エッジは、ボックスの境界ボックスを定義します。

マージンエッジまたは外側エッジ

マージンエッジはボックスのマージンを囲みます。余白幅が 0 の場合、余白エッジは境界エッジになります。 4 つのマージンエッジは、ボックスのマージンボックスを定義します。

各エッジは、上、右、下、左のエッジに分解できます。

ボックスのコンテンツ領域のサイズ?? コンテンツの幅 Content width とコンテンツの高さ Content width?? ボックスを生成する要素に幅と高さの属性が設定されているかどうか。テキストまたはその他のボックス、表など。ボックスの幅と高さについては、「ビジュアルフォーマットモデルの詳細」の章で説明します。

ボックスの境界領域のコンテンツ、パディング、背景スタイルは、ボックスを生成する要素のbackground属性によって指定されます。余白の背景は常に透明になります。

8.2 マージン、パディング、ボーダーの例

次の例は、マージン、パディング、ボーダーがどのように相互作用するかを示しています。 HTML ドキュメント:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Examples of margins, padding, and borders<title><style type="text/css">   ul {       background: yellow;       margin: 12px 12px 12px 12px;      padding: 3px 3px 3px 3px;      /* 未设置边框 */   }   li {       color: white;/* 文本颜色为白色 */       background: blue;/* 内容和内边距背景为蓝色 */      margin: 12px 12px 12px 12px;      padding: 12px 0px 12px 12px; /* 注意右内边距为0 */      list-style: none/* 列表前没有符号 */      /* 未设置边框 */   }   li.withborder {      border-style: dashed;      border-width: medium;/* 各边均设置边框 */      border-color: lime;   }</style></head><body>   <ul>      <li>First element of list</li>      <li class="withborder">Second element of list is a bit longer to illustrate wrapping.</li>   </ul></body></html>

ログイン後にコピー

このドキュメントは、ドキュメントツリー内に ul 要素とその 2 つの li 子要素を生成します (他の関係は省略されています)。

下の最初の図は、例の結果を示しています。 2 番目の画像は、ul 要素とその li 子要素のマージン、パディング、境界線の関係を示しています。 (図は縮尺通りではありません)

注:

各 li ボックスのコンテンツの幅は上から下に計算され、すべての li ボックスを含むブロックは ul 要素によって作成されます。
各 li ボックスのマージンボックスの高さは、コンテンツの高さに上下のパディング、境界線、およびマージンを加えたものによって決まります。 li ボックス間の垂直方向のマージンが折りたたまれていることに注意してください。
li ボックスの右パディング幅はゼロに設定されます (パディングプロパティ)。効果は2枚目の写真に示されています。
li ボックスの外側の余白は透明です??外側の余白は常に透明です??そのため、ul の内側の余白とコンテンツ領域の背景色 (黄色) が外側の余白を通して表示されます。
2 番目の li 要素は、破線の境界線 (border-style 属性) を指定します。

8.3 Margin プロパティ

margin プロパティは、ボックスのマージン領域の幅を指定します。 margin は 4 方向すべてのマージンを設定しますが、他の margin プロパティは各方向の幅のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直マージンは置換されていないインライン要素には影響しません。

翻訳者注: 以下の各属性の説明は省略しています。CSS マニュアルを参照してください

8.3.1 マージンの縮小

CSS では、2 つ以上の (兄弟である必要はない) ボックスが隣接するマージンがマージされる場合があります単一のマージンに。この方法で結合されたマージンは Collapse と呼ばれ、結合されたマージンは Collapsed Margin と呼ばれます。

隣接する垂直方向のマージンは次の場合を除いて折りたたまれます:

ルート要素のボックスのマージンは折りたたまれません
ギャップのある要素の上下のマージンが隣接している場合、そのマージンは後続の兄弟のブロックと同じブロックの隣接するマージンは折りたたまれますが、親ブロックの下マージンは折りたたまれません。

水平方向の余白は重なりません。

2 つの余白は次の場合にのみ隣接します:

が同じブロック書式設定コンテキストに属するドキュメントフロー内のブロックレベルのボックスである
それらを区切る行ボックス、ギャップ、パディング、境界線はありません (一部の高さゼロの行ボックスはこの理由で無視されることに注意してください (9.4.2 章を参照))
ボックスの端は垂直に隣接しています。、次の形式のいずれかを満たします:
最初のドキュメントストリームのボックスの上マージンとそのサブボックスの上マージン
ボックスの下マージンとその兄弟ボックスの上マージン次のドキュメントストリーム
親ボックスの計算された高さの値が auto の場合、子ボックスの下マージンと最後のドキュメントフローの親ボックスの下マージンが
ボックスが新しいブロック書式設定コンテキスト、min-height サブボックスの計算値が 0 の場合、高さの計算値は 0 または auto で、ドキュメントフロー内にサブボックスがなく、その上下のマージン

折りたたまれた場合マージンが別のマージンのいずれかの側に隣接している場合、両方とも隣接しているとみなされます。

注: 兄弟または祖先ではない要素も、隣接するマージンを生成する可能性があります。

注: 上記のルールは次のことを示しています:

フローティングボックスのマージンは他のボックスのように折りたたまれません (ドキュメントフロー内のフロートとその子要素も折りたたまれません)
新しいブロックの書式設定コンテキストは次のとおりです。要素 (フロート、非表示のオーバーフロー要素など) のマージンは、ドキュメントフロー内の子要素のマージンとは異なります。絶対配置ボックスのマージンは、他のボックスのマージンとは異なります (さらに異なります)。
インラインブロックボックスの余白は、他のボックスの余白とは異なります (ドキュメントフロー内の子要素も同様)
ドキュメントフロー内のブロックレベルの要素は、その下の要素と常に同じです。ドキュメントフロー内のブロックレベルの兄弟の上の余白は、兄弟のペアの間に隙間がない限り折り畳まれます。
ドキュメントフロー内のブロック要素に上枠と上パディングがない場合、ドキュメントフロー内の最初のブロックレベルの子要素にはギャップがなく、2 つの上マージンは折りたたまれます。
高さが auto、min-height が 0、ドキュメントフロー内の下部パディングと下部境界線がないブロックボックスの場合、ドキュメントフロー内の最後のブロックレベルのサブボックスの下マージンに同じギャップで上マージンが折り畳まれ、下マージンが折り畳まれます。
ボックスの min-height 属性が 0 の場合、上下の境界線と上下のパディングがなく、高さが 0 または自動で、ラインボックスとそのすべてのサブ要素が含まれません。ドキュメントフロー内の余白 (存在する場合) が折りたたまれ、その余白が折りたたまれます。
2 つ以上の余白が折りたたまれている場合、余白の合計幅が折りたたまれた余白の最大幅になります。崩壊が発生するマージンに負の数値がある場合、それは最大の正の隣接マージンから最小の負の隣接マージンを引いた絶対値になります。正のマージンが存在しない場合は、ゼロから隣接する最小の負のマージンの絶対値を引いた値になります。

要素のマージンが親要素の上マージンと重なる場合、ボックスの上端は親要素ボックスの上端と同じになります。

それ以外の場合は、要素の親要素のマージンが折りたたまれないか、親要素の下マージンのみが折りたたまれます。要素の下端の境界線がゼロ以外の場合、上端の境界線の位置は変更されません。
折り畳まれた要素の位置は、折り畳まれたマージンを持つ他の要素の位置に影響を与えないことに注意してください。その上境界線の位置は、その子孫要素をレイアウトするためにのみ使用されます。

各ラインボックスについて、ユーザーエージェントは、生成されたインラインボックスのマージン、境界線、パディングを視覚的な順序 (論理的な順序ではなく) でレンダリングする必要があります。

要素の方向属性値が ltr の場合、要素によって描画される最初の行ボックスの左端の生成ボックスには左外マージン、左ボーダー、左内マージンがあり、要素によって描画される最後の行ボックスの右端の生成ボックス右パディング、右ボーダー、右マージンがあります。

要素の方向属性値が rtl の場合、要素によってレンダリングされる最初の行ボックスの右端の生成ボックスには右外マージン、右ボーダー、右内マージンがあり、要素によってレンダリングされる最後の行ボックスの左端の生成ボックス左パディング、左ボーダー、左マージンがあります。

翻訳者の感想

翻訳者はこの記事を読み終え、慎重に熟考し、自分の経験と疑問を次のようにまとめました:

1 つおよび 2 つのボックスモデル

この章では、W3C の標準ボックスモデルについて説明します。また、奇妙なモードもあります。 IE6のもう一つのQuicksモード用ボックスモデル。 2 つの違いについては、ここで次のように簡単に説明します??

W3C 標準: ボックスの合計幅/高さ = 幅/高さ + パディング + ボーダー + マージン

奇妙なモード: ボックスの合計幅/高さ = 幅/高さ + margin = コンテンツの幅/高さ + パディング + ボーダー + マージン

CSS3 では、ボックスサイズのデフォルトは content-box で、値が border-box の場合は、奇妙なモードのボックスモデルが使用されます。

2. 不透明な余白

CSS 仕様:

ボックスの境界領域のコンテンツ、パディング、および背景スタイルは、ボックスを生成する要素の背景属性によって指定されます。余白の背景は常に透明になります。

但在根元素 html 上设置了外边距，并规定了背景，该背景仍铺满全屏。

如下CSS：

html {margin: 50px;background: #000;}

ログイン後にコピー

body 同此理。译者暂不知其因。欢迎读者指教。

三、有空隙的元素

外边距折叠中，很多地方叙述了“有空隙的元素”，这是什么意思呢？其意义即是说，该元素清除了浮动。

在翻译视觉格式化模型一章中，W3C给出了清除浮动以及计算空隙宽度的的案例，译者建议读者认真阅读该部分，尤其关注：当空隙为负值时取消外边距折叠的情形。

点此阅读：http://segmentfault.com/a/1190000003096320。

如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。

> 如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。

以下代码中， B 是浮动块，为清除其浮动， C 引入了空隙。

共同CSS：

html,body{padding:0;margin:0;}/*横线，直观对比折叠情况*/.line{height:50px;background:red;} .mt{margin-top:50px;}.mb{margin-bottom:50px;}#B{float:left;width:1px;height:1px;}#C{clear:both;}

ログイン後にコピー

其外边距将同其后同胞的相邻外边距折叠：

HTML：

<body>   <div id="A">      <div id="B"></div>      <div id="C" class="mb"></div>      <div id="D" class="mb"></div>      <div class="line"></div>   </div> </body>

ログイン後にコピー

渲染结果是， C 和 D 的外边距折叠。

不同父块的下外边距折叠

HTML：

 <body>   <div id="A" class="mb">      <div id="B"></div>      <div id="C" class="mb"></div>   </div>   <div class="line"></div> </body>

ログイン後にコピー

渲染结果是， C 的外边距不同其父元素 A 的外边距折叠。

四、避免盒自身垂直外边距折叠

如果一个盒不建立新的块格式化上下文、 min-height 计算值为零、 height 计算值为零或 auto 、没有在文档流内的子盒，其上下外边距

由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：

建立新块格式化上下文，如 overflow: hidden

设置 min-height

设置固定高 height

添加文档流内（即非浮动、非绝对定位）子盒

需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。