前端基础：CSS －－为啥小X出现是斜的，还要设三个字体？
本帖最后由 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
下面代码是我的。
<!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> X字体不一样 i标签本来就是斜体
清除默认样式
i{
font-style: normal;
} 本帖最后由 wuyujiesong 于 2020-3-3 22:58 编辑
真象只有一个，就是你输入的是小写的x，而老师的是乘号 本帖最后由 clearwater 于 2020-3-3 23:36 编辑
wuyujiesong 发表于 2020-3-3 22:53
真象只有一个，就是你输入的是小写的x，而老师的是乘号
你真机智，被你发现辣。你是咋发现的，能告诉我吗？
那为什么乘号在i里不会变斜体字呢？
我在ＨＴＭＬ里 用i抱Ｘ包起来，还是一样会斜体呢
{:1_904:}
明天晚一点给您评分。现在手上没有能量，今天还欠两个人，还没给评分。 clearwater 发表于 2020-3-3 23:33
你真机智，被你发现辣。你是咋发现的，能告诉我吗？
那为什么乘号在i里不会变斜体字呢？
用===判断了一下x和乘号是false，然后仔细对比了一下，发现x岔开的角度不一样，于是就猜想是乘号了。
至于乘号为什么不行，具体不清楚。猜想是乘号属于特殊字体，不在你设置的字体内，你把字体设置去掉看看就知道了 chengtyp 发表于 2020-3-3 22:56
1.这个i字体不设也是可以吧，总字体设在页面就可以了。
2.i标签默认就是斜体 ，想要变正体，font-style改 ...
我来会回答你span香不香。
我是新手，学完span后一直没用，
因为再表示文字的时候需要语义标签，所以就想到 em、i、strong等行内标签
span就是一个行内标签，它不能表示特定的语义所以一直不用它。
个人理解， 本帖最后由 clearwater 于 2020-3-4 08:13 编辑
qlcyl110 发表于 2020-3-4 08:03
我来会回答你span香不香。
我是新手，学完span后一直没用，
谢谢您和楼中各位大神的回复。
我知道用span，我就好奇，为啥老师的叉号出现的是正的，我是斜的。（楼上有大神解答了一部分原因，但是我还是不是太清楚）
以及为什么一个小叉号，老师还要设三个字体。
这个帖有几个关注点：
１、我好奇；我要的是他的思维过程，不是要什么结果, 或解决方案
２、他是某马的老师，也不至连这个span他都不懂。
３、我猜测，三个字体也许是他哪个代码复制过来的，忘记删掉。
４、我把乘号复制到结构里，出现还是斜的。
我觉得这个叉号应该和字体的设置有关。
我把叉号搬出去，又变斜了。 clearwater 发表于 2020-3-4 08:11
谢谢您和楼中各位大神的回复。
我知道用span，我就好奇，为啥老师的叉号出现的是正的，我是斜的。（楼 ...
首先，感到抱歉，回答了别的楼层内容。
解释一下：因为别人回答了我想回答的内容。
看到你列出的123后，简单说明一下：
1.我也是看的某马的前端。刚到品优购这里
2.这个老师说过不用span，就是我前边说过，它要能表达语义的标签来使用。知道在i这个标签里是文本而不是图片或者其他内容。最重要的思想是“标签的语义”
3.老师的 font-family: Arial, Helvetica, sans-serif;样式，前两个都可以将 i 标签的倾斜样式改变，最后一个不行。
设置三个字体样式是为了浏览器兼容，我在学这段的时候，老师讲过，字体样式如果没有，从左到右，依次来进行适配。这里应该是为了适配吧？
页:
[1]
2