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截圖