css怪异现象合集

一、margin上塌陷解决方案(无中生有的margin-top)：

1.父级元素设置padding-top:1px;//最不靠谱的解决方案

2.父级元素设置 overflow: hidden; 或者 overflow:auto; 或者 overflow: scroll; //最现实的解决方案

3.父级元素设置display: table;//不太靠谱

4.父级元素设置 display: inline-block;//不太靠谱

5.父级元素设置display:flex;//不太靠谱

6.父级元素设置position: absolute;//最坑爹的解决方案

 

二、无缘无故出现的元素之间的间隙

1.设置当前元素 font-size:1px;

2.去除元素之间的换行

3.img元素有的会莫名的出现几px的留白，可以修改display属性，任何属性都可以去除，只要不是inline

 img{

　　display:flex;

}

三、img元素的伪元素之after、before

这两个伪元素对于img看似无效，当图片加载失败的时候会生效

四、body宽度1920横向仍然显示滚动条：

当内容纵向超出的时候需要显示滚动条，滚动条占17px左右的大小，所以就超出了1920px的大小，于是横向显示滚动条

解决办法：

（推荐）

body::-webkit-scrollbar {

  display: none;

}

 或者：

(不推荐)

body{

width:1920px;

overflow-x:hidden;

}