干货分享 css的小技巧
导读：小编做前端项目也有一段时间，在其中也是总结了一些前端编写css代码时的一些小技巧！ 技巧列表 1，为body添加行高 2，逗号分离的列表 3，使用:not( 去除导航上不需要的边框 4，文本显示优化 5，表格单元格等宽 6，使用属性选择器选...
小编做前端项目也有一段时间，在其中也是总结了一些前端编写css代码时的一些小技巧！
技巧列表
1，为body添加行高
2，逗号分离的列表
3，使用:not()去除导航上不需要的边框
4，文本显示优化
5，表格单元格等宽
6，使用属性选择器选择空连接
你不需要分别为每一个 ,
等元素添加行高，而是为body添加: body { line-height: 1; 让列表看起来更像一个真正的逗号分离列表： ul > li:not(:last-child)::after { content: ","; 添加边框… /* 添加边框 */ .nav li { border-right: 1px solid #666; …然后去除最后一个元素的边框… /* 移除边框 */ .nav li:last-child { border-right: none; 有些字体在所有的设备上并不是最优显示，因此让设备浏览器来帮忙： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; 使用表格会很痛苦，因此使用table-layout：fixed来保持单元格相同的宽度： .calendar { table-layout: fixed; 显示没有文本值但是 href 属性具有链接的 a 元素的链接： a[href^="http"]:empty::before { content: attr(href); 这样做很方便。 上面的小技巧支持Chrome，Firefox， Safari， 以及Edge， 和IE11
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 干货分享 css的小技巧
本文地址： https://pptw.com/jishu/668209.html