网站图标
- 网站的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
网友评论