移动端学习积累

1. 什么时候直接使用background-image，什么使用伪类选择器使用background-image

1. 当需要调整块容器中图片的位置，就需要使用 伪类选择器；如果不需要调整图片位置，就直接使用background-image
2. 或者说也能不用伪类选择器，直接通过 background-position调整位置
3. 给空的块容器设置了background-image，右边需要画一个竖线，使用伪类选择器+绝对定位

2. 看到好多设置图标的操作都是 绝对定位+background-image，尤其是搜索框前面的 小放大镜

注意点：给块容器设置background-image时，注意要设置宽高。background-size 和 img 标签 在设置图片大小上的不同就是，前者不会超出容器的大小，用来设置图片尺寸；后者会默认可超出父容器大小
background-size: 104px auto; 中 auto 的值是等比例缩放后的高度 327.5px（即原始高度 655px 的一半）

3. 固定定位一定要加宽度，不然就会有内容撑开，布局就乱了

4. 行内块元素幽灵空白问题

练习移动端时写了应该很简单的 img 被 div 包裹 的标签，但 仿写的 div 就是比 原本的 高度少几个像素，那么简单的东西....
学习的时候记得可牢了，实际敲代码一点都回忆不起来，排查问题的思路还要多磨炼
最后发现问题原因就是 我的 reset.css 给 img 写了 vertical:middle，去除了幽灵空白问题，所以我的img的高度比较小
另外就是 学习到了 font: 14px/1.5 sans-serif; 同时设置 字体和行高，行高纯数字时是字体大小的倍数

5. rem+媒体查询修改html的font-size时（了解）

body标签一定要给出width，且单位也要写成rem，移动端中body标签就是那版心，一般body标签直接默认是width:100%的，但使用媒体查询就要设置rem值
而实际使用js动态调整html的font-size值，这也是更多使用的，所以了解一下即可

6. 顶部固定定位与其下方元素的展示

margin穿透问题：给div.banner设置的垂直方向上的margin-top，会穿透上方的fixed定位元素，视觉上像是加在了body标签上，让body元素位移了
假设要在 固定定位下接着写内容，就要加边距使得内容不被固定定位元素覆盖，如果给元素加 上外边距 就会 出现 margin 穿透问题，所以就要 给元素加 上内边距

7. 在使用flex布局时，如果要展示多个图片，一把都是把图片包裹在a标签内，让a标签flex:1

如果去掉a标签的包裹，直接把flex:1设置在img标签内，会出问题（反正img标签不能直接充当伸缩项目）

8. 阿里字体图标库 使用图标变得很简便

不再像之前那样要 下载很多的字体文件和字体图标css，再给i标签加类名，
现在可以直接 使用 <svg><path></path></svg> 把图标展示在页面上