CSS 盒子模型
所有HTML元素都可以看作一个盒子
盒子模型的元素:边距,边框,填充,内容
元素说明:
Margin(外边距):清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
<div>
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
</div>
简写:
<div>
margin:10px 20px 30px 40px;
</div>
Border(边框):围绕在内边距和内容外的边框
<div>
border: 20px solid red;
</div>
Padding(填充):定义元素边框与元素内容之间的空间,即上下左右的内边距
<div>
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
</div>
简写:
<div>
padding:10px;20px;30px;40px;
</div>
Content(内容):盒子的内容,显示文本和图像。
元素的计算公式:
总元素宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距