CSS常见问题

oliverhuang 发布于2019-08-02 14:14 / 922人阅读

摘要：适配全屏它有三个可选值可视窗口完全包含网页内容网页内容完全覆盖可视窗口同的作用边框设置更改元素位置多行时，最后一行元素左对齐在多行布局中，这个属性如果最后一行元素没有填满，会导致最后一行元素两端对齐解决方案添加空的元素缺少几个

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
 - 图片合成一张雪碧图

GPU云服务器云服务器 css引入css css _CSS css88

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53662.html

关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
关于CSS Reset 那些事（一）之历史演变与Normalize.css

摘要：下面开始对进行简单的介绍，关于两者的差异区别可以看问答平台使用遇到的问题和有什么本质区别没简单介绍关于对的介绍，这里引用咀嚼之味针对官方介绍翻译的的中文版本。目前已经成为了的替代方案是无可争议的事情了。前言近期在翻阅陈旧的历史资料，整理之前饱受争议的CSS Reset问题，不过好像十多年过去，现在大家统一了口径，纷纷推荐使用Normalize.css，包括Bootstrap都进行...

idealcn 2019-08-28 18:12 评论0 收藏0