CSS常见问题

2024年4月5日 131次阅读 来源: suyue

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
 - 图片合成一张雪碧图
    原文作者：suyue
    原文地址: https://segmentfault.com/a/1190000018124380
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞