Web前端开发技术学习-前端开发工程师不忘初心，分享CSS样式高能技巧，你会了吗？

前端开发学习, CSS是基础的部分,比较易懂好学.今天给大家分享一些小技巧.

20个有用的CSS小技巧，来帮你把CSS技能提高到高级水平[Github上有8000多个star]。包括Flexbox、REM、:not()选择器、负的nth-child等。

01、使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：

02、继承box-sizing

03、为 body 元素添加行高

04、使用 :not() 选择器来决定表单是否显示边框

05、垂直居中任何元素

06、使用负的 nth-child 来选择元素

07、逗号分隔列表

08、使用 SVG 图标

09、使用 “形似猫头鹰” 的选择器

10、使用 max-height 来建立纯 CSS 的滑块

11、创造格子等宽的表格

12、利用 Flexbox 去除多余的外边距

13、给 “默认” 链接定义样式

14、一致垂直节奏

15、固定比例盒子

16、为破碎图象定义样式

17、用 rem 来调整全局大小；用 em 来调整局部大小

18、隐藏没有静音、自动播放的影片

19、使用选择器:root来控制字体弹性

20、为更好的移动体验，为表单元素设置字体大小

支持情况

这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11

需要了解更多前端开发资讯请关注我们吧！