《CSS学习笔记》-box-sizing属性

这是网上别人分享的一道2021美团前端面试题，问的是以下代码【红色区域】高度和宽度分别是多少？

#test {
  width: 100px;
  height: 80px;
  border: 20px solid red;
  background-color: red;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
}

先来回顾一下CSS盒模型，这里截取的是菜鸟教程上面的介绍的一部分，网上关于盒模型的介绍很多，大家可以搜来看看：

由于背景颜色会填充元素的内容content、内边距padding和边框区域border，扩展到元素边框的外边界（但不包括外边距），此时就有可能认为【红色区域】的尺寸是 width/height + padding*2 + border*2。真的这么简单吗？

这里的 width: 100px;和 height: 80px; 代表的是整个盒模型的宽和高，还是元素内容的宽和高呢？

最后一行box-sizing: border-box;表示的是什么意思呢？下面是加和没加最后一张的对比效果图！左边是加了的，右边是没加，为了方便对比这里把边框颜色换成了绿色，可以明显看出来两个的去别的，没加的大了一圈！

这就是本题的重点了！box-sizing属性是什么？说实话，这个咋一看我还没啥印象，就知道基础没打好了，赶紧搜了网上大佬们的解释，指路大佬：https://www.cnblogs.com/jackzhoumine/p/CSS3.html

简单的总结一下可以大致分为两类：

第一种：content-box
此时定义的 width 和 height 仅仅是元素内容content的尺寸！

第二种：border-box
这里定义的 width 和 height 不仅仅包括元素内容 content，还包括 内边距padding 和 边框border！！

其实还有一个 padding-box，但是好像用的不多，这里就不介绍了吧。感兴趣的可以去上面的那个链接里看看，很详细。

现在在回到题目本身， width: 100px;和 height: 80px; 定义的宽高就是对应的【红色区域】的宽和高了！并且还能知道这时候元素内容的宽高是200px*0px。如下图所示：

最后的碎碎念，基础打扎实真的很重要，个人建议是先跟着视频看一遍，再去找对应的文档巩固对应知识点！不然文档内容很多，没有重点的全部看稍微有点看不下去，当然不排除喜欢看书的同学哈哈！相逢就是缘，大家加油！