盒模型和box-sizing

盒模型

每个块级元素可以看做一个盒子 
它有content,padding,border,margin 
content就是它能装的东西，padding可以理解做为了防止盒子里东西被摔坏放的塑料板泡沫板之类的东西 
border就是盒子本身 
margin是个盒子之间的缝隙，可以看做是为了方便取盒子留下的缝隙 
另一点需要说明的是，我们通过JavaScript代码获取某一个元素的大小时，所得到的width和height其实是盒子模型中的content的大小

---

box-sizing

box-sizing有三个值

content-box	w3c标准盒模型	其中content-box指的是，元素的width属性值等于该元素内容的宽度，不加上padding和border，实际上能盛多大的东西它就是多大
border-box	IE传统	border-box指的是，元素的width等于元素内容宽度+左右padding值+左右border值
inherit

盒模型的使用场景： 
设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了