前端开发学习, 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
需要了解更多前端开发资讯请关注我们吧!
领取专属 10元无门槛券
私享最新 技术干货