CSS 技巧

Refers:

  1. CSS 奇技淫巧十八招 – WMの物語
  2. https://github.com/AllThingsSmitty/css-protips#table-of-contents

1.

1
2
3
4
5
6
7
html {
  height: 100%;
}

body {
  height: 100%;
}

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

斯坦福 CS142 课程相关图片 ◎ 斯坦福 CS142 课程相关图片

2.

1
2
3
4
5
6
7
8
9
elem {
  line-height: 1.1;
  font-size: 30px;
}

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

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

3. 区块居中

1
2
3
.block {
  margin: 0 auto;
}

4. position 进行相对定位

5. 除第一项添加样式

6. 简化的 CSS reset

1
2
3
4
5
6
7
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Normalize.css 简单不少。 box-sizing 能让我使用盒子模型。

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

7. 继承 box-sizing

1
2
3
4
5
6
7
8
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

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

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

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

1
2
3
4
5
6
7
8
button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

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

1
2
3
button {
  all: unset;
}

注意allunset 在 IE11 不受支持。

Layout of comment panels