CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
Margin(外边距)-清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
<div class="box1"></div>
.box1{
height: 200px;
width: 200px;
background-color:yellow;
padding: 50px 100px;
margin:40px 50px 60px 70px;
border: 1px solid black;
}
有光盒子模型的计算
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
在box1中:
总元素的宽度=200+100x2+1x2+70+50=522px
总元素的高度=200+50x2+1x2+40+60=402px