CSS 样式
position:fixed 在页面里不起作用
position:fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
position:sticky
一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。同时，sticky 元素效果完全受制于其父元素，其位置也不会脱离其父元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<style>
body {
height: 200vh;
}
div {
height: 100px;
margin-top: 50px;
border: solid deepskyblue;
}
nav {
position: sticky;
top: 20px;
background: lightskyblue;
}
</style>
<body>
<div>
<nav>导航</nav>
</div>
</body>对于 nav 当前可滚动的祖先为 body 元素，它应该保持与 body top:20px 的定位，然而由于它的父元素 div 的 margin-top:100px,它的位置将受限于 div 中最顶部，直到在滚动过程中它逐步满足 top20:20px,最终又被父元素 div 带走。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!-- 由于sticky元素会受限于其父元素，可以用来实现标题轮换置顶的效果 -->
<style>
.container {
height: 100px;
overflow: scroll;
}
h1 {
position: sticky;
top: 0;
background-color: black;
color: white;
}
</style>
<div class="container">
<section>
<h1>caption1</h1>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem maiores tempore dolores doloribus labore
aspernatur provident nihil distinctio! Voluptates dolor consequatur expedita sequi, pariatur
</div>
</section>
<section>
<h1>caption2</h1>
<div>
voluptates labore quidem. Architecto debitis sed quasi. Corrupti sequi voluptas itaque! Dolorum, similique
minima. Aspernatur. Sunt ea officia accusantium ducimus sint dolorum adipisci cupiditate numquam harum tempore
</div>
</section>
<section>
<h1>caption3</h1>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa dolorem nemo necessitatibus! Non exercitationem a
quis excepturi fugiat officiis repellat unde delectus repudiandae qui consequatur similique quia, laudantium
</div>
</section>
</div>position:sticky 在 safari 浏览器里不起作用
position: -webkit-sticky;在 safari 浏览器里，部分元素中的字体 font-size 要大于正常设定字体。
-webkit-text-size-adjust: 100%;因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 视窗 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。
因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。webkit-text-size-adjust
pre 和 code 标签内容在网页中默认为等宽字体
box-sizing 应该如何计算一个元素的总宽度和总高度。
content-box 默认值，width 与 height 只包括内容的宽和高，不包括边框(border)，内边距(padding)，外边距(margin)。注意：内边距、边框和外边距都在这个盒子的外部。
盒子宽度 = width(内容的宽度) + border + paddingborder-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。
盒子宽度 = width = border + padding + 内容的宽度
伪类和伪元素
CSS 伪类(pseudo-classes)
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候(动态伪类)。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。语法
:pseudo-class-name:root 匹配文档树的根元素，在 html 中比 html 优先级更高，通常用来声明全局 CSS 变量。
:not() 用来匹配不符合一组选择器的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15/*非dark模式下的input*/
html:not(html[data-theme="dark"]) input {
background: var(--background-primary-color)
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}:is() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14:is(header, main) p:hover {
color: red;
cursor: pointer;
}
/*等同于*/
header p:hover,
main p:hover{
color: red;
cursor: pointer;
}
/*light模式下的input*/
:is(html[data-theme="light"]) input{
background: var(--background-primary-color)
}CSS 伪元素(pseudo-element)
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。语法
::pseudo-element-name早期的伪元素曾使用单冒号的语法，所以浏览器支持带有单双冒号语法的伪元素
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::selection 匹配文档中被选择的那部分。