CSS常用技巧（1）—

CSS常用技巧（1）——布局类

一、背景图全屏

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

二、水平居中

margin

margin:0 auto

absolute+margin

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

absolute+translate

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

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

不给height，设置padding

position: relative;
 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实现行内均匀分布

<body>
  <style>
    .container {
       400px;
      margin: 50px auto 0;
      background: #ddd;
    }

    .justify {
      position: relative;
       100%;
      height: 24px;
      text-align: justify;
      text-align-last: justify;
      margin-bottom: 20px;
      
    }
    i {
         24px;
        line-height: 24px;
        display: inline-block; 
        text-indent: 9px;
        background: #333;
        color: white;
        border-radius: 50%;
        overflow: hidden;
        font-style: normal;
      }
  </style>
  <div class="container">
    <div class="justify">
      <i>1</i>
      <i>2</i>
      <i>3</i>
      <i>4</i>
      <i>5</i>
    </div>
  </div>
</body>

七、图层反转：

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