一、静态页面 margin-top塌陷解决方法
1.当我们页面布局时,经常会遇见margin-top塌陷问题
margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父div包裹着一个div的时候,当给子div设置margin-top属性时,此时只是想让子div的边框距离父div边框有一段距离,而却出现了父div的顶端距离出现了位移,这就是margin-top塌陷的现象。
常用的方法
1.给父盒子设置溢出隐藏 overflow:hidden;
2.这个时候不要纠结,既然外边距用不了,就直接用内边距就行(这个时候要注意, 使用内边距时,会把父盒子撑开,解决方法第二点)
##二、padding把盒子撑大 解决方法
当我们给一个盒子加入内边距时盒子会变大,这时会影响我们静态页面布局
解决方法
在该盒子中设置一个属性
box-sizing: border-box;
它会使盒子不再变大。