<style>.box {/* box-sizing 属性是防止盒子由于边框和内边距被撑大 */box-sizing: border-box; width: 100px;height: 100px;background-color: pink;border: 10px solid skyblue;/* 行高等于盒子高度 是为了使文字垂直居中 */line-height: 100px;}</style>
<body><div class="box">文字</div></body>
上述代码的结果：
发现文字并没有垂直居中
文字垂直居中的原理：
line-height(行高)=文字高度+上空隙+下空隙 （ 上空隙=下空隙）
当line-height=height 的时候 文字被挤到中间，就是垂直居中
box-sizing: border-box：
box-sizing 属性是防止盒子由于边框和内边距被撑大
增加该属性后 height=height（原来的）+padding+border
如果有padding值和border边框值
此时line-height=height(现在的) 后，文字并没有被挤到中间，而是偏下
解决办法：
line-height的值等于原来的height值（现在的height值-padding-border）
