css常用函数
- calc() 允许计算 CSS 的属性值，比如动态计算长度值。
- linear-gradient() 线性渐变-创建一个线性渐变的图像。
- rgb() 使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
- rgba() 使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
form
disabled: 禁用属性，阻止一切。包括点击事件，聚焦等。
有一定兼容性问题，低版本手机会失效，因此不能全部依赖disabled属性禁用某个按钮。
建议：html上加这个属性后，js做逻辑判断return出去。
css：
.order-input-button {
border-radius: .5rem;
font-size: .3rem;
color: #000;
height: .9rem;
line-height: .9rem;
&:disabled {
color: red;
}
}
readonly: 只读属性，不阻止各种事件。
无兼容性问题，but只作用于input和textarea标签，
textarea {
line-height: .40rem;
resize: none;
&:read-only {
}
}
font-family
line-height： 行高是可继承的，但是继承的是计算值。即子元素未设置具体行高数值，会自动继承父元素的行高
原则：父设置小的行高，子好覆盖。
因为父行高大，子设置无效。 = 以较大行高为准。
作用：
- 单行文字内容居中：line-height与height同时使用并设置同样的数值。
svg
html:
<div v-html="svg.question_mark" @click="showPayInfoModal"></div>
css:
div {
width: .27rem;
height: .28rem;
display: flex;
align-items: center;
svg {
width: .27rem;
height: .27rem;
}
}
flex
(1) 底部对齐
display: flex;
align-items: flex-end;
（2）解决flex布局导致子元素的宽度无效的问题
问题描述：设置序号和文字flex布局，需要是固定宽度的圆，序号在右边文字多时变形了，文字少时正常。
原因：flex布局默认不换行，右边内容多时，就缩放item。导致序号变形进行了比例缩放。
解决：右边flex：1 。
(3) flex 与 overflow 不要加在同一标签上。容易引发问题。
flex 与 overflow 引入的问题，尝试height=0 或者 width=0 解决下。
移动端查看兼容性
工具：can i use
例如：查看vh单位是否存在兼容性问题：
看着两列 ios > 9 android > 4.4可以用，都可以。
ios 9之前 和android 4.4 之前不考虑了。
奇奇怪怪的属性
（1）h5滚动隐藏滚动轮-可放心使用
.modal-body-inner {
overflow-y: auto;
&::-webkit-scrollbar { // 隐藏滚轮
display: none;
}
}
（2）ios滚动时回弹效果 -webkit-overflow-scrolling:touch
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
有很多奇奇怪怪的问题，不要用。而且理赔从KNB限制了回弹效果。
字体颜色加不透明度
opacity: 0.8;
color: #222222;
注意：opacity 是倍数关系，例如父是0.9，子设置opacity: 0.8，则子的实际效果是0.9 * 0.8 = 0.72。出现误差。 因此，用rgba去解决。色值转化工具：www.mooov.cn/css/color-c…
color: rgba(34, 34, 34, .8)
