二、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; 转换成行内块标签