标准盒模型和怪异盒模型的区别及box-sizing应用场景

本文链接：https://blog.csdn.net/qq_44686225/article/details/88969587

一:标准盒模型和怪异盒模型的区别
标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大
怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度
如下实验:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   .std{
    width: 100px;
    height: 100px;
    background: yellow;
    border: 1px blue solid;
    padding: 10px;
    
   }
   .spec{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background: pink;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="std">
    hello
  </div>
  <div class="spec">
   hello

  </div>
 </body>
</html>

效果如图所示
第一个是标准盒模型,width设置的是100px,但是由于给出了padding,所以盒子被撑大了,而第二个怪异盒模型没有

二:box-sizing的应用:
box-sizing:border-box;是怪异盒模型
box-sizing:content-box;是标准盒模型
据上面实验也看到了,如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型