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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more