[Day 21] 阿嬷都看得懂的满版横幅怎麽写与 normalize.css

阿嬷都看得懂的满版横幅怎麽写与 normalize.css

昨天我们拿出了古早时代的贴纸簿，并且介绍了「切版」这个任务，其实就是把区块元素当作贴纸，并且把这些贴纸在贴纸簿页面中适当的位置。今天，让我们试着做出这张页面看看：

我们现在看见 3 张大贴纸：上方的粉红色贴纸、中间的橘色贴纸、以及下方的绿色贴纸。其中橘色的贴纸里面有 8 张黄色的贴纸。因此，我们应该会很直觉地写出这个结构：

<div class="pink"></div>
<div class="orange">
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
  <div class="yellow"></div>
</div>
<div class="green"></div>

然後我们再来考虑这些贴纸应该要多大张，位置又应该在哪里。

那麽，粉红贴纸多大张呢？1920 X 200？800 X 120？对，其实光看上面那张图是看不出来的。我们只知道粉红贴纸和整张图同样宽，高大概是占图片高度的 20%。

没错，CSS 允许我们使用相对的方式，来告诉浏览器区块元素的宽高。不过，相对总要有个相对的对象。就好像我说「我比较高」，你一定会问「你是说跟谁比」。在我们的网页中，可以比较的对象大概就 2 个：

父元素 (parent element)，就是包含这个元素的元素：
这时候我们使用百分比符号 "%" 作为长度单位；以及
可视区域 (view)，也就是目前浏览器的视窗大小：
这时候我们使用视高 (view height, 样式中写为 "vh") 以及视宽 (view width, 样式中写为 "vw") 当作长度单位，1vh 就是视窗高度的 1%，1vw 就是视窗宽度的 1%。

既然我们希望粉红贴纸就是满版，也就是宽度和整张贴纸簿页面同样宽，所以我们就设定宽度为 100vw，高度大概是视窗高度的 20%，所以就设定为 20vh。这样设定以後，无论怎麽调整视窗大小，甚至无论是使用电脑还是手机，粉红贴纸都会是满版横幅，占整个视窗的 20% 高喔！是不是很方便呢？

因此，粉红贴纸的样式应该会长这样：

.pink{
  height: 20vh;
  width: 100vw;
  background-color: pink;
}

结果我们发现不太对劲：

怎麽上面和左边有两条丑丑的白边呢？我想要的是满版啊啊啊！没关系，我知道怎麽做，让我打开发展者工具，看看粉红贴纸这个元素到底哪边设定错误了。

干完全没错啊！margin 我没设，所以也是 0 没错。这到底什麽巫术!?

呃嗯，当我们找不到某个元素的问题时，可能就要想想，是不是它的父元素出了问题。

等等，父元素，可是我这个粉红贴纸没有被包在其他元素里面啊!?

其实还是有喔～你仔细看看发展者工具：

干，认真？body?? 我也没设定 body 的 margin 啊!?

那我们点去 body 标签看看：

什麽？谁这麽鸡婆把 body 设 margin: 8px !? 也太灵异了吧！

其实这是浏览器搞的鬼...浏览器真的满鸡婆的，会自动预设一些样式。那麽该怎麽办呢？莫非是要自己手动清除？
没错，还记得我们的万用字元吗？让我们先把所有元素都先设成 margin:0，再来指定後续的元素样式吧！

*{
	margin: 0;
}

果然，在我们把 margin 清掉以後，白边就消失罗！

等等，这样也太麻烦了吧，而且我怎麽知道浏览器还鸡婆了其他哪些样式？
没关系，已经有人作出工具，帮我们把这些浏览器预设的样式清除掉了！这个好用的工具，叫作 normalize.css。只要我们下载这个档案，并且用前面介绍过的 link 标签连结上去，就可以清除所有预设样式罗。

如果我们想偷懒，不想把这个档案下载下来，其实我们也可以直接使用网址的方式引入就好 (这个方式被称作 "CDN")。毕竟，这个档案是存在浏览器所在的电脑里，还是存在网路上，其实都没什麽差别。引入的方式也很简单，只要把 link 中的 href 属性，改成网址就行了。

在 CodePen 当中，我们可以看到，编写程序码的区块右上角都有齿轮可以点选：

点开以後，稍微往下卷动，就可以看到设定用网址引入档案的文字框：

我们输入 "normalize.css" 的前几个字，CodePen 就会自动帮我们搜寻可以使用的档案，并且呈现在下拉选单中：

选择以後，这个档案的网址就会直接出现在下方，我们再点选 Save & Close，就完成引用档案罗！这个引用，在我们把成果输出 (export) 的时候，CodePen 会直接帮我们写在 head 标签中，是不是很贴心呢？