CSS常見問題

susu發表於2019-02-17
CSS

1.適配iPhoneX全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
viewport-fit,它有三個可選值：
    contain: 可視視窗完全包含網頁內容
    cover: 網頁內容完全覆蓋可視視窗
    auto: 同contain的作用

2.邊框設定0.5px

.box{position:relative;width:200px; height:200px;}
.box:after{
    content: ``;
    position: absolute;
    left: 0;
    top:0;
    width:200%;
    height: 200%;
    border:1px solid red;
    transform: scale(0.5);
    transform-origin: left top; /* 更改元素位置 */

}

3.flex多行時，最後一行元素左對齊

在flex多行佈局中，justify-content: space-between; 這個屬性如果最後一行元素沒有填滿，會導致最後一行元素兩端對齊

解決方案：新增空的元素(缺少幾個新增幾個)

  <div class="list"> 
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item itemEmpty"></div> 
 </div>
  
 .list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
 }
.item{
    width: 30%;
    height: 50px;
    background: red;
    margin:10px;
}
.itemEmpty{
    background: transparent;
}

4.html 網頁調起QQ彈窗

 <!--uin:客服qq號  -->
 <a target="_blank" href="tencent://message/?uin=20001&site=qq&menu=yes">客服</a>

5.圖片表情與文字對齊

 img.emoji{
    width:pxrem(40);
    height:pxrem(40);
    vertical-align: text-bottom;
}

6.斷網圖片載入失敗

 - 圖片轉化為base64
 - 圖片合成一張雪碧圖

相關文章