CSS的一些小技巧

之前做的一个笔记，在一个github上翻译而来，原文哪来的忘了。

1. CSS样式重置：

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

2. 继承box-sizing：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

3. 使用 :not() 伪类来定义导航栏的分割：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

4. 在body设置 line-height 来使文本元素继承同样的行高：

body {
  line-height: 1.5;
}

5. 使用 “Lobotomized Owl” 选择器（使相邻的元素都有同样的行为）：

* + * {
  margin-top: 1.5em;
}

6. 通过给表格 table-layout 属性设置 值为 fixed 可以让单元格的宽度一致：

.calendar {
  table-layout: fixed;
}

7. <a>链接有href属性，但是没有文本内容，可以使用属性选择器的方式来将对应的地址设为链接文本：

a[href^="http"]:empty::before {
  content: attr(href);
}

8. 保持固定长宽比的盒子：

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

将padding设置为20%，可以使得盒子的高度等于宽度的20%，子元素div的保持长宽比（100% / 20% = 5：1）

9. 伪元素 xx::before 和 xx::after 是根据他们前面的元素xx进行定位的。

这里强调一下：

1. 记得多考虑能不能用 伪类和伪元素来解决问题。
2. 有时使用 :not() 可以简单地解决复杂问题。