盒模型总结

一、什么是盒模型

每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成。

二、组成

1、width 宽度

2、height 高度

3、padding 内边距：

①1~4个值

②顺时针开始，从上开始，上右下左

③增加盒模型面积

4、border 边框

①复合属性：border-width，border-style，border-color

②增加盒模型的面积

③通过border-radius可将图形设置成圆角，经过一系列变化可变为三角形等形状

5、margin 外边距

①1~4个值

②顺时针赋值，从上开始，上右下左

③叠压现象：常态下，兄弟标签间的上下间距以大值为准

④塌陷问题

a、原因：常态下，父级的第一个子级标签是块标签，并且使用了margin或者margin-top

b、解决方案：

①不使用margin-top，在父级使用padding-top

②在父级使用border

③在父级使用overflow：hidden（溢出隐藏）

三、怪异盒模型

正常盒模型向外扩展，怪异盒模型向内压缩