一、背景图全屏

bg{ position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: url(bg.jpg) no-repeat #000;     background-size: cover;     z-index: -1;}

二、水平居中

1. margin

margin:0 auto

1. absolute+margin

position:absolute;  left:50%;  width:720px;  margin-left:-360px; //自身宽度一半

1. absolute+translate

position:absolute;  left:50%;  width:720px;  transform：translateX(-50%);

三、给高度自适应的div设置背景图

不给height，设置padding

position: relative;width: 100%;height: 0;padding-top: 70%;background-size: cover;background-image: url();

四、利用视口单位做自适应：

:root {  font-size: calc(0.5em + 1vw);}

五、响应式网格布局

在容器上设置：

.grid-wrapper {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-column-gap: 20px;}

六、利用text-align: justify与text-align-last: justify实现行内均匀分布

    
    
    
     
      
      1      
      2      
      3      
      4      
      5    
     
  
    

七、图层反转：

transform: scale(-1,1) //水平反转transform: scale(1,-1) //垂直反转