盒模型的初步认识

盒模型简单的来说就是一个盒子，它从内到外由 外边距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每个标签都是一个盒模型，整个网页也是由一个个大小不同的盒模型组成的，每个前端开发工程师必须得对盒模型的内部结构有深刻的了解，只有这样才能把握网页的布局，和遇到问题时能很快找到原因。