盒模型要点知识一定要注意，这是前端面试肯定会遇到的问题。box-sizing盒子模型的主要CSS属性除了继承还有两个值：content-box历史原因这里就不细说了，只说它的作用。content-box表示标签元素占用物理像素面积的计算方式为：宽高+内边距+边框+外边距border-boxborder-box表示标签元素占用物理像素面积的计算方式为：宽高，内边距，border的最大值+外边距这里所说的宽高是CSS属性的宽高，或者说子标签支持的尺寸。其他三个相关属性介绍如下。填充。首先，如果您考虑一个内部有一个较小盒子的立方体盒子，则内部盒子和外部盒子之间的区域就是内部填充。将其改为HTML标签可视化如下：红色区域为内边距border（边框）为字面意思，其HTML可视化如下：黑色为border边距（margin）margin为距离标签之间或注释与父标签之间的边距距离。严格来说与标签大小无关，只是影响视觉位置。HTML的可视化需要调试指出，如下：最外面的黄色区域是margin。注意：margin可以是负数；内联标签的上下边距无效。如果你真的理解了上面的概念，下面的图解和解释详细解释了标签尺寸的具体计算方法。这里要注意，标签尺寸指的是物理像素尺寸，不是上面说的物理像素面积。占用大小为实际像素值，占用面积包括边距。注意计算的时候padding和border都有四个边。border-box的官方定义是padding和border都算作width和height。理解上有歧义，可以直接取值作为wh、padding、border的最大值。小建议实际使用强烈推荐使用border-box。在实际工作或项目中，自定义padding和border后修改这两个值的可能性远低于不修改的可能性，所以border可以使用border-boxfor-box,*{box-sizing:border-box;}可能是个好习惯。否则UI会丢给你一个80*80像素大小的样式，你可以自己拆分。源码相关CodePen如果文章对你有帮助，我将非常高兴。喜欢文章请关注我，定期发布技术相关文章，干货满满。
