Tianhe Gao

css-skills

Refers:

## 1.

```css html { height: 100%; }

body { height: 100%; } ```

在找到别人的解答时，我以为对 html body 进行设置 height 只需要其中一个，但结果却不是。为什么只有当 2 个都设置时，才会出现那样的样子呢？

![]()

## 2.

```css elem { line-height: 1.1; font-size: 30px; }

elem2 { line-height: 1.1em; font-size: 15px; } ```

两个元素的行高计算：1.1x30, 1.1x15。前者更大，行高更大。

## 3. 区块居中

```css .block { margin: 0 auto; } ```

## 4. position 进行相对定位

## 5. 除第一项添加样式

## 6. 简化的 CSS reset

```css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ```

比 [Normalize.css](http://necolas.github.io/normalize.css/) 简单不少。`box-sizing` 能让我使用盒子模型。

**注意**：如果选择如下一个这般继承 `box-sizing` 的话，就不要在重置 CSS 中使用 `box-sizing`。

## 7. 继承 `box-sizing`

```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ```

这使得改变插件或其他利用其他行为的组件的 `box-sizing` 变得更加容易。

## 8. 使用 `unset` 而不是手动重置所有属性

像这样一个属性一个属性地重置是不必要的。

```css button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; } ```

选中所有属性有个快捷方式：`all`。把它设为 `unset` 就可以实现上述那么长达成的效果。

```css button { all: unset; } ```

**注意**：`all`、`unset` 在 IE11 不受支持。