当青训营遇上码上掘金

引言

在这次项目中我选的题目是制作《我的名片》，锻炼近期学习的基本功，复习一下css。

题目描述

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

解题思路

这次我做的名片是模仿bilibili名片，具体效果如下。

具体的，我们先来解决HTML结构。我们可以把整个名片分为上下两部分，上面部分就是一个背景图片，下面部分就是我们的个人信息。

因此在这里我们就是可以这样设计。

<div class="user-card">
    <div class="user-card-master">
        <div class="user-card-master-head">
        </div>
        <div class="user-card-master-body">
        </div>
    </div>
</div>

然后我们在往uesr-card-master-head中插入image来渲染我们的背景。

<div class="user-card-master-head">
    <img />
</div>

这样我们上面的布局就完成了。

接下来是下面的布局，下面我们可以在依次划分，分为上面的信息部分，和下面的按钮部分。上面部分又可以分成左右两部分，头像部分和信息部分。

<div class="user-card-master-body">
    <div class="user-card-master-body-photo">
        <img>
    </div>
    <div class="user-card-master-body-info">
    </div>
    <div class="user-card-tail">
        <button>+关注</button>
        <button>发消息</button>
    </div>
</div>

接下来我们在往下看，信息部分比较多，我们将其再次划分，上面为姓名和等级，下面为其它一些信息。

因此我们的结构就变成了如此。

<div class="user-card-master-body-info">
    <div class="user-card-master-body-info-username">
        lyy
        <span>LV5</span>
    </div>
    <div class="user-card-master-body-info-item">
        <span>399</span>
        <span>关注</span>
        <span>27</span>
        <span>粉丝</span>
        <span>983</span>
        <span>获赞</span>
    </div>
</div>

🆗，到此为止，我们已经完成了整体布局。

接下来我们开始调整样式.

样式其实没什么好说的，重点给大家介绍一下box-sizing属性，这个属性在我们实际开发中经常使用。如果你是一个合格的切图仔，那你必须掌握。在这个卡片题目中我也用到了这个方法。

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。（不包含margin）

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

可选属性：

• content-box：默认值，表示不需要加上padding和边框
• border-box : 需要一起计算padding和边框
• inherit：表示box-sizing从父属性继承。

举个例子：

如果你创造了一个