ブロックレベル要素とブロックボックス
アセンブラの魔女 ⧫ CSS ⧫ 視覚フォーマットモデル ⧫ ボックス生成の制御 ⧫ ブロックレベル要素とブロックボックス
アセンブラの魔女 ⧫ CSS ⧫ 視覚フォーマットモデル ⧫ ボックス生成の制御 ⧫ ブロックレベル要素とブロックボックス

 ブロックレベル要素はソース文書の要素であり、パラグラフのように視覚的にブロックとしてフォーマットされます。

 次のdisplayプロパティの値は、要素をブロックレベルにします

  • block
  • list-item
  • table

 ブロックレベルボックスは、ブロック整形文脈に参加するボックスです。

 それぞれのブロックレベル要素は、主ブロックレベルのボックスを生成します。主ブロックレベルのボックスは、子孫ボックスと生成されたコンテンツを含み、任意のポジショニング・スキームに関係するボックスです。

 ブロックレベル要素には、list-item要素のように主ボックスに加えて、追加的なボックスを生成するものもあります。これらの追加的なボックスは、主ボックスに対して配置されます。

 以下の説明にある要素の置き換えられたテーブルボックスを除いて、ブロックレベルのボックスもブロックコンテナボックスとなります。

 ブロックコンテナボックスは、ブロックレベルのボックスのみを含むか、またはインライン整形文脈を確立しインラインレベルボックスのみを含みます。

 すべてのブロックコンテナボックスがブロックレベルのボックスとは限りません。置換されていないインラインブロックと、置換されていないテーブルのセルはブロックコンテナですが、ブロックレベルボックスではありません。

 「ブロックレベルボックス」、「ブロックコンテナボックス」、「ブロックボックス」という3つの用語は、明確でない場合は「ブロック」と省略されることがあります。

 次の様なドキュメントは、

<DIV>
  Some text
  <P>More text
</DIV>

 DIVとPの両方がdisplay:blockを持つと仮定すれば、DIVはインライン・コンテンツとブロック・コンテンツの両方を持つように見えます。書式を簡単に定義できるように、「Some text」のまわりに無名ブロックボックスがあると仮定します。

Some text Some textssssssssssssssssss ssssssssssssssssssssssssssssssss Some text

More text Some textssssssssssssssssss ssssssssssssssssssssssssssssssss

DIV text Some textssssssssssssssssss ssssssssssssssssssssssssssssssss SPAN Some text

P More text Some textssssssssssssssssss ssssssssssssssssssssssssssssssss

▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-21
authorアセンブラの魔女
headlineCSSのブロックレベル要素とブロックボックスに関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywordsブロックレベル要素
keywordsブロックボックス
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel