CSS常见问题

1.适配iPhoneX全屏

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; 这个属性如果最后一行元素没有填满,会导致最后一行元素两端对齐

解决方案:添加空的元素(缺少几个添加几个)
  
.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弹窗

 
 客服

5.图片表情与文字对齐

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

6.断网图片加载失败

 - 图片转化为base64
 - 图片合成一张雪碧图

你可能感兴趣的:(html,css)