让页面无懈可击!关于 css,你该做好这 20 件事 前端技术砖家
时间: 2023-05-16 22:02:48 浏览: 102
要让一个网页无懈可击,CSS是不可或缺的一项技术。以下是20件能够让页面更具优化性和无懈可击的CSS技巧。
1.最好用class而非ID 。
2.使用字体图标而非图片。
3.避免使用长的选择器。
4.只使用必要的ID和class。
5.用浏览器默认的字体缩放。
6.正确使用继承。
7.用Normalize.css重置。
8.样式使用CSS前缀。
9.使用雪碧图减小图片数量。
10.减小重排/重绘。
11.去掉所有不必要的代码和空格。
12.使用@media来实现响应式设计。
13.用calc()来进行自适应布局。
14.用flexbox来排版页面。
15.使用Transition/CSS3 Animation来添加动画。
16.避免 !important关键词。
17.尽可能减少颜色和大小的变化。
18.使用box-sizing: border-box来处理字体溢出问题。
19.使用rem而不是px来设置字体大小。
20.最好使用 CSS 预处理器。
以上就是让页面无懈可击的20项CSS技巧。当前端人员运用这些技巧时,不仅可以让页面更加美观,而且可以节省页面加载时间,更好地为用户提供良好的浏览体验。
阅读全文