[JavaScript知识库]盒子模型box-sizing

box-sizing: content-box;盒子的宽度= width+padding+border

box-sizing: border-box：盒子的宽度= width

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 10px;
      border: 10px red solid;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: yellow;
      padding: 10px;
      border: 10px red solid;
      
    }

<div>小猪
    <p></p>
  </div>

calc可以+ - 乘除

.fa {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .son {
      width: calc(100% - 30px) ;
      height: calc(100% - 30px) ;
      background-color: yellow;
    }


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

效果图：子盒子宽高少于父盒子30px

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖