content-box和border-box区别以及应用场景

content-box和border-box区别以及应用场景【保证一看就彻底懂了】

首先这两个是什么？

他们是css box-sizing的两个值，是两种不同的盒模型，用content-box，元素的宽高就等于width和height的值，他的宽高不受padding,border的影响，而用border-box，元素的宽高是受padding,border影响的，元素实际宽度是等于width-padding左右-border左右，也就是当width不变，padding/border发生变化时，内容的宽高是会相应的变化的。话不多说，撸代码示例及效果截图，这样大家一看便能理解了。

为了保持参照，便于大家更好的理解，写两个不同的样式，除了box-sizing属性不同，其他属性全部相同

// html部分
<div>
      <div class="content-box">1</div>
      <div class="border-box">1</div>
</div>
// css部分
<style lang="stylus" scoped>
.border-box
  background yellow
  width 300px
  height 100px
  box-sizing border-box
  margin 20px
  padding 30px
  border 10px dashed #000
.content-box
  background skyblue
  width 300px
  height 100px
  box-sizing content-box
  margin 20px
  padding 30px
  border 10px dashed #000

效果图：
蓝色背景的div,box-sizing值为content-box，设置padding和border没有影响元素本身的width和height，但内容整体会因为padding和border变大（右下角红色框框里面的）
蓝色背景的div,box-sizing值为border-box，设置padding和border影响元素本身的width=220=300-30✖️2-10✖️2和height=20=100-30✖️2-10✖️2，但内容整体大小不变（右下角红色框框里面的）

使用场景

综上所述，很容易发现，border-box更适合在水平布局有多个div，然后各占50%，然后不管你怎么设置border和padding，横向布局都不会因此被挤到下一行，之前看有的博客说这个是怪异盒模型，让我对它产生了深深的无解（内心os:怪异盒模型，既然那么怪异，我就不用它了），但真正了解之后，我真的要给大家安利border-box了。至于content-box一般的div默认的box-sizing都是这个属性，所以大家应该很了解它了，我就不细说了。如果看完这篇独特的博客，你还不懂，请私信我或留言给我，如果看完这篇博客，你能真正理解border-box和content-box那请给我点赞哦，ღ( ´･ᴗ･` )比心