前端基础：CSS　－－为啥小X出现是斜的，还要设三个字体？

clearwater · 发表于 2020-3-3 22:03

本帖最后由 clearwater 于 2020-3-3 22:16 编辑

这几天热心值比较紧张，所以本楼，我就挑1-2个回答正确，而且我能理解的答主，给他们评分了。希望没有被评分的大神勿怪，只要不是来灌水，不管是答对答错，我都表示感谢。（有时你们回答正确，可是我太笨拙，理解不了；答案雷同也不评分了。）

以下代码是我自己上基本照抄某前端视频课程里的代码。(附在本帖最后面）本节课讲的是web API 如何把某宝的一个二维码关掉.　里面的JS我没问题，我的问题是这里面的CSS问题。

1. 为什么一个小叉号（X）也要设置字体？我都要把这三个字体的英语名字都背下来吗？　见代码第30行

font-family: Arial, Helvetica, sans-serif;

2.　第39行　我自己抄的代码的小叉号（X）在网页上的效果，看起来是斜的。－－这个我也理解。因为我用<i>这个斜体的代码。
可是代码第40行也是小叉号（X）（我复制老师的代码，然后注释掉），但是看起来的效果，却是正的。我点击F12, 去查看老师的代码，在CSS中 i 并没有被划掉。

我觉得39行，40行的代码是一样的，为啥效果好象不同？

我把代码和图片都上传到度盘。
文件名：
14-关闭淘宝二维码案例　（老师写的）；
1.html （我抄的）　
链接：https://pan.baidu.com/s/1kWyhukJ5703G2JPHFW5pNA
提取码：xw2x

下面代码是我的。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 74px;
      height: 88px;
      margin: 100px auto;
      border: 1px solid #ccc;
      color: #f40;
      font-size: 12px;
      text-align: center;
      background-color: pink;
    }
    .box img {
      width: 60px;
      margin-top: 5px;
    }
    .close-btn {
      position: absolute;
      top: -1px;
      left: -16px;
      width: 14px;
      height: 14px;
      border: 1px solid #ccc;
      font-family: Arial, Helvetica, sans-serif;
      cursor: pointer;
    }
  </style>
</head>
<body>
   <div class="box">
    淘宝二维码
    <img src="images/tao.png" alt="">
    <i class='close-btn'>x</i>
    <!-- <i class="close-btn">×</i> -->
   </div>
   <script>
     var box = document.querySelector('.box');
     var btn = document.querySelector('.close-btn');
     btn.onclick = function() {
       box.style.display = 'none';
     }
   </script>
   
</body>
</html>

凌一笑 · 发表于 2020-3-3 22:15

X字体不一样

1085271662 · 发表于 2020-3-3 22:44

i标签本来就是斜体
清除默认样式

[CSS] 纯文本查看 复制代码

i{
font-style: normal;
}

wuyujiesong · 发表于 2020-3-3 22:53

本帖最后由 wuyujiesong 于 2020-3-3 22:58 编辑

真象只有一个，就是你输入的是小写的x，而老师的是乘号

clearwater · 发表于 2020-3-3 23:33

本帖最后由 clearwater 于 2020-3-3 23:36 编辑

wuyujiesong 发表于 2020-3-3 22:53
真象只有一个，就是你输入的是小写的x，而老师的是乘号

你真机智，被你发现辣。你是咋发现的，能告诉我吗？

那为什么乘号在i里不会变斜体字呢？

我在ＨＴＭＬ里　用i抱Ｘ包起来，还是一样会斜体呢

明天晚一点给您评分。现在手上没有能量，今天还欠两个人，还没给评分。

wuyujiesong · 发表于 2020-3-4 00:05

clearwater 发表于 2020-3-3 23:33
你真机智，被你发现辣。你是咋发现的，能告诉我吗？

那为什么乘号在i里不会变斜体字呢？

用===判断了一下x和乘号是false，然后仔细对比了一下，发现x岔开的角度不一样，于是就猜想是乘号了。

至于乘号为什么不行，具体不清楚。猜想是乘号属于特殊字体，不在你设置的字体内，你把字体设置去掉看看就知道了

qlcyl110 · 发表于 2020-3-4 08:03

chengtyp 发表于 2020-3-3 22:56
1.这个i字体不设也是可以吧，总字体设在页面就可以了。
2.i标签默认就是斜体，想要变正体，font-style改 ...

我来会回答你span香不香。

我是新手，学完span后一直没用，
因为再表示文字的时候需要语义标签，所以就想到 em、i、strong等行内标签

span就是一个行内标签，它不能表示特定的语义所以一直不用它。
个人理解，

clearwater · 发表于 2020-3-4 08:11

本帖最后由 clearwater 于 2020-3-4 08:13 编辑

qlcyl110 发表于 2020-3-4 08:03
我来会回答你span香不香。

我是新手，学完span后一直没用，

谢谢您和楼中各位大神的回复。

我知道用span，我就好奇，为啥老师的叉号出现的是正的，我是斜的。（楼上有大神解答了一部分原因，但是我还是不是太清楚）

以及为什么一个小叉号，老师还要设三个字体。

这个帖有几个关注点：

１、我好奇；我要的是他的思维过程，不是要什么结果, 或解决方案
２、他是某马的老师，也不至连这个span他都不懂。
３、我猜测，三个字体也许是他哪个代码复制过来的，忘记删掉。
４、我把乘号复制到结构里，出现还是斜的。

clearwater · 发表于 2020-3-4 08:24

我觉得这个叉号应该和字体的设置有关。

我把叉号搬出去，又变斜了。

qlcyl110 · 发表于 2020-3-4 08:25

clearwater 发表于 2020-3-4 08:11
谢谢您和楼中各位大神的回复。

我知道用span，我就好奇，为啥老师的叉号出现的是正的，我是斜的。（楼 ...

首先，感到抱歉，回答了别的楼层内容。
解释一下：因为别人回答了我想回答的内容。

看到你列出的123后，简单说明一下：
1.我也是看的某马的前端。刚到品优购这里
2.这个老师说过不用span，就是我前边说过，它要能表达语义的标签来使用。知道在i这个标签里是文本而不是图片或者其他内容。最重要的思想是“标签的语义”
3.老师的 font-family: Arial, Helvetica, sans-serif; 样式，前两个都可以将 i 标签的倾斜样式改变，最后一个不行。

设置三个字体样式是为了浏览器兼容，我在学这段的时候，老师讲过，字体样式如果没有，从左到右，依次来进行适配。这里应该是为了适配吧？

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 前端基础：CSS　－－为啥小X出现是斜的，还要设三个字体？

免费评分

[求助] 前端基础：CSS －－为啥小X出现是斜的，还要设三个字体？

免费评分

[求助] 前端基础：CSS　－－为啥小X出现是斜的，还要设三个字体？