盒子塌陷

157 阅读1分钟

处理盒子塌陷

1.给父盒子添加overflow属性。 overflow:auto; 有可能出现滚动条,影响美观。 overflow:hidden; 可能会带来内容不可见的问题。

2.父盒子里最下方引入清除浮动块。最简单的有:
有很多人是这么解决的,但是我们并不推荐,因为其引入了不必要的冗余元素 。

3.after伪类清除浮动。 外部盒子的after伪元素设置clear属性。

4.给盒子设置高度

属性选择器

选取含有src的img图片

 img[src]{

            width: 200px;height: 200px;

         } 

    选取含有src=./1.jfif 的img图片

 img[src="./1.jfif"]{

            width: 200px;height: 200px;

        } 

          选取含有alt以图字开头的img图片

 img[alt^=图]{

            width: 200px;height: 200px;

        } 

       选取含有alt以中字结尾的img图片

 img[alt$=中]{

            width: 200px;height: 200px;

        } 

          选取含有alt中包含加字的img图片

 img[alt*=加]{

            width: 200px;height: 200px;

        }

后代选择器

#a的所有子集li 加上红色边框\

#a>li{border: 1px solid red;

        }

#a的所有后代li 加上红色边框**

        #a li{

            border: 1px solid red;

        }