开发中遇到的css样式总结

2019-12-11  本文已影响0人  小小_chao
1.input placeholder样式修改
input::-webkit-input-placeholder {color:#999;font-size:14px;}
input:-moz-placeholder {color: #999;font-size:14px;}
input:-ms-input-placeholder {color: #999;font-size:14px;}
2.文本超出部分省略号代替
/*单行*/
.class{width:100px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
/*多行----有兼容性问题*/
.class{width:100px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
3.滚动条样式修改
/*滚动条隐藏*/
.class::-webkit-scrollbar{display: none;}
/*滚动条样式*/
.class::-webkit-scrollbar{width:6px;background:#E9ECF9;}
.classl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}
.class::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #EDEDED;}
4.table固定thead,tbody滚动
table thead{color: #000;font-weight: inherit;width: calc(100% - 1.2em);display: table;}
table thead tr{color: #000;font-weight:600;display: table;width: 100%;table-layout: fixed}
table tbody{display: block;overflow-y: scroll;max-height:540px;}
table tbody tr{table-layout: fixed;display: table;width: 100%;} 
5.table中td高度自适应: https://blog.csdn.net/m0_37885651/article/details/80609558

注:以上内容均为本人在页面编写中所遇到的css问题查找结果

上一篇 下一篇

猜你喜欢

热点阅读