/css-block

总结一些经常用到的 CSS 代码块以及“技巧”

CSS-BLOCK

文档地址

初衷

Css Block 启发于前不久阅读的张鑫旭的《CSS世界》一书,让我对 css 又有了新的理解,并且从中学到了一些“妙招”。日常项目中频频会用到一些常用的样式代码块,这些代码块可以封装到一个通用的样式文件中,但是随着时间的推移这个文件会越来越庞大,并且你不会用到所有的功能。于是我决定将这些代码块放到一个文档中,开箱即用。

使用方法

直接在文档中找到相应代码块,复制即可。

目录

布局(Layout)

  • Flex
  • 水平垂直居中
  • 圣杯布局
  • 多列等高
  • Flex 结合 Auto

样式(Style)

  • 重置样式表
  • 动画
  • 滚动条

移动端(Mobile)

  • Meta 标签
  • Media 媒体查询
  • 屏幕适配方案
  • 兼容性

技巧(Skill)

  • 实现“登录 | 注册”效果
  • 图片加载优化
  • 用 Padding 绘制图形
  • 阻止 Margin 合并
  • 取消“幽灵空白节点”
  • 首字母与首行
  • 文字溢出省略号
  • 绘制三角形
  • 清除浮动
  • 扩大点击区域
  • 渐变
  • 巧用 Content

其他

如发现 bug 或有疑问,欢迎在 issues 中指出。也欢迎提供更多、更好的代码块和解决方案。