html-盒模型

在html中页面的布局可以看做是一个个块的布局，整个布局由多个块组成，每个块元素都有相同的属性，这些属性决定了布局方式，把它们统一抽象到一个盒模型中来分析，了解盒模型，让我们对布局更加透彻。

.

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

box-sizing: border-box;可以改变盒模型状态，使盒子的总宽高固定为宽高的设置值。

关于盒模型的外边距重叠

1.外边距左边和上边自己都会位移，右边和下标会把其他元素推开

2.相邻的块外边距会重叠，如果外边距都是正值则选大的，一正一负就取合，都是负选择绝对值大的

3.子级如果和父级之间没有非空的东西隔着，子级的外边距会传递给父级。