DEV Community

panfan
panfan

Posted on

css的小技巧

  1. 使用 css 复位

不同浏览器有不同的自带初始样式,通常可以使用 normalize.css、tinyreset.css 进行通配初始化。

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode
  1. 继承 box-sizing
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
Enter fullscreen mode Exit fullscreen mode
  1. 使用 unset 而不是重置所有属性
  2. 使用 :not() 选择器来决定表单是否显示边框
  3. 为 body 元素添加行高
  4. 為表單元素設置:focus
  5. 垂直居中任何元素
  6. 逗号分隔的列表
  7. 使用负的 nth-child 来选择元素
  8. 使用 SVG 图标
  9. 使用 “形似猫头鹰” 的选择器
  10. 使用 max-height 来建立纯 css 的滑块
  11. 创造格子等宽的表格
  12. 利用 Flexbox 去除多余的外边距
  13. 利用属性选择器来选择空链接
  14. 给 “默认” 链接定义样式
  15. 一致的垂直节奏
  16. 内在比例盒
  17. 为破碎图象定义样式
  18. 用 rem 来调整全局大小;用 em 来调整局部大小
  19. 隐藏没有静音、自动播放的影片
  20. 使用选择器 :root 来控制字体弹性
  21. 为更好的移动体验,为表单元素设置字体大小
  22. 使用指针事件來控制鼠标事件

Top comments (0)