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,但是不建议使用

你可能感兴趣的:(css)