在日本开发 SaaS 产品,爱猫、爱读书、爱大海

2019-11-13 20% CSS


我是一名 Web 开发者,日常工作中主要使用的技术是 JS 和 CSS。相比 JS ,我认为自己没有认真研究过 CSS 的技术细节。虽然如此,但是我有自信可以实现 “任意 UI”。因为我熟练掌握 20% CSS,并擅长查看其他网站的 CSS 源码。

在这里分享一下我的 20% CSS。

1. 必须熟练掌握的基本知识

1.1. CSS 选择器

你需要掌握

  • class 选择器
  • id 选择器
  • 标签选择器
  • 父子选择器,兄弟选择器
  • 属性选择器

1.2. CSS 单位

你需要掌握

  • %
  • px
  • rem

1.3 CSS 颜色

你需要掌握

  • 十六进制(hex)表示法
  • RGB 表示法

1.4. CSS 边距之间关系

CSS 最基本的边距主要是 marginpadding,他们的关系如下:

2. 必须熟练掌握的基本场景

2.1 CSS 布局

你需要掌握

  • position 位置布局
  • flex 弹性布局
  • float 流布局
  • column 列布局

我有一份非常简洁的 [CSS 布局教程](http://learnlayout.com/)。

2.2. CSS 显示

你需要掌握

  • display
    • none/block/inline-block
  • 边框
    • border
    • border-radius
  • 颜色
    • background-color
    • color
  • 阴影
    • box-shadow
    • text-shadow
  • 文本
    • font-family
    • font-size
    • font-weight
    • text-decoration
    • word-wrap
  • 伪类
    • :hover :focus
    • ::before ::after
  • ...

2.3 CSS 媒体查询

媒体查询主要应对响应式设计。

Google 提供了一份非常好的响应式设计教程。https://developers.google.com/web/fundamentals/design-and-ux/responsive

3. 重要,但会查文档即可

  • 渐变
  • 过渡
  • 动画
  • 2D/3D 转换

最后,本文不是 CSS 教程,更像是一个“迷你关键字列表”。

希望能帮助到你。