box-sizing属性疑惑

同学你好，解答如下：

1、box-sizing起到的作用与overflow:hidden不一样。

box-sizing的作用是，改变盒模型的计算方式。设置该属性后，如果元素设置了padding，该padding会包含在设置的width、height内，即元素的实际尺寸就等于设置的width和height，不会因为设置了padding而超出：

而overflow:hidden的作用是“超出隐藏”，即超出width、height的内容，会被隐藏看不到。

2、两个属性意义不一样，因此使用overflow:hidden，可能无法解决问题。例如：当info中内容很多时，使用overflow:hidden可能会出现部分内容看不到的情况：

此时还是使用box-sizing比较好。

3、可以不使用这两个属性，直接调整宽高就行。例如：

祝学习愉快！​

同学你好，主要原因在于.info这个元素设置了固定的宽高：

如果不设置box-sizing: border-box属性，则padding样式会导致元素实际的宽高大于设置的width、height，从而尺寸超出：

因此需要加上box-sizing: border-box属性。

祝学习愉快！