CSS/CSS3的盒模型

在网页中，所有HTML元素都可以看作盒子，并且我们可以用css来修饰它。

在此之前先了解几个概念：

1. 块级元素：如<div>、 <p>、<h1>等。块级元素本身新占一行，当前元素结束后的下一个元素另起一行。并且元素的高度、宽度、行高以及顶和底边距都可设置。（不设置的话，和父元素的宽度一致）
2. 内联元素：如<span>、<a>、<label>、 <strong> 等。和其他元素在同一行，并且元素的高度、宽度及顶部和底部边距不可设置。（元素的宽度即元素本身的宽度大小）
3. 内联块状元素：如<img>、<input>等。和其他元素都在一行上，并且元素的高度、宽度、行高以及顶和底边距都可设置。

下面来看盒模型的示意图

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。