0007.深入理解CSS ｜ 青训营笔记.md

[TOC]

一、CSS简要发展历史

1. 通过HTML提出：在早期的Web发展中，网页样式主要依赖于HTML元素属性，如<font>标签和bgcolor属性等，来控制页面的样式。随着Web技术的发展，这种方式逐渐显得不够灵活且难以维护。为了解决这个问题，CSS应运而生。CSS将样式与内容分离，使得网页样式的设计和维护变得更加简单高效。
2. CSS1：CSS1于1996年12月发布，是CSS的第一个正式版本。CSS1为Web开发者提供了基本的样式控制功能，包括字体、颜色、背景、边框、列表、定位等。这个版本使得开发者可以更方便地为网页添加样式，并且提高了网页的兼容性和可维护性。
3. CSS2：CSS2于1998年5月发布，是CSS的第二个版本。CSS2在CSS1的基础上新增了一些功能，如定位、浮动、层叠顺序（z-index）、生成内容、媒体查询等。这些新特性为Web开发者提供了更多的样式控制功能，使得网页布局和设计变得更加灵活。
4. CSS2.1：CSS2.1于2011年6月成为正式标准，是CSS2的一个修订版本。CSS2.1修复了CSS2中的一些错误，同时移除了一些不常用或难以实现的特性，提高了CSS的稳定性和互操作性。
5. CSS3：CSS3是CSS的最新版本，从2005年开始逐步推出。CSS3将CSS分为多个模块，每个模块负责一个特定的功能，如选择器、盒模型、背景和边框、文本效果、2D/3D转换、动画、过渡、多列布局等。这种模块化的设计使得CSS可以更快地更新和发展，同时也方便浏览器厂商逐步实现支持。CSS3引入了许多新特性和改进，大大丰富了Web开发者的工具箱，提高了网页的表现力和交互性。

二、课程范围

三、基础知识

1.层叠(Cascading)、优先级

优先程度==递减==：样式表来源、选择器优先级、源码位置。

重要程度==递增==：用户代理样式 浏览器默认样式、用户样式表 很少有、作者样式表 developer写的。

2.选择器优先级

1. 元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。
2. 类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。
3. ID选择器：根据元素的ID属性选择特定元素。例如，#my-element选择ID为my-element的元素。
4. 属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。
5. 伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。
6. 伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。
7. 组合选择器：通过组合多个选择器来选择符合所有条件的元素。
   • 后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。
   • 子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。
   • 相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。
   • 一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。
8. 多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。

3.由层叠概念引申出的css代码good practice(好习惯)

• 选择器尽量少用id(不好进行复用)
• 尽量不要用！important(后面想扩展的灵活性会被压缩)
• 自己的样式加载在引用库样式的后面(保证我们自己的样式优先生效)

4.继承

并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。

5.值和单位

6.盒模型

(1)实现三角形

/* 创建一个空的 div 元素，将其作为三角形 */
<div class="triangle"></div>

/* 为三角形添加样式 */
<style>
  .triangle {
    /* 将 div 的宽度和高度设置为 0，这样它本身不会占据空间 */
    width: 0;
    height: 0;

    /* 使用 border 来制作三角形 */
    /* 三角形的底边宽度，此处设为 100px */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;

    /* 三角形的高度，此处设为 100px */
    border-bottom: 100px solid red;

    /* 如果想创建其他方向的三角形，可以尝试更改 border 的设置 */
  }
</style>

(2)实现固定比例矩形

<div class="rectangle"></div>
<style>
.rectangle {
  /* 设置矩形的宽度 */
  width: 200px;

  /* 使用 aspect-ratio 属性设置矩形的宽高比为 4:3 */
  aspect-ratio: 4 / 3;

  /* 设置矩形的背景颜色和边框 */
  background-color: lightblue;
  border: 2px solid black;
}

</style>

(3)实现水平居中

<div class="container">
  <div class="centered">
      I am XiaoYu.
  </div>
</div>

/* 设置 body 和 html 的高度为 100%，这样才能让外层容器占据整个屏幕 */
html, body {
  height: 100%;
  margin: 0;
}

.container {
  /* 将容器的宽度设置为 100%，以使其占据整个屏幕宽度 */
  width: 100%;

  /* 使用 flex 布局将子元素水平居中 */
  display: flex;
  justify-content: center;
}

.centered {
  /* 设置要居中的元素的样式，例如背景色、内边距等 */
  background-color: lightblue;
  padding: 20px;
  border: 2px solid black;
}

7.负外边距

负外边距（negative margin）是 CSS 盒模型中的一个概念，它可以在盒子之间创建重叠或者调整盒子的位置。与正外边距（positive margin）增加空间不同，负外边距会减少空间。

四、布局和定位

1.常规流布局

常规流（Normal Flow）布局，也被称为文档流（Document Flow）布局，是浏览器默认的 CSS 布局方式。在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素（block-level elements）和行内元素（inline elements）。

2.块级格式化上下文(block formatting context)

格式化上下文的布局规范为：

• “在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin“属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
• 在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。

BFC本身是block formating context的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是fow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。

如何触发一个盒子的BFC特性？以下条件满足任何一个即可:

• display:flow-rootl inline-block;
• position: absolute | fixed:
• float:不为none;
• overflow:不为 visible.

3.外边距塌陷

外边距塌陷（Margin Collapsing）是 CSS 布局中一个特殊的现象，它发生在垂直方向上相邻的外边距（Margin）之间。当两个或多个垂直方向上相邻的外边距遇到时，它们会合并为一个外边距，而不是简单地相加。合并后的外边距大小等于相邻外边距中最大的一个。

消除外边距的方法：

1. 使用内边距（Padding）： 可以使用内边距替代外边距来创建垂直间距。这样可以避免外边距塌陷的问题。

2. 使用边框（Border）： 如果父元素有边框，那么父元素和子元素的外边距将不会发生塌陷。给父元素添加一个透明的边框即可消除外边距塌陷。

   .parent {
     border-top: 1px solid transparent;
   }
   

3. 创建 BFC（Block Formatting Context）： 通过给父元素创建一个 BFC，可以阻止外边距塌陷。创建 BFC 的方法有很多，例如设置 overflow 属性为 auto、hidden 或 scroll。

   .parent {
     overflow: hidden;
   }
   

4. 使用伪元素（Pseudo-element）： 在父元素内部添加一个 ::before 伪元素，并设置其 display 属性为 table。这样可以创建一个新的 BFC，从而避免外边距塌陷

   .parent::before {
     content: '';
     display: table;
   }
   

5. 将元素转换为 Flex 或 Grid 容器： 将父元素设置为 Flex 或 Grid 容器时，外边距塌陷不再发生

   .parent {
     display: flex;
     flex-direction: column;
   }
   

   .parent {
     display: grid;
   }
   

4.内联级格式化上下文

内联级格式化上下文（Inline Formatting Context，简称 IFC）是 CSS 渲染模型中的一种布局类型。在内联级格式化上下文中，元素以水平方向进行布局。这些元素称为内联级元素（Inline-level elements），它们不会独占一行，而是与其他内联级元素排在同一行内。常见的内联级元素有 <span>、<em>、<strong>、<a> 等。需要注意的是，内联级元素的宽度只受内容本身的宽度影响，而无法通过设置 width 和 height 属性进行调整

“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对齐，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.)"

5.弹性盒子

使用弹性盒子布局的示例

展示灵活的文件长度省略演示Using Flexbox and text ellipsis together | CSS-Tricks - CSS-Tricks

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>

.filename {
  display: flex;
  min-width: 0;
}

.filename__base {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.filename__extension {
  flex-shrink: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  max-width: 470px;
  margin: 0 50px;
  font-size: 20px;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

显示筛子的六个不同的面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dice Faces with Flexbox</title>
  <style>
      .container{
          display: flex;
      }
      .dice {
          display: flex;
          flex-wrap: wrap;
          width: 120px;
          height: 120px;
          background-color: #eee;
          border: 1px solid #ccc;
          margin: 10px;
      }

      .dice-row {
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: 10px;
      }

      .dot {
          width: 20px;
          height: 20px;
          background-color: black;
          border-radius: 50%;
      }

      .empty {
          width: 20px;
          height: 20px;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="dice">
    <div class="dice-row">
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="empty"></div>
    </div>
    <div class="dice-row">
      <div class="empty"></div>
      <div class="dot"></div>
      <div class="empty"></div>
    </div>
    <div class="dice-row">
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="empty"></div>
    </div>
  </div>

  <div class="dice">
    <div class="dice-row">
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="dot"></div>
    </div>
    <div class="dice-row">
      <div class="empty"></div>
      <div class="dot"></div>
      <div class="empty"></div>
    </div>
    <div class="dice-row">
      <div class="dot"></div>
      <div class="empty"></div>
      <div class="empty"></div>
    </div>
  </div>

  <div class="dice">
    <div class="dice-row">
      <div class="dot"></div>
      <div class="empty"></div>
      <div class="dot"></div>
    </div>
    <div class="dice-row">
      <div class="empty"></div>
      <div class="dot"></div>
      <div class="empty"></div>
    </div>
    <div class="dice-row">
      <div class="dot"></div>
      <div class="empty"></div>
      <div class="dot"></div>
    </div>
  </div>
</div>

</body>
</html>

6.Grid

CSS Grid Layout（网格布局）是一个用于创建二维网格的 CSS 布局技术。它允许你以行和列的形式设计复杂的布局，而不需要使用浮动、定位和其他传统布局方法。Grid 布局特别适合用于构建响应式和自适应设计，因为它可以轻松地在不同的屏幕尺寸和设备上调整布局。

筛子示例(Grid版本)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dice Faces with Grid</title>
  <style>
      .dice {
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);
          width: 100px;
          height: 100px;
          background-color: #eee;
          border: 1px solid #ccc;
          margin-bottom: 10px;
      }

      .dot {
          width: 20px;
          height: 20px;
          background-color: black;
          border-radius: 50%;
          align-self: center;
          justify-self: center;
      }

      .empty {
          width: 20px;
          height: 20px;
      }
  </style>
</head>
<body>
<!-- Dice Face 1 -->
<div class="dice">
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
</div>

<!-- Dice Face 3 -->
<div class="dice">
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="empty"></div>
</div>

<!-- Dice Face 5 -->
<div class="dice">
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
  <div class="empty"></div>
  <div class="dot"></div>
</div>
</body>
</html>

五、层叠上下文(The Stacking Context)

层叠上下文是对TML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开

层叠上下文（Stacking Context）它用于决定元素在页面上的层叠顺序。层叠上下文由具有特定属性的元素生成，这些属性会影响该元素及其子元素在 z 轴上的渲染顺序。z 轴是垂直于屏幕的轴线，用于表示页面中元素的前后顺序

1.层叠上下文(The stacking context) 一 stacking order

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序。

在同一个层叠上下文中，元素之间的层叠顺序受多种因素影响，包括元素的类型（如块级、内联、浮动或定位元素）、z-index 值以及在 HTML 代码中的顺序。

2.编写z-index的建议

• 使用css变量或者预处理语言的变量，管理z-index的值
• 将预设间隔设置10或100，方便后续的插入

六、变形、过渡、动画

1.transform 变形 3D

筛子案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D XiaoYu的彩蛋</title>
  <style>
      /* 设置骰子的基本样式 */
      .dice {
          width: 100px; /* 骰子的宽度 */
          height: 100px; /* 骰子的高度 */
          position: relative; /* 使用相对定位，使子元素可以相对于此元素进行定位 */
          perspective: 800px; /* 设置 3D 视图距离，让骰子看起来有透视效果 */
          margin: 200px; /* 设置外边距，将骰子放置在页面中间 */
      }

      /* 设置骰子容器的样式，用于包含 6 个骰子面 */
      .dice-container {
          width: 100%; /* 容器宽度设置为 100%，使其和父元素（骰子）一样宽 */
          height: 100%; /* 容器高度设置为 100%，使其和父元素（骰子）一样高 */
          position: absolute; /* 使用绝对定位，使容器相对于骰子定位 */
          animation: rotate 20s linear infinite; /* 应用旋转动画，持续时间为 20 秒，线性速度，无限循环 */
          transform-style: preserve-3d; /* 保留 3D 转换，使子元素的 3D 转换相对于容器生效 */
      }

      /* 定义旋转动画关键帧 */
      @keyframes rotate {
          0% { transform: rotateX(0deg) rotateY(0deg); } /* 初始状态：无旋转 */
          100% { transform: rotateX(3600deg) rotateY(7200deg); } /* 结束状态：绕 X 轴旋转 3600 度，绕 Y 轴旋转 7200 度 */
      }

      /* 设置每个骰子面的基本样式 */
      .face {
          width: 100%; /* 面的宽度设置为 100%，使其和父元素（容器）一样宽 */
          height: 100%; /* 面的高度设置为 100%，使其和父元素（容器）一样高 */
          position: absolute; /* 使用绝对定位，使骰子面相对于容器定位 */
          display: flex; /* 使用 flex 布局，使骰子点居中显示 */
          justify-content: center; /* 水平居中对齐 */
          align-items: center; /* 垂直居中对齐 */
          background-color: #eee; /* 骰子面的背景颜色 */
          border: 1px solid #ccc; /* 骰子面的边框 */
          backface-visibility: hidden; /* 隐藏背面，使骰子在旋转时不显示背面 */
      }

      /* 设置骰子点的基本样式 */
      .dot {
          width: 20px; /* 骰子点的宽度 */
          height: 20px;
          /* 骰子点的高度 */
          background-color: black; /* 骰子点的背景颜色 */
          border-radius: 50%; /* 骰子点的圆角，设置为 50% 使其呈现为圆形 */
      }

      .face-1 {
          transform: rotateY(0deg) translateZ(50px);
      }

      .face-2 {
          transform: rotateY(90deg) translateZ(50px);
      }

      .face-3 {
          transform: rotateY(180deg) translateZ(50px);
      }

      .face-4 {
          transform: rotateY(270deg) translateZ(50px);
      }

      .face-5 {
          transform: rotateX(90deg) translateZ(50px);
      }

      .face-6 {
          transform: rotateX(-90deg) translateZ(50px);
      }
  </style>
</head>
<body>
<div class="dice">
  <div class="dice-container">
    <div class="face face-1">
      <div class="dot" style="background-color: red"></div>
    </div>
    <div class="face face-2">
      <div class="dot" style="position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-3">
      <div class="dot"></div>
      <div class="dot" style="position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-4">
      <div class="dot" style="position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-5">
      <div class="dot"></div>
      <div class="dot" style="position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-6">
      <div class="dot" style="position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot" style="position:absolute; bottom: 10px; right: 10px;"></div>
      <div class="dot" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
    </div>
  </div>
</div>
</body>
</html>

2.transition过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

div {
	transition:<property> <duration> <timing-function> <delay>
}

其中timing-function一般有三种用法：线性(（linear)、贝塞尔曲线(cubic-bezier()或ease-in等)、阶跃(step)

3.transform、transition、animation---性能相关

如何写动画性能更好:

• 尽量不用触发reflow的属性
• 在遇到性能问题时可以触发硬件加速，比如设置wil-change属性、设transform3d等
• 尽量使用tansform 和 opacity 去写动画

七、响应式设计

1.响应式设计推荐遵循的原则

• 优先选用流式布局，如百分比、tex、grid等
• 使用响应式图片，匹配尺寸，节省带宽
• 使用媒体查询为不同的设备类型做适配
• 给移动端设备设置简单、统一的视口
• 使用相对长度，em、rem、 ww 做为长度度量

2.使用媒体查询的一些Tips

• 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
• 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
• 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

3.DPI && PPI

• dpi(dots per inch)：每英寸多少点。
• ppi((pixels per inch)：每英寸多少像素数

当用于描述显示器设备时ppi与dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距

4.CSS像素

CSS 像素（CSS pixel）是一个抽象的单位，用于在网页设计中表示屏幕上的可见元素的尺寸。它不同于物理像素，物理像素是显示器或其他输出设备用来显示内容的实际点。CSS 像素与设备像素比例（device pixel ratio，DPR）有关，DPR 是物理像素与 CSS 像素之间的比例。

在许多情况下，一个 CSS 像素可能等于一个物理像素。然而，在高分辨率屏幕（例如 Retina 屏幕）上，一个 CSS 像素可能对应多个物理像素。这是因为高分辨率屏幕具有更高的像素密度，即更多的物理像素被压缩到相同的显示区域。为了保持页面元素在不同屏幕上的可读性和布局一致性，浏览器会自动调整 CSS 像素与物理像素之间的映射。

设备像素比（DPR）是衡量设备物理像素与 CSS 像素之间关系的关键因素。例如，具有 2x 的 DPR 的设备上，一个 CSS 像素实际上占据了 2x2 = 4 个物理像素。在具有 3x 的 DPR 的设备上，一个 CSS 像素占据了 3x3 = 9 个物理像素。

要确定设备的 DPR，可以使用 JavaScript 的 window.devicePixelRatio 属性。为了更好地适应高分辨率屏幕，可以使用媒体查询和响应式图片技术来提供针对不同 DPR 的优化图像。

5.DPR设备像素比

设备像素比（Device Pixel Ratio，简称 DPR）是一个与屏幕分辨率相关的概念。它表示一个 CSS 像素与设备物理像素之间的比例。简单地说，DPR 描述了一个 CSS 像素占据了多少个设备物理像素。

在普通屏幕上（例如普通显示器和早期的移动设备屏幕），DPR 通常为 1，这意味着一个 CSS 像素对应一个物理像素。然而，在高分辨率屏幕上（例如 Retina 显示屏或其他高 DPI 屏幕），DPR 的值可能大于 1，这意味着一个 CSS 像素占据了多个物理像素。这样的设计使得在高分辨率屏幕上显示的内容更加清晰和细腻。

6.移动端的viewport

在移动端，viewport 是一个重要的概念，它用于定义浏览器窗口中可见区域的大小和缩放。

移动设备的屏幕尺寸和分辨率通常比桌面设备小得多。默认情况下，许多移动浏览器将尝试将整个网页缩放到屏幕的宽度以适应屏幕尺寸，这可能导致文本和元素变得过小，难以阅读和操作。为了解决这个问题，可以使用 viewport 元标签来控制浏览器如何显示页面内容。

7.相对长度的使用

em 是一种相对长度单位，它的大小是基于其最近的父元素的字体大小。在 CSS 中，em 常用于设置字体大小、行高、边距和填充等属性。使用 em 可以帮助你实现可伸缩和响应式的设计，因为它们会根据父元素的字体大小自动调整。

rem 是一种相对单位，表示相对于根元素（即 HTML 元素）的字体大小。与 em 不同，rem 不会受嵌套元素字体大小的影响，因为它直接依赖于根元素的字体大小。这降低了复杂性并使 rem 更易于控制和预测。作为相对单位，rem 可以适应不同屏幕尺寸，因此在创建响应式设计和组件时尤为有用。

vw（viewport width）和 vh（viewport height）是两种相对长度单位，用于表示相对于视口宽度和高度的尺寸。这两个单位主要用于响应式设计，以适应不同屏幕尺寸和设备。

需要注意的是，在某些情况下，vw 和 vh 可能导致内容溢出或不可见。因此，在使用这些单位时，需要确保充分测试并为溢出内容提供适当的处理

八、CSS生态相关

• 语言增强：预处理器、后处理器
• 工程架构：CSS模块化、CSS-ln-Js、Atomic CSS

1.语言增强 -- CSS预处理器

	scss	less	stylus
css语法兼容	兼容	兼容	常规兼容
可编程能力	较强：逻辑处理能力丰富	较弱：不支持自定义函数	较强
社区活跃、使用人数	最多star 3.5k；burbon库支持	较多star 16.9k；twitter bootstrap框架	相对少 star 11k;

2.语言增强 -- CSS后处理器

CSS 后处理器是一种工具，它在 CSS 预处理器处理生成的 CSS 代码之后运行。其主要目的是优化和改进最终的 CSS 输出，以提高性能、浏览器兼容性和代码可维护性。

CSS 后处理器使用 JavaScript 插件（或其他编程语言编写的工具）来处理 CSS，这些插件可以解决不同的问题或执行特定任务。

3.工程架构 -- CSS模块化

CSS Module 就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的.

4.工程架构 -- styled.component 机制浅析

1. 生成唯一的类名：styled-components 为每个创建的样式化组件生成一个唯一的类名。这可以确保样式不会与其他组件冲突，并实现局部作用域。
2. 动态属性和主题：styled-components 支持通过插值将动态属性和主题值注入到样式中。这允许你根据组件的属性或应用程序的主题来调整样式
3. 样式注入：当你在应用程序中使用样式化组件时，styled-components 会将生成的样式注入到 DOM 中。通常情况下，这是通过在页面中添加一个 style 标签来实现的，该标签包含所有组件的样式

5.工程架构 -- 原子化CSS

CSS 原子化的优缺点

1. 减少了 css 体积，提高了 css 复用

2. 减少起名的复杂度

3. 增加了记忆成本 将 css 拆分为原子之后，你势必要记住一些 class 才能书写，哪怕 tailwindcss 提供了完善的工具链，你写 background，也要记住开头是 bg