css box-sizing

原文来源: 老姜博客 css第24讲之css box-sizing

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;
}

在线试玩