实例（二）实现小米商城的产品卡片

项目场景：

学习来源：黑马前端p29-33
学习内容：基础实现小米商城的产品卡片

---

问题描述

1.VScode输入 ！无法自动生成html模板问题
2.为什么要将a标签转换成块元素？
3.为什么要使用box-sizing: border-box ?
4.如何让图片居中？
5.如何让产品标题居中？
6.margin：0 auto; 和 text-align：center 的区别？
7.如何隐藏多出去的字并省略为…？
8.如何设置以前设置的文本，但要用删除线表示出来？

---

解决方案：

1.好像改版了，输入 html:5 可以生成
2.将a块元素，就可以把它转换成一个可以点击的超链接盒子，可以在里面装东西
3.(1)没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高
(2)加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
4.使用margin:0 auto; 但是一定要先设置宽
5.使用text-align：center；
6.区别如下:
（1）text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
（2）margin:0 auto 设置块元素（或与之类似的元素）的居中。
7.white-space: nowrap; 所有的文本都显示在这一行
overflow: hidden; 超过指定的宽度和高度也隐藏
text-overflow: ellipsis; 多余的文本用省略号显示

p{
   
  text-align:center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  }

8.< del >标签：定义文档中已被删除的文本，del是行内元素

代码实现

css:

   /* 清除页面的内外边距 */
        *{
   
            margin: 0;
            padding: 0;
        }

        /* 设置页面背景颜色 */
        body{
   
            background-color: #f5f5f5;
        }

        /* 给盒子设置背景颜色