div overflow滚动

安卓机上没有平滑的效果，IOS上设置 -webkit-overflow-scrolling: touch; 即可

css 特殊样式：

-webkit-backdrop-filter: blur(5px); iphone上是让背景模糊，安卓不支持 粘性布局：position: sticky; 只苹果支持;

安卓和苹果 line-height 展示差异

安卓差1像素 感觉靠上 只有几个尺寸比较接近居中 line-height: 1.6; font-size为单数 安卓对小数点的解析不敏感，
例如 .3px 在苹果上会有差异，但在安卓上要1px的差异才会展现
1.3px == 1px; 1.7px == 1px;
解决居中：利用 .3px/.2px 在安卓和苹果上的差异
字体（最好单数）line-height:1; padding-top: + .3px; padding-bottom: -.3px; 在安卓上明显差出一个像素，

安卓对rem的解析结果只能是整数，小数解析有问题，尺寸值尽量规避小数

比如 根像素20px， 0.21rem = 4.2px; 安卓上相当于5px;

安卓机和苹果机j键盘弹出差异

差异：键盘弹出，安卓机相当于覆盖层，苹果会改窗口的高度

导致问题：当页面内容少，不出现滚动，位置相对靠下的输入元素，在安卓机上会被弹出的键盘挡住，而且页面无法滚动，但苹果不会，

解决：输入元素靠上放置，或者输入时动态扩充页面内容，让页面可以滚动（要判断设备）；
差异：键盘弹出 苹果fix布局失效
导致问题：fix布局元素在键盘弹出时会跟随屏幕滚动
解决：设计规避，输入内容尽量靠上

fixed布局元素如果里面没有文字只是普通布局的时候，在安卓上会模糊（悬浮返回按钮）

解决办法：加个字，不想要字，加个点，文字颜色设成透明

flex垂直布局，实现app布局，顶栏 + 主题 + 底部导航（可试着规避底部输入fixed失效问题）

div页面左右垂直居中(高度可变，宽度固定)

div: width: 10rem; display: table; margin: auto;

line-height 实现div垂直居中

cont: line-height: 3rem; //高度固定
div: 
    line-height: 1em;
    display: inline-block;

样式实现少文字居中，多文字靠左

cont: text-align: center; 
div: 
    text-align: left; 
    display:inline-block; 

iframe 移动端可滚动

iframe 标签 scrolling=”yes”； iphone 需设置： -webkit-overflow-scrolling: touch; 才可以滚动

-webkit-overflow-scrolling: touch; 只在 iphone端实现平滑滚动

margin padding百分比的时候是以元素的宽度计算的，上下左右都是。