在网页中,所有HTML元素都可以看作盒子,并且我们可以用css来修饰它。
在此之前先了解几个概念:
- 块级元素:如<div>、 <p>、<h1>等。块级元素本身新占一行,当前元素结束后的下一个元素另起一行。并且元素的高度、宽度、行高以及顶和底边距都可设置。(不设置的话,和父元素的宽度一致)
- 内联元素:如<span>、<a>、<label>、 <strong> 等。和其他元素在同一行,并且元素的高度、宽度及顶部和底部边距不可设置。(元素的宽度即元素本身的宽度大小)
- 内联块状元素:如<img>、<input>等。和其他元素都在一行上,并且元素的高度、宽度、行高以及顶和底边距都可设置。
下面来看盒模型的示意图
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。