css神奇的属性

• pointer-events: none  使元素可以被穿透，比如在绝对定位时该元素不会被点中，被点中的是其下方的元素
• white-space:pre 换行和空格会展示在页面中，这里的换行并不是说'\n'而是键盘输入的回车键，类似HTML中的pre标签

•  

滚动条相关样式	作用	例子（https://www.cnblogs.com/lfhy/p/6796653.html）
:-webkit-scrollbar	定义滚动条整体的样式	display: none; // 隐藏滚动条
:-webkit-scrollbar-thumb	滑块部分	:-webkit-scrollbar-thumb {/*滚动条里面小方块*/    border-radius: 10px;    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: #535353; }
:-webkit-scrollbar-thumb	轨道部分	:-webkit-scrollbar-track {/*滚动条里面轨道*/    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    border-radius: 10px;    background: #EDEDED;  }

• touch-action: manipulation 解决移动设备点击事件300ms的延迟，暂时只有IE11+支持，不过作为w3c的标准，以后可能会普及，且2015年以后大部分浏览器不再有300ms的延迟了（https://github.com/ftlabs/fastclick）
• -webkit-overflow-scrolling:touch 解决iOS上overflow: auto引起的卡顿，iOS上会有回弹效果，如果滑动到顶部和底部出现页面卡住不动的情况可使用position: static，如果动态添加内容导致页面页面不能滚动可让子元素的height比父元素稍微大点儿(min-height: 101%)，建议isScroll库或better-scroll库（https://www.cnblogs.com/xiahj/p/8036419.html 、https://www.jianshu.com/p/1f4693d0ad2d、https://www.cnblogs.com/wuyinghong/p/7450041.html?utm_source=debugrun&utm_medium=referral）
• cursor: not-allowed 设置鼠标移动到元素上时展示不可点的样式
• -webkit-input-placeholder{color: red; transform: translate(0, -10px);}  设置input输入框placeholder字体颜色和调整其垂直位置，因为iOS上可能出现垂直不居中的情况（用ant-design出现过，不知道什么原因）
• css表达式 可以在样式表中使用JavaScript，但是不建议使用
• 文本超出展示省略号

 

作用	代码
单行文本超出展示省略号	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
文本超出展示省略号(多行)	display: -webkit-box;  /* autoprefixer: off */ -webkit-box-orient: vertical;  /* autoprefixer: on */ -webkit-line-clamp: 2;  overflow: hidden;