开发中遇到的css样式总结

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问题查找结果

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,985评论 0 0
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,296评论 0 0
  • 面试官问H4和H5有什么区别(内心独白:MMP,不就是多了一些语义化的标签吗,难道让我把增加的标签和你说一遍吗?)...
    黑雷阅读 3,454评论 0 1
  • 读作: ...
    学虎教育黄锦莹阅读 269评论 0 0
  • 照样是一个没有星星的夜晚,我想起了我的童年,想起了那六年,像梦一样, 醒来发现我依然在水深火热的初中生活里,挣扎着...
    落落落落落大方阅读 127评论 0 0

友情链接更多精彩内容