盒子模型

盒子模型

两种盒模型：

1.内容盒子：content-box
标签内容的大小不变，标签的 总宽度 = 内容的宽+内边距+边框的总和
2.边框盒子：border-box
标签的总宽度保持不变，把内边距和边框的大小计算在内容的大小之内

组成元素：

margin ：边框与其他盒子的距离 margin变大 盒子不会变化，盒子与盒子之间的距离会变大
padding ：是边框与内容区域的距离 标准盒子 padding变大 盒子变大
border： 盒子的边框
content ：标准盒子 为 width 和height

ie盒子：

content =  width - padding-left  - padding-right - border-left - border-right

注意：在ie 盒子中 border 与 padding变化不会改变盒子大小，会改变内容大小。

1. 外边距塌陷问题：
   上下两个盒子；小的外边距被大的外边距吸收了
   针对两个上下相邻的盒子，盒子距离为大的外边距
   左右相邻盒子之间距离为 外边距之和
   总结：外边距塌陷只会发生在上下盒子之间；不发生在左右盒子之间 换句话说：上下盒子距离为大的外边距；左右盒子距离为两个盒子外边距之和
2. 块元素；默认有8px的外边距
   注意：为了防止浏览器默认值影响页面效果；在初始化时候清空所有元素默认样式