boder sizing：boder-box的使用意义

调CSS有时候感到总和设计图有出入，有的时候甚至是直接把图上的内容拷过来也不像。感觉自己的div莫名大了或者调了居中确不居中。其实有时候问题是你在挑样式的时候，把div元素看做盒子，你在加padding或者boder时，实际上会拉伸这个盒子的长度或者高度。

没有进行设置的CSS的高度和宽度默认数值如下：
width + padding + border = actual width of an element
height + padding + border = actual height of an element

这时候可以用到一个CSS属性叫做box-sizing，它在MDN和w3cschool上有解释说明和例子：
地址如下：
w3cscholl:https://www.w3schools.com/css/css3_box-sizing.asp
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

boder-sizing属性的作用就是，被修饰的元素的外边距为0，所有的boder和padding距离都是在盒子里边进行的。
进行了boder-sizing：boder-box修饰元素的宽度是不变的，这对移动端一些机器限制页面不能扩张，只能在固定大小的区域内显示很有作用。文档上建议所有的WEB开发者将boder-sizing设置为boder-box。有了boder-sizing：boder-box你就不用担心你的页面元素无论是单个的DIV还是这个page会被boder和padding拉长，你可以不用担心尽情试用boder和padding不用担心其造成的显示效果的出入。