盒模型、标签分类及转换(2)

二、margin值出现的问题

问题一：margin塌陷

出现场景：当盒子是嵌套关系时，并且父元素身上没有padding，没有border、没有overflow属性时

就会出现塌陷问题 （只有上方会有塌陷）

解决方案：

1、给父元素加 padding-top:0.5px;
2、给父元素加 border-top: .5px solid transparent;
3、给父元素加  overflow：hidden; （溢出隐藏）

问题二：margin重叠

出现场景：

当盒子是兄弟关系，两个盒子的margin-bottom和margin-top碰到一起的时候出现 (谁的间距大就用谁的)

解决方案：

   只给其中一个盒子设置即可。

三、overflow属性

            overflow:hidden; 溢出隐藏
            overflow: scroll; 溢出出现滚动条（不管溢出不溢出都有滚动条）
            overflow: auto; 根据内容决定显示不显示滚动条
            overflow: visible; 默认值 

四、标签的分类

4.1 块级标签

div、p、h1-h6、ul、li、ol、dl、dt、dd、table、

特点：
1、宽度默认占父级的100%。可以设置宽高。
2、自己独占一行
3、可以设置四周的内外边距

4.2 行级标签（内联标签）

span、strong、b、em、i、sub、sup、a、del

特点：
1、内容多宽就占多宽，不能设置宽高
2、可以和其他的行级标签一行排列
3、不能设置垂直方向的内外边距

4.3 行内块标签（内联块标签）

img、input、select、textarea

特点：
1、内容多宽就占多宽，可以设置宽高
2、可以和其他的行级/行内块标签一排排列
3、可以设置四周内外间距

4.4 标签之间显示模式可以相互转换

display: block;  转换成块标签
display：inline； 转换成行级标签
display：inline-block； 转换成行内块标签