font-weight:600；不生效以及单行多行文本省略，iphoneX 适配等常见CSS问题收集解决

1.user agent stylesheet

b标签没写加粗却加粗了，浏览器调试发现是b标签多了一个样式控制的，如下图 user agent stylesheet是浏览器默认样式表，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染，不同浏览器甚至同一浏览器不同版本的默认样式是不同的。 解决方案： 由于user agent stylesheet的优先级很低，自己写样式覆盖即可。

2.android机型font-weight:600；不生效

android机型无法识别400，500，600这些字重，iphone正常，所以涉及这些字重的会自动适配最近字体，可以改为font-weight:boild;统一加粗。

3.单行文本省略

先设定div宽度，然后在需要省略的文字div内

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

4.多行文本省略

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;

适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

5.iphoneX 适配

由于iphoneX机型底部存在黑色横条，所以涉及底部按钮的地方应该做iphoneX适配

@supports (height: constant(safe-area-inset-bottom)) or (height: env(safe-area-inset-bottom)) { .iphonex-wrap { padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem)!important; padding-bottom: calc(constant(safe-area-inset-bottom) + 1.6rem)!important; } .iphonex-wrap-bottom { padding-bottom: env(safe-area-inset-bottom)!important; padding-bottom: constant(safe-area-inset-bottom)!important; } }

6.iOS图片长按放大问题解决 图片剪裁

7.图片剪裁

@/lib/utils.js

8.图片的基本处理方式：

https://developer.qiniu.com/dora/api/1279/basic-processing-images-imageview2

9.解决数字字母自动换行

问题：在样式一样的两个div中，汉字会自动换行，但数字和字母不会换行 word-break:break-all或word-wrap:break-word

10.背景透明：

写弹窗时使用最佳！

background: transparent;

11.弹窗标题栏固定定位问题：

如选品页面的弹屏面板

12.边框1px过细，进行rem适配存在兼容问题

/*no*/意为不再进行rem适配