CSS指摘

そして、ボーダーボックスのコンテンツボックスの違い

2018年2月27日午後十時20分16秒  sulingliangは 読み込み：8011

 

• ボックスモデル 
  ボックスの幅：パディング+ボーダー+コンテンツ幅の 
  ボックスの高さ：パディング+ボーダー+コンテンツの高さ 
  に示します。 

  
  ボックスモデル

   

• コンテンツ・ボックスの 
  説明：コンテンツに加えて、パディングとボーダーの幅と高さを描きます

• ボーダー・ボックスの 
  説明：セットの幅と高さの中にセットボーダーやパディング要素を描画

CSS

.content-box{
    width: 100px; height: 100px; border: 1px solid; padding: 0px 10px; box-sizing: content-box; } .border-box{ box-sizing: border-box; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

HTML

<div class="content-box">content-box</div>
<div class="content-box border-box">border-box</div>

• 1
• 2

スクリーンショットの結果

• コンテンツボックステーマ・ 
  ボックスの幅：1×2（ボーダー×2  ）+ 10×2（2×パディング）+100（コンテンツ幅）= 122
  ボックスの高さ：1×2（ボーダー×2 ）+ 0×2（パディング×2）+100（コンテンツ高さ ）= 102

 

コンテンツボックスショット

 

• 境界ボックステーマ・ 
  ボックスの幅：1×2（ボーダー×2  ）+ 10×2（2×パディング）78（コンテンツ幅）= 100
  ボックスの高さ：1×2（ボーダー×2 ）+ 0×2（パディング×2）+98（コンテンツ高さ ）= 100

 

ボーダーボックスショット