CSS注意的地方

content-box和border-box的區別

2018年02月27日 22:20:16?sulingliang?閱讀數：8011

• 盒子模型?
  盒子寬度：padding+border+content-width?
  盒子高度：padding+border+content-height?
  如圖所示?

  
  盒子模型

  ?

• content-box?
  說明：在內容寬度和高度之外繪制內邊距和邊框

• border-box?
  說明：在已設定的寬度和高度之內繪制設定元素的邊框及內邊距

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

結果截圖

• content-box截圖?
  盒子寬度：1×2（border×2）+10×2（padding×2）+100(content-width)=122?
  盒子高度：1×2（border×2）+0×2（padding×2）+100(content-height)=102

?

content-box截圖

?

• border-box截圖?
  盒子寬度：1×2（border×2）+10×2（padding×2）+78(content-width)=100?
  盒子高度：1×2（border×2）+0×2（padding×2）+98(content-height)=100

?

border-box截圖

?