てんぽ: コンテナブロック(包含ブロック)とは

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

コンテナブロック(包含ブロック)とは

2006年11月03日(金)

クイズの解答の前に、コンテナブロックについて。

Containing blocksのことを自分は「コンテナブロック」(あるいは単に「コンテナ」)と言ってきましたが、日本語では包含ブロックとしたほうが一般的なのかもしれません。 ともかく、CSSでレイアウトを行ううえでは包含ブロックを意識することが大切です。

包含ブロックの定義は以下を参照してください。

とくにこんな場合には包含ブロックを意識したほうがいいでしょう。

  • position:absoluteを使うとき。たとえばleft:100pxなら該当ボックスの左マージン辺を包含ブロックの左辺から100px離す。
  • floatを使うとき。たとえば右フロートはその右マージン辺が先行するフロートのマージン辺か包含ブロックの右辺に接するまで右に寄せられる。
  • marginを使うとき。たとえば通常フローのボックスの左マージンは前後にフロートや絶対配置ボックスがあっても包含ブロックの左辺からの距離である。

また、こんな等式があることも覚えておいたほうがいいでしょう。

通常フローの非置換ブロックレヴェル要素

他のプロパティの使用値との間で次の等式を常に成立させなければならない:

  • 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + (もし在ればスクロールバーの幅) = 包含ブロックの幅
#115
カテゴリ:HTML・CSS
タグ[ CSS ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/115-6dc863b0

<<CSSクイズ ブロックボックスの右寄せ | ブロックボックスの右寄せの解答>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。