盒模型的初步认识
盒模型简单的来说就是一个盒子，它从内到外由 外边距margin border边界 padding内边距 内容尺寸width/height 四种基本样式组成的。
它的内容尺寸大小由宽高决定，它的盒模型尺寸大小由宽高和padding，margin决定，而它的盒模型区域由宽高，padding，border，margin决定的。
盒模型分为标准盒模型和怪异盒模型
1.标准盒模型
标准盒模型
代码
标准盒模型：盒模型大小=width/height + padding + border + margin,浏览器默认的是标准盒模型。
上图的样式是：�width: 100px; height: 100px; padding: 10px; border: 5px ; margin: 10px;
2.怪异盒模型
怪异盒模型
代码
单看盒子的话看不出来有什么区别，但看代码的话就能看出些什么了，代码中设置的宽度和高度都是100px,但在盒模型中却变成了70px;其实不是宽高发生了变化，而是盒子的padding和border挤压了宽高，所以在怪异盒模型下宽高包括了padding和border，�故盒模型大小=width/height+margin.
css有个box-sizing样式设置和模型的类型；
1.box-sizing: content-box; 设置的盒模型为标准盒模型；
2.box-sizing: border-box;设置的盒模型为怪异盒模型；
�在我看来，html每个标签都是一个盒模型，整个网页也是由一个个大小不同的盒模型组成的，每个前端开发工程师必须得对盒模型的内部结构有深刻的了解，只有这样才能把握网页的布局，和遇到问题时能很快找到原因。
