CSS
冷知识大全：从细节处看世界 虽然对于大多数前端开发者来说，CSS已经不再是新鲜事物，但是在实际的开发过程中，我们总是会发现一些看似微不足道，却又十分有趣或有用的CSS特性。这些所谓的“冷知识”往往由于实用性、巧妙之处或者是被人忽视而更显得珍贵。以下是我收集总结的CSS冷知识大全，希望能够给你带来新的思考和启示。
1. :not伪类选择器 :not伪类选择器可以作为其他选择器的一个补充，选择器表示匹配所有不符合指定选择器的元素。例如:not(.wrapper)将匹配所有不拥有class为wrapper的元素。
2. content属性 通过::before和::after伪元素，我们可以为元素添加内容。而content属性无法像普通属性一样直接修改，它具有很强的抽象性，通常用于将内容插入到页面的特定位置。例如：content: “Check out @harryroberts' talk about CSS”;
3. display: table-cell display: table-cell可以作为一种布局方式。它类似于将元素变为表格单元格，可以让文本垂直居中，同时避免了div布局带来的一些问题（如高度塌陷）。例如：.wrapper { display: table-cell; vertical-align: middle; }
4. position: sticky position: sticky可以使得一个元素在滚动到特定位置时停止移动，即（粘性定位）。这种定位在固定位置和非固定位置之间切换时非常有用，例如页面顶部的导航栏。例如：.nav { position: sticky; top: 0; }
5. “与”选择器 以逗号区分的多种选择器用于选择相同的元素，而“与”选择器将会同时匹配多个选择器，例如选择所有同时拥有class为active和data-state为finished的元素。例如：.active[data-state="finished"] { color: #f00; }
6. calc()函数 calc()函数用于计算长度，可以在多种CSS属性中使用，包括宽度(width)，高度(height)，内边距(padding)，外边距(margin)等。calc()中可以包含加减乘除等数学运算，甚至使用百分比等多种值。例如：.box { width: calc(100% - 20px); }
7. content-visibility属性 content-visibility属性可以帮助我们优化渲染性能，适用于具有大量DOM内容但又不必全部在首次加载时完全展示出来的情况。通过将元素设置为content-visibility：auto，我们可以在仅仅需要展示少量内容时直接跳过大部分的渲染工作，从而提高载入速度。例如：.content { content-visibility: auto; } 以上这些冷知识看似零散，但是它们在实际开发中展现出了强大的威力与扩展性。学习它们可以提高我们对CSS的理解，也能够让我们更加高效地完成开发任务。 总之，CSS冷知识大全是一个值得开发者深入研究的课题，通过琢磨这些看似细微的细节，我们或许能够发现更多CSS的未知可能。