20160117

送给自己个生日礼物,canvas 小画板 ~

box-sizing

参考:MDN && learnlayout.com

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

box-sizing 属性用于计算元素宽度和高度,可以用这个方法来控制不正确支持 css 盒模型规范的浏览器。

content-box(默认属性):width 和 height 只包含内容部分,不包括 padding border 和 margin,这三个将在盒子的外部
e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}
border-box:width 和 height 属性将包括 padding 与 border,但是没有 margin。
e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px.