[前端]CSS 02 需求记录

现在有些阴差阳错地成为了一个前端攻城狮的，本着干一行爱一行的精神，加上我也挺喜欢前端的，在这里记一下学中做的CSS知识点。

Steven-Zhl 头像
[前端]CSS 02 需求记录

这是一份以需求为导向的CSS学习记录，记录一些我遇到的CSS方面的需求及实现。

对于卡片(div)中嵌入图片(img)的实现方式对比

  1. 首先有一个最简单的实现：
<div class="card"></div>

<style>
    .card {
        width: 100%;
        height: 40vw;
        border-radius: 25px;
        background-image: url("/images/default_cover.webp");
        background-size: cover;
    }
</style>
  1. 还有接下来的这种方式
<div class="card">
    <img src="/images/default_cover.webp" class="card_img" >
</div>

<style>
    .card {
        width: 100%;
        height: 40vw;
        border-radius: 25px;
        overflow: hidden;
    }
    
    .card .card_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
item_description
  • 虽然第2种的代码更长，但我还是推荐第2种写法。虽然在后端开发中通常严格奉行“奥卡姆剃刀”法则，但根据我的体验看，在前端中结构稍微复杂一些并不算什么坏事。
  • 理论上第2种写法会稍微增加渲染时间，但实际上根本感觉不到。
  • 然后带来的好处却十分明显：
    1. 首先是可以对元素进行更细粒度的控制(比如分别给div和img添加不同的EventListener)
    2. 其次是<img>的alt属性在HTML中会以警告的形式要求(非强制)，这使得大多数前端开发者都会考虑到添加alt信息，而这对于SEO是有好处的。