一、前言

实现一个很常规的功能，鼠标停留出现3个像素的上边框，然而鼠标停留后出现了抖动，审查元素后发现是三个像素撑起了这个元素，将其余元素向下挤，才出现了这个抖动，一个比较常用的解决办法是先给元素一个3像素transparent背景的上边框，鼠标停留在将背景色改为其他颜色。这样就不会撑大元素

后来又想起来有个box-sizing，好像也可以做到，于是尝试了一下确实可以，看了一下mdn文档中对于box-sizing的描述, 做一个记录

二、正文

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

user agent可以理解为浏览器，其中box-sizing有两个值，一个是content-box，另一个是border-box

分别介绍这两种

box-sizing属性

1. content-box

box-sizing属性的默认值，标准盒子模型（w3c盒模型），也就是width只表示内容的宽度，height表示内容的高度，整个元素的高度则等于 height + padding(上下) + border（上下） + margin（上下） ，同理宽度等于 width + padding（左右） + border（左右） + margin（左右），标准盒模型如下

2. border-box

怪异盒模型（IE盒模型），元素的padding和border是被包括在宽度和高度里面的，也就是说元素实际高度等于 height + margin（上下），元素的宽度等于 width + margin（左右），IE盒模型如下

应用

一般来说加了 <!DOCTYPE html> 声明就是选用标准盒模型，如果没声明则由浏览器决定选用哪种模型

不能说IE盒模型不好，两者各有用处，就像在前言中提出的问题，用box-sizing： border-box 就可以轻松解决，不针对具体业务场景谈这些其实没什么意义，IE盒模型中border和padding属于宽高部分，在布局上更轻松，而且很多UI比如bootstrap就是用的IE盒模型，其实原因也比较简单，因为栅格一般是通过百分比实现的，比如三栏就是控制每一栏的宽度为33.33%，而栅格还支持间距也就是padding，如果用标准盒模型，实现起来就很麻烦，因为这个padding会让每一栏的宽度超过33%

三、总结

日常开发中会出现各种小bug，不要放过这些看似简单的小bug。

要知道你和大佬之间的差距就在于大佬抓住这个小bug，刨根问题，究其原因，长此以往懂得越来越多

前段时间的面试也告诉我这个道理，一定要深究，面试官抛出的问题可能我能回答出来，但是如果将问题更深入一点，可能就会因为没考虑过而答不出来