css设置一个div显示在另一个div的上层_CSS工程中常见问题-1

1. 图片下方会产生几像素的空白

代码：

// html
<div class="zls">
    <img src="../imgs/zls.jpg" />
</div>
// css
.zls {
    
    border: 1px solid #f00
}
.zls img {
    
    width: 200px;
    height: 200px;
}

显示结果如下所示：在div包裹的img中，img下面会产生几像素的空白，原因是img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符

解决办法：

1. 设置img样式为 `vertical-align: middle;` 或者 `display: block;`
2. 设置父级元素为`display: flex;`

2. 超链接的颜色设置顺序

a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f00;}
a:active{color:#ccc;}