盒模型-padding

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」第16天，点击查看活动详情

盒子尺寸模型的基准有两种： 一种是 content-box，另一种是border-box。

content-box顾名思义就是以内容为基础的盒子模型，它也是css盒子中默认的模型， 我们对内容初始大小多少，之后呈现的就是多少，不会产生自适应，也就是

width = 内容的宽度
height = 内容的高度

这个以内容为先，给内容大小设置了极大宽容的模型有时候会产生许多问题，比如下面

 <div class="father">
        <div class="son"></div>
 </div>

.father{
  width:200px;
  height: 100px;
  background-color:indianred ; 
}
.son{
  box-sizing: content-box;
  width: 100%;
  height: 40px;
  background-color:blue;
}

倘若我们在width100%的情况下再加入$padding: 0px$ $20px;$

.father{
  width:200px;
  height: 100px;
  background-color:indianred ; 
}
.son{
  box-sizing: content-box;
  width: 100%;
  height: 40px;
  padding:0px 20px;
  background-color:blue;
}

就会变成下面这种样子

同时在content-box下，一个元素的$总高度=heigtht + border + padding$也就是说 元素如果在盒子无法容纳自身时，会通过padding将原来盒子撑大

broder-box盒子模型强调的是自适应性，也就是

它所产生的盒子内容会根据元素总大小和边框大小进行综合计算

但broder-box盒子模型有时候也会有不太好时候，如果当一个盒子较小时，这个时候padding设置的还比较大，那么内容物就会受到挤压。 与之恰相反的content-box就会把空间撑大，让文本显得不那么拥挤