风暴英雄网站实战注意点笔记

网站图标

• 网站的icon一情况下是放在网站跟目录中的，命名一般是命名为favicon.ico

---

清除默认样式

• 网页中清除基本样式的方法有很多种，做常见的有两种

• 下载reset.css清空浏览器的样式
  • 优点:很暴力的清除了所有的浏览器样式，我们写什么样式就是什么样式
  • 缺店:导致网页性能变差一点
• 下载normalize.css清空浏览器样式
  • 优点:会保留有价值的浏览器样式，重要的是还修复了大量的浏览器bug
  • 缺店:代码数量较多，而且样式清除不齐全

---

工具类

• 一般开发中 如果是自已开发的话，那么在网页中还会引入一个back.css作为自已的工具类来使用

视频

• 如果是使用视频来作为背景使用，那么注意点有如下:

• 视频文件一般来说会比较大，所以用户没有下载好这个视频之前，看到的网站感觉会不好，所以得给网站的视频加一个封面图片 ，也就是给video加上poster属性

           <vidoe poster = "封面图片"> </video>
  

• 一般如果使用视频来做背景的话，我们会希望它是自动播放的，循环播放的，静音的、而且兼容性要比较完美的，所以就要用到下面的方法

      <video autoplay loop muted poster = "images/图片路径.jpg">
          <source src = "images/视频路径.mp4" type = "video/mp4">
          <source src = "images/视频路径.webm" type = "video/webm">
      </video>
  

---

关于object-fit

• 如果想要背景在保持等比宽高的情况下，缩放不变形，那么就在背景所在的元素中加入object-fit:cover属性，这样子就可以保持等比拉伸

关于定位和hover

• 如果给一个元素添加了position来进行定位，那么很有可能他的定位会影响到hover事件的响应，这个时候我们只需要给整体的元素的级别使用z-index提升一下就可以，

关于绝对定位来居中定位的两个技巧

• 使用position:absulote进行定位，如果想要居中，那么有两种方法。
  - 第一种定位的方式

            position:absolute;
            top:50%
            left:50%
            margin-top:-自身高度的一半；
            margin-left:-自身宽度的一半

• 第二种定位的方式

     position:absolute;
     top:50%
     left:50%
     transform:translateX(-50%) translateY(-50%);;

两种定位的对比

• 第一种的话 ，兼容性会比较好一些，因为不是用到css3的属性，兼容老的浏览器会容易一些，但是需要知道具体的宽高，所以换了图片之类的，比较麻烦。
• 第二种的话，存在兼容性的问题，但是它很方便，不用考虑任何的更换图片的问题，也不需要知道具体的宽高，直接就能适应。

定位流

• 使用定位流可以单独的设置某一个元素 无论他原本是什么状态都可以，并且不影响旁边元素

css3动画

• 如果想让css3动画执行完毕后，停留在最后一个位置，那么则需要加上animation-fill-mode:forwards
• 图标和文字对齐问题
• 如果图标和文字不对齐，就像下图一样
• 1552843014680.png
• 那么解决办法就是，给这个想要对齐图标的标签加上vertical-align:middle即可

浮动注意点

• 在企业开发中，如果元素设置了左浮动，那么就不要设置左边的margin，不然的话 容易出现bug