一些常被你忽略的CSS小知识【必看】

1. calc()函数

calc() 函数可以用来计算一个长度值。该函数支持加、减、乘、除四种操作符，语法如下：

width: calc(100% - 20px);

该例中，元素的宽度被设置为父元素宽度减去20像素。

例如，我们可以使用 calc() 函数实现两栏布局，左侧宽度为固定宽度，右侧占满剩余宽度。

.container {
  width: 100%;
  display: flex;
}

.left {
  width: 200px;
}

.right {
  width: calc(100% - 200px);
}

2. :not() 伪类

:not() 伪类用于选择所有除了指定元素之外的元素。它接受一个选择器作为参数，可以对该选择器内排除的元素进行排除。例如：

li:not(.active) {
  color: #999;
}

该例中，选择所有非 .active 的 li 元素，将它们的颜色设置为灰色。

更进一步，我们可以使用 :not() 伪类来为所有除了H1-H6之外的所有标签元素设置样式：

body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 16px;
}

该例中，选择除了H1-H6之外的所有标签元素，将它们的字体大小设置为16像素。

总之，以上两个小技巧只是 CSS 中的冰山一角，CSS 本身有很多特性和技巧，值得我们去不断探索。