CSS布局与定位

1. 获取背景图片

   
   

2. 壁纸资源：Wall Heaven
   

   

3. position: fixed 脱离文档流

4. 给background添加半透明遮罩

   
   

启动http-server时后面没加 -c-1, 浏览器每次都要清掉缓存刷新才会有变化

5. 让background自适应大小

   
   

height要设置合适，否则图片会拉伸不好看

6. max-width & 居中

   
   

7. 查看图片尺寸

   
   

8. 查看div尺寸，一个一个div去点开

   
   

9. 三角形
   9.1 制造梯形

   
   
   

   9.2 去掉height，将width变成0，没有width会变成自适应

   
   
   9.3 将top border宽度变成0
   
   9.4 将其他颜色变透明，只保留需要的形状
   

10. span变div

display: block;

11. 绝对定位
    子元素：position: absolute;
    父元素：position: relative;

12. 搜索关键词：css tricks shape

13. 调试宽度，按住shift+上下箭头

    
    

14. 去掉所有元素的默认样式

    
    

15. 图标工具：https://www.iconfont.cn/
    

    
    15.1 引入js
    

16. 自定义svg样式

    
    

17. svg居中

    
    

18. 上下空间不对齐的解决办法

    
    
    

19. a标签不包住svg

    
    
    

20. 让a元素包住svg并居中

    
    
    

21. hover