什么是盒模型？盒模型的组成都有哪些

盒模型概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)

作用：控制元素和元素之间，或者元素和内容之间的位置关系。
不同部分的说明：
content(内容)：盒子的内容，显示文本和图像。
border(边框)：围绕在内边距和内容外的边框。
padding(内边距)：清除内容周围的区域，内边距是透明的。
margin(外边距)：清除边框外的区域，外边距是透明的。
盒子的大小怎么计算呢？
我们举个实例：如下图所示

它的效果图是这样的：

Margin是显示元素边框之外的区域，不会把元素撑大所以计算元素大小时不应该算上margin的值。
总元素高度=内容区宽度+左填充+右填充+左边框+右边框
=300+30+30+5+5=370；
总元素高度=内容区高度+上填充+下填充+上边框+下边框
=200+30+30+5+5=270；