之前总是遇到有时候设置高度宽度,但是加上padding、border后就会改变,有时又不会改变的情况。
现在终于明白了,因为有这个属性-box-sizing。
box-sizing:border-box | content-box | inherit
box-sizing从字面意思可以认为是盒子尺寸,就是说设置盒子尺寸时遵照的类型。
border-box:设置宽高直接设定了盒子的宽高,padding、border在这个设定的宽高边界内操作。即padding、border不影响盒子尺寸大小。
content-box:设置宽高只设置盒子内容的宽高,padding、border会对盒子整体宽高有影响。
inherit:从父元素继承box-sizing。