基础知识
浏览器适配
基本布局
元素属性
CSS3
规范
预处理技术
- Post 处理技术
- CSS in JS
CSS 样式框架
Ref

理解程度要求：

熟练掌握 CSS 的基础知识（选择器、权重、布局、盒模型等等）
- 选择器的使用优化（选择器的运行机理）
知道所有的 CSS 属性的用途，在使用的时候能够查阅 API 保质保量完成效果实现
理解 CSS3 的新特性

参考资料：

CSS CookBook
CSS Definitive Reference Book

基础知识

CSS 使用方法

元素内联
<style> 标签
<link> 加载
CSS 文件中 @import 加载（不推荐）

CSS 选择器

CSS选择器在运行的时候是：从右向左 匹配的。

CSS 的基础类选择器

/* Normal Selectors */
* {}
#id {}
.classname {}
h1 {}
/* 
更多的关系符号，例如 ~= 请参考 CSS 文档 
[ attribute ] 
用于选取带有指定属性的元素。 
[ attribute = value ] 
用于选取带有指定属性和值的元素。 
[ attribute ~= value ] 
用于选取属性值中包含指定词汇的元素。 
[ attribute |= value ] 
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 
[ attribute ^= value ] 
匹配属性值以指定值开头的每个元素。 
[ attribute $= value ] 
匹配属性值以指定值结尾的每个元素。 
[ attribute *= value ] 
匹配属性值中包含指定值的每个元素。 
*/
*[title="job"] {} 
/* PseudoClasses */
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}
a:visited | :hover | :link | :active | :focus | :not<selector> | :target {}
p:lang
div:first-child :last-child :only-child {}
input:checked {}
input:disabled | :enabled {}
input:default | :valid | :invalid {}
input:in-range | :out-of-range | :required | :optional
:nth-child(an+b)
p:root {}
p:before {}
p:after {}
/* PseudoElements */
p::first-letter | ::first-line {}
p::before
p::after
input::placeholder
p::selection
/* Specially - Webkit Scroll Bar */
::-webkit-scrollbar {
    background-color: rgba(66,66,66,0.1);
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button {} /* 滚动条两端的按钮 */
::-webkit-scrollbar-track {} /* 外层轨道 */
::-webkit-scrollbar-track-piece {} /* 内层轨道，滚动条中间部分（除去）*/
::-webkit-scrollbar-thumb {} /*（拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）*/
::-webkit-scrollbar-corner {} /* 边角 */
::-webkit-resizer {} /* 定义右下角拖动块的样式 */

CSS 复合类选择器 Compounded Selectors

h1, h2, h3 {} /* union selector */
h1 span {} /* descendant selector */
h1 > span {} /* direct child selector */
h1 + p {} /* adjacent sibling selector: select the next sibling */
h1 ~ p {} /* adjacent sibling selector: select both this and sibling */

选择器的优先级

inline > internal > external
Back > Front
浏览器样式 < 用户样式 < 作者样式 < 作者! < 用户!
- !important 的强调
同级样式冲突：
- a - b - c 权值判断法（规定 a 权值 > b > c）
- a - 样式的选择器中id值的数目
- b - 选择器中其他属性和伪类的个数
- c - 选择器中元素名称和伪元素个数

选择器的一般使用规则

尽肯能直接用最简单的 class selector
表达式应该尽可能简单（避免多次复杂查询）
去冗余：杜绝重复查询

CSS 单位

长度
- 相对长度：em / ex / rem / px / %
  - em 和字号挂钩
  - ex 元素字体的“x高度”挂钩
  - rem 与根元素的字号挂钩
  - px CSS像素
- 绝对长度：in / cm / mm / pt /pc
颜色：String | #ffffff | rgb() | rgba() | hsl() | hsla()
角度：rad

CSS 盒模型

-margin-broder-padding-content-padding-border-margin-
box-sizing: content-box, and border-box property is used to alter the default CSS box model used to calculate width and height of the elements. the width and height you assign to an element is applied only to the element’s content box.
注意：IE 的 Doctype 会影响到盒模型的渲染方式。
inline 也会限制，这个时候我们应该用 line-height 来设置高度。

Margin / Padding 的区别：

Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离在IE4+，margin 属性不可用于 td 和 tr 对象
Padding 用来设置元素内容到元素边界的距离; 内联对象要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。不允许负值。

浏览器适配

Prefix: -webkit- -o- -moz- -ms-
Webkit 专属 Properties.

/* Interesting Properties */
:-webkit-autofill: {}

/* Partial list of available values in WebKit/Blink */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

/* Mask */
-webkit-mask: ...;

-webkit-background-composite
-webkit-filter
-webkit-shape-inside

/* Avoid blinks of Webkit in Chrome */
* { -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; }

/* better quality of font */
-webkit-font-smoothing

/* Text & Font */
-webkit-font-feature-settings
-webkit-font-kerning
-webkit-font-size-delta
-webkit-font-variant-ligatures

-webkit-text-security
-webkit-text-size-adjust
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
-webkit-text-fill-color
-webkit-tap-highlight-color
-webkit-shape-inside

/* how to hyphenate words when line-wrapping */
-webkit-hyphens: none | manual | auto;

/* iOS Div Touch Simulate */
.module {
  width: 300px;
  height: 200px;

  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

/* Make a p in three lines */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

基本布局

position
- static: 默认布局，随文档流的布局，此时 4 个定位偏移属性将不会被应用。
- absolute: 绝对定位，相对父级中有 absolute 的元素或者上一级父元素 static 属性的定位。
- relative: 相对定位，相对于同级的流元素的定位。Specify the vertical offset from its normal position.
- fixed: 固定定位，相对于 Window 容器的定位。
- sticky：随普通的文档流定位，但是 offset 随着最近的可滚动的节点容器变动。
- inherited: 继承父元素的 display 属性。
display
- none: 注意区分和 visibility 之别
- block: 块级元素显示 The element generates a block element box.
  - block 和 inline-block 之间的重要区别在于：Block 会渲染 padding margin 的值，而 inline 元素的以上值是无效的。
  - They are usually container elements, like ,, and . Also text "blocks" likeand ``. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
- inline: 内联元素显示 The element generates one or more inline element boxes.
  - An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.
  - An inline element will not accept height and width. It will just ignore it.
- inline-block: 元素占位为块级，但是表示是内联。 The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
- list-item: 列表形的元素形式显示 The element generates a block box for the content and a separate list-item inline box.
- flex | inline-flex: flex 布局
- table | table-cell | table-column | ...
- grid | inline-grid …
- ruby ...
float
- left | right
- clear: left; right; both;
columns: 针对分列的布局
z-index: z-index 深入

比较几种相同效果的浮动布局

float:left;
- I dislike floats because of the need to have additional markup to clear the float. As far as I’m concerned, the whole float concept was poorly designed in the CSS specs. Nothing we can do about that now though. But the important thing is it does work, and it works in all browsers (even IE6/7), so use it if you like it.
  The additional markup for clearing may not be necessary if you use the :after selector to clear the floats, but this isn’t an option if you want to support IE6 or IE7.
display:inline;
- This shouldn’t be used for layout, with the exception of IE6/7, where display:inline; zoom:1 is a fall-back hack for the broken support for inline-block.
display:inline-block;
- This is my favourite option. It works well and consistently across all browsers, with a caveat for IE6/7, which support it for some elements. But see above for the hacky solution to work around this.
- the white spaces between elements are treated the same as white spaces between words of text，同时 inline-block 之中的文本元素具有：vertical-align 等针对 inline 样式的支持。
display:table-cell;
- Another one where you’ll have problems with browser compatibility. Older IEs won’t work with this at all. But even for other browsers, it’s worth noting that table-cell is designed to be used in a context of being inside elements that are styled as table and table-row; using table-cell in isolation is not the intended way to do it, so you may experience different browsers treating it differently.
flexbox Layout
multi-column layout, there is a CSS Columns feature that you might want to know about. However it isn’t the most well supported feature (not supported by IE even in IE9, and a vendor prefix required by all other browsers), so you may not want to use it. But it is another option, and you did ask.

CSS BFC 的概念

元素属性

Box

box-shadow
box-sizing: content-box | padding-box | border-box | margin-box
- box-sizing 决定了你的尺寸样式所应用的区域
width / height / maxwidth / maxheight / minwidth / minheight
- margin / padding
- border
  - border-color
  - border-radius
  - border-style
  - border-width
  - border-image
    - outset / repeat / slice / source / width
- overflow
- visiblity

Outline

outline-color
outline-offset
- outline-style
- outline-width

Background

background-image
background-color
- background-repeat
- background-attachment: fixed / scroll / local
- background-clip: border-box | padding-box | content-box
  - The background-clip CSS property specifies whether an element’s background, either the color or image, extends underneath its border.
- background-origin: border-box | padding-box | content-box
  - The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.
- background-position
- background-size

/* 图片无敌适配居中 */
.image-container {
  background-image: url(https://img.alicdn.com/tps/TB16TN4NVXXXXXfXpXXXXXXXXXX-1980-320.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

Text

text-direction
text-align
text-indent
text-decoration
text-transform
text-justify: 指定文本添加空白的方式
text-shadow
text-overflow: 文字溢出处理 text-overflow: ellipsis 利用省略号代替溢出部分的文字，配合 white-space / overflow 使用更加方便。

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

white-space: 文字折行处理 white-space: nowarp
word-wrap
word-spacing
letter-spacing
line-height div { height:25px; line-height:25px; } 单行文字图标居中。

font

font-family

.system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
 Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Consolas, "Courier New", Courier, FreeMono, monospace;
}

font-size
font-sytle
font-variant
font-weight

vertical-align
@font-face: 链接服务器上的字体文件

p {
  user-select: none;
}

Others

border-collpase
border-spacing
- caption-side
- color
- cursor
- empty-cell
- list-image / position / type
- opacity

/* disable events on selected element */
pointer-events: none;

CSS3

Media-Query 技术

针对多屏幕以及屏幕尺寸的 CSS 适配。
Ref => css_media_query.md

滤镜

图层合成

正片叠底
高光
…

动画

具体可以参考 API 文档和 Developer 中的参考。

CSS3动画，简单，开发成本低。表现性能（平滑度）高于一般的JS DOM动画，因为浏览器会新开线程来操纵，控制动画序列，因而表现力更强。但劣势在于：大量计算、CPU杀手，不适合复杂和大型的DOM结构。

@keyframes
transition

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

animation
transform

CSS Variables

MDN Guide

:root {
  --main-bg-color: brown;
}
.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

我的文章：CSS 变量实战.md

规范

BEM
SMACSS
OOCSS
SUITCSS
Atomic

预处理技术

扩展 CSS 的语法，并以 DSL 的形式编译为 CSS。

Less
Stylus
Sass
…

Post 处理技术

PostCSS 结合一些典型的 prefixer / uglifier / cssnext / css-modules 等，from css to css。

CSS in JS

将 CSS 注入到模块化的 JS 代码中，类似于 ShadowDOM 的机制。

CSS 样式框架

为团队定制样式框架。

Bootstrap
SemanticUI
JuiceUI
FoundationUI
MaterialUI

Ref

30 Seconds of CSS: small & useful css tips