CSS 备忘录

#CSS #备忘录 2022/04/24 22:41:53

CSS 样式
伪类和伪元素

CSS 样式

position:fixed 在页面里不起作用

position:fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

position:sticky

一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。同时，sticky 元素效果完全受制于其父元素，其位置也不会脱离其父元素。

<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 带走。

<!-- 由于 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 + padding

border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。盒子宽度 = width = border + padding + 内容的宽度

伪类和伪元素

CSS 伪类 (pseudo-classes) 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候 (动态伪类)。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

语法:pseudo-class-name

:root 匹配文档树的根元素，在 html 中比 html 优先级更高，通常用来声明全局 CSS 变量。

:not() 用来匹配不符合一组选择器的元素。
```
/*非 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() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
```
: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 匹配文档中被选择的那部分。

参考链接：