box-sizing：border-box_box-sizing: border-box;-优快云博客

本文链接：https://blog.youkuaiyun.com/mmcrsx_blog/article/details/80327675

本文详细解释了CSS属性box-sizing:border-box的应用方式及其优势。在传统盒子模型中，设置的宽度仅指内容区域，不包括边框和内边距，这可能导致布局复杂。通过使用box-sizing:border-box，设置的宽度则包含内容、内边距和边框，简化了布局过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-sizing：border-box在css布局中是一个很好的应用

一、盒子模型

严格模式下：

padding + border + width（content）= 盒子的宽度

padding+ border + height（content） = 盒子的高度

实际设置的width，height是内容区宽度,高度

这意味着，如果我们设置一个宽度为200px，而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪，CSS设置的宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似

这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候，我们需要减去它的左右边框和左右补白，然后设置为对应的CSS宽度。太过麻烦。例如上图，我们设置希望盒子宽度为200px，则需要先减去左右补白各20px，左右边框各1px，然后设置对应的CSS宽度158px。

二、box-sizing：border-box

width（盒子的宽度）=content+padding+border

height（盒子的高度）=content+padding+border

我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。

实例一：

 
  < 
  div 
  class= 
  "first-face" 
  > 
 
 
  < 
  image 
  class= 
  "photo" 
  src= 
  "http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png" 
  ></ 
  image 
  > 
 
 
  </ 
  div 
  > 
 

 
  .first-face{ 
 
  box-sizing: 
  border-box; 
 
  padding: 
  20px; 
 
  width: 
  300px; 
 
  height: 
  300px; 
 
  border: 
  20px 
  solid 
  #000000; 
 
   } 
 
  .photo{ 
 
  width: 
  150px; 
 
  height: 
  150px; 
 
   }