box-sizing
:用来控制padding和border是否包含在width
和height
之中.
支持两种取值:
- content-box
- border-box
默认情况下,element的最终长度和宽度计算公式如下:
width
+padding
+border
= element最终的宽度height
+padding
+border
= element最终的高度
所以,当你设置width
和height
,其实最终的大小是大于你设置的(主要是padding和margin的值影响)
注意不要把margin
混在一起,margin
不参与计算
通过上面的例子可以看到,同样的width
和height
,最终的效果还是不一样的,所以这个设计工作带来一定的困难.
为了保障width
和height
的一致性,可以通过box-sizing
属性来改变对应的计算方式.
box-sizing
设置为border-box
可以控制实际的宽度和高度为指定的设置,主要通过向内挤压给content的空间.
通常页面css都会进行全局设置:
* {
box-sizing: border-box;
}