处理盒子塌陷
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;
}