• 为什么学习CSS

  1. 网页款式和布局：CSS（层叠款式表）是一种用于描绘HTML元素在网页上出现的款式和布局的言语。经过学习CSS，咱们能够使网页看起来愈加美观、易于运用，为用户供给更好的体会。
  2. 设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能协助咱们针对不同的设备（如桌面电脑、平板电脑、手机等）和浏览器（如Chrome、Firefox、Safari等）优化网页款式，保证在各种环境下都能供给一致的用户体会。
  3. 网页功用优化：经过有效地运用CSS，咱们能够削减网页的加载时刻、优化烘托速度，进步网站的功用。这关于用户体会和搜索引擎优化（SEO）都十分重要。
  4. 动画和交互：CSS3引进了许多新特性，如动画、过渡、变形等，使得咱们能够仅运用CSS来完结一些本来需求JavaScript的动画和交互效果。这样能够削减对JavaScript的依靠，进步网站功用。
  5. 呼应式规划：CSS的媒体查询功用使得咱们能够为不同屏幕尺度的设备创立自习惯的布局，完结呼应式规划。这关于进步网站在移动设备上的用户体会和习惯性至关重要。
  6. 进步开发功率：把握CSS能够协助咱们更快速地完结网页开发。经过安排杰出的款式表，咱们能够在多个页面之间重用款式，削减重复劳动，进步开发功率。
  7. 前端开发的根本技术：CSS是前端开发的三大柱石之一（HTML、CSS和JavaScript），把握CSS是成为一名合格的前端开发人员的根本要求。学习CSS能够为咱们打开Web开发领域的大门，为咱们的工作开展供给更多时机。

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开发者的东西箱，进步了网页的表现力和交互性。

课程规模

基础知识

Casading规矩(层叠优先集)

你觉得哪个色彩的会收效？

层叠三大规矩

款式表来历

在CSS中，款式表能够依照来历被划分为三种类型：用户署理款式、用户款式表和作者款式表。

1. 用户署理款式（User Agent Styles）：用户署理（User Agent，一般指浏览器）为HTML元素供给了一组默许的款式。这些款式在没有任何外部款式表的情况下运用于网页，以保证即便在没有CSS的情况下，网页内容依然具有根本的可读性和可拜访性。用户署理款式因浏览器而异，一般包含根本的字体、色彩、边距等设置。
2. 用户款式表（User Stylesheets）：用户款式表是由用户自界说的款式表，能够用于掩盖用户署理款式和作者款式表中的某些款式。用户能够依据自己的偏好设置用户款式表，例如调整字体巨细、色彩等。用户款式表首要用于改进网页的可拜访性和可用性，满足单个用户的特别需求。在现代浏览器中，用户能够经过安装扩展或修正浏览器设置来运用自界说的用户款式表。
3. 作者款式表（Author Stylesheets）：作者款式表是由网页开发者创立的款式表，用于界说网页的布局、外观和交互。作者款式表一般是网页规划的首要组成部分，它能够掩盖用户署理款式和用户款式表中的款式。作者款式表能够包含内联款式、嵌入式款式和外部款式表，以及经过@import引进的其他款式表。

CSS的层叠规矩（Cascading）决议了这三种类型的款式表怎么相互效果和叠加。在确认一个元素的终究款式时，CSS会依据特指性（Specificity）、来历和声明的次序来解析和运用这些款式表中的规矩。这种机制答运用户署理、用户和作者之间完结款式的协同和定制

挑选器优先级

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>元素。

在CSS中，挑选器的优先级（也称为特指性，Specificity）决议了当多个规矩运用于同一元素时，哪个规矩将终究收效。特指性是依据挑选器的组成部分核算出来的，首要触及以下几个层次：

1. 内联款式（Inline styles）：内联款式具有最高的优先级，它们直接运用于HTML元素的style特色上。例如，<div>。
2. ID挑选器：ID挑选器具有较高的优先级，它们经过元素的ID特色进行挑选。例如，#my-element。
3. 类挑选器、特色挑选器和伪类：这一层次的优先级低于ID挑选器，包含类挑选器（如.my-class）、特色挑选器（如[data-attribute]）和伪类（如:hover）。
4. 元素挑选器和伪元素：这一层次的优先级最低，包含元素挑选器（如div）和伪元素（如::before）。

特指性是经过给每个层次的挑选器分配权重并核算总和来确认的。例如：

• 内联款式的权重为 1000
• ID挑选器的权重为 100
• 类挑选器、特色挑选器和伪类的权重为 10
• 元素挑选器和伪元素的权重为 1

当多个挑选器运用于同一元素时，具有较高特指性的挑选器将掩盖较低特指性的挑选器。假如两个挑选器具有相同的特指性，那么它们将依照在CSS代码中出现的次序进行解析，终究出现的挑选器将掩盖之前的挑选器。

需求留意的是，!important声明能够改变规矩的优先级。在同一特指性级别下，带有!important声明的规矩将优先于没有!important声明的规矩。然而，假如有多个!important声明抵触，那么依然需求参阅特指性和源代码次序来确认哪个规矩收效。

• 字节供给这一张最标准的核算表，分为a，b，c。其实就别离相当于权重值100，10，1。正常情况下，10倍的权重值差距根本上是不会被追赶上的。
• 咱们经过这张表能够形象的看出谁的优先度更高，你能够把他的逗号去掉，直接当作整数看，比如(0,1,2)相当于12，(1,0,1)相当于101。谁的数字大谁的权重值就高，数字就相当于权重值了

源码方位

以下收效的款式效果是哪个？

• 在这段代码中，CSS 优先级从高到低如下：

  1. .red 挑选器（在内联款式表中界说）
  2. .blue 挑选器（在外部款式表 index.css 中界说）
  3. .green 挑选器（在外部款式表 index.css 中界说）

  尽管这些挑选器都具有相同的优先级权重，可是它们在款式表中的次序决议了哪一个收效。依据 CSS 的规矩，当有多个相同优先级的挑选器存在时，终究出现的挑选器将具有更高的优先级(终究声明的收效)。

  在这个比如中，<h1> 标签一起具有green、blue 和 red 类。首要，green 类的款式被运用，然后被 blue 类的款式掩盖(red类是在link类上面去声明的，所以red类反而是最先被掩盖的)。因而，这段代码的终究效果是< h1 >标签的文字色彩为绿色，字体巨细为 48 像素（由.green 类操控）。

  color: green;
  font-size: 48px;
  

//HTML文件
<head>
  <style>
    .red{
      color:red;
     }
  </style>
  <link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<h1 class="green blue red">
   A Tittle
</h1>
</body>

/*index.css文件*/
.blue{
  color:blue;
  font-size:48px;
}
​
.green{
  color:green;
}

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

1. 挑选器尽量少用id(不好进行复用)
2. 尽量不要用！important(后边想扩展的灵敏性会被紧缩)
3. 自己的款式加载在引证库款式的后边(保证咱们自己的款式优先收效)

承继

CSS 中的承继是一种机制，经过它，子元素能够从其父元素接收款式特色值。这使得咱们能够在一个当地设置通用款式，然后让其他元素主动承继这些款式，然后削减代码的重复和进步可保护性。

并非一切的 CSS 特色都是可承继的。一些常见的可承继特色包含：color、font、text-align等。这些特色在父元素上设置后，子元素会主动承继这些款式，除非子元素上明确设置了不同的值。

值和单位

单位

1. 长度单位

   • 肯定长度：

     • px（像素）：最常见的单位，一般用于屏幕显现。一个像素对应于屏幕上的一个点。
     • cm（厘米）、mm（毫米）、in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位首要用于打印媒体，它们依据物理尺度。

   • 相对长度：

     • em：相关于当前元素的字体巨细。例如，假如当前字体巨细是 16px，那么 2em 等于 32px。
     • rem：相关于根元素（一般是 <html>）的字体巨细。与 em 相似，但一直依据根元素的字体巨细。
     • vw（视窗宽度）、vh（视窗高度）：相关于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
     • vmin、vmax：别离等于视口宽度和高度中的较小值和较大值。

2. 视点单位

   • deg（度）：视点单位，一圈有 360 度。
   • rad（弧度）：视点单位，一圈有 2 弧度。
   • grad（梯度）：视点单位，一圈有 400 梯度。
   • turn：视点单位，一圈等于 1 turn。

3. 时刻单位

   • s（秒）：时刻单位，用于表明秒。
   • ms（毫秒）：时刻单位，用于表明毫秒，1ms 等于 0.001s。

4. 分辨率单位

   • dpi（每英寸点数）：表明每英寸内有多少个点（像素）。
   • dpcm（每厘米点数）：表明每厘米内有多少个点（像素）。
   • dppx（每像素点数）：表明每像素内有多少个点（像素），1dppx 等于 96dpi。

值

1. 文本类：

   • 字符串：用于表明文本值，一般用双引号或单引号括起来。例如：content: "Hello, World!";
   • 关键字：用于表明特定特色的预界说值。例如：display: block;

2. 数值类：

   • 整数：表明一个没有小数部分的数字值。例如：z-index: 3;
   • 小数：表明一个有小数部分的数字值。例如：opacity: 0.5;
   • 百分比：表明一个依据另一个值的百分比。例如：width: 50%;
   • 长度：表明一个具有单位的长度值。例如：width: 100px; 或 padding: 1em;
   • 视点：表明一个具有视点单位的值。例如：rotate(45deg);

3. 色彩：

   • 预界说色彩：运用 CSS 中预界说的色彩名称。例如：color: red;
   • 十六进制色彩：运用 3 或 6 个十六进制数字表明色彩。例如：color: #ff0000; 或 color: #f00;
   • RGB 色彩：运用三个介于 0 和 255 之间的整数表明色彩。例如：color: rgb(255, 0, 0);
   • RGBA 色彩：与 RGB 相似，但还包含一个表明透明度的值（0 到 1 之间的小数）。例如：color: rgba(255, 0, 0, 0.5);
   • HSL 色彩：运用色相（0 到 360 之间的整数）、饱和度（百分比）和亮度（百分比）表明色彩。例如：color: hsl(0, 100%, 50%);
   • HSLA 色彩：与 HSL 相似，但还包含一个表明透明度的值（0 到 1 之间的小数）。例如：color: hsla(0, 100%, 50%, 0.5);

4. 函数生成：

   • URL：运用 url() 函数表明一个资源的 URL。例如：background-image: url("image.jpg");
   • calc()：运用 calc() 函数进行数学核算。例如：width: calc(100% - 20px);
   • linear-gradient()：运用 linear-gradient() 函数创立线性突变。例如：background-image: linear-gradient(to right, red, blue);
   • radial-gradient()：运用 radial-gradient() 函数创立径向突变。例如：background-image: radial-gradient(circle, red, blue);
   • transform 函数：例如：rotate()、scale()、translate() 和 skew() 等，用于在不同轴上

盒模型

视觉格局化模型：视觉格局化模型 – CSS：层叠款式表 | MDN (mozilla.org)

完结三角形

/* 创立一个空的 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>

完结固定份额矩形

<div class="rectangle"></div>
<style>
.rectangle {
 /* 设置矩形的宽度 */
 width: 200px;
​
 /* 运用 aspect-ratio 特色设置矩形的宽高比为 4:3 */
 aspect-ratio: 4 / 3;
​
 /* 设置矩形的布景色彩和边框 */
 background-color: lightblue;
 border: 2px solid black;
}
​
</style>

完结水平居中

<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;
}

完结突变边框

和视频中不相同的思路。采用了伪元素

1. 突变边框的完结：经过创立一个伪元素并设置其布景为突变，咱们能够完结一个突变边框的效果。伪元素将掩盖在其父元素（.gradient-border）上，但坐落父元素的内容之下。
2. 边框宽度操控：设置伪元素的 padding，咱们能够操控突变边框的宽度。伪元素的 padding 便是突变边框的宽度。
3. 与父元素内容分离：伪元素独立于其父元素的内容，因而咱们能够在不影响父元素内容的情况下完结突变边框效果。这使得父元素的内容能够维持其原始款式（例如，布景色彩、边框和圆角），而伪元素专门担任完结突变边框效果。

伪元素在这儿中首要用于创立一个突变边框，一起不影响其父元素的内容。这种办法防止了直接修正父元素款式的杂乱性，使得完结突变边框变得愈加简略。

<div class="gradient-border">
 <p>这是一个带突变边框的元素。</p>
</div>
​
<style>
.gradient-border {
 /* 设置内边距，以便为伪元素留出空间 */
 padding: 10px;
 position: relative;
 display: inline-block;
}
​
.gradient-border::before {
 /* 创立伪元素，并设置为相关于其父元素定位 */
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
​
 /* 运用突变作为边框的布景 */
 background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
​
 /* 设置边框的宽度 */
 padding: 3px;
​
 /* 使伪元素的边框圆角与父元素的边框圆角相匹配 */
 border-radius: 5px;
}
​
p {
 /* 设置阶段的布景色彩、边框和圆角 */
 background-color: white;
 border: 1px solid rgba(0, 0, 0, 0.1);
 border-radius: 5px;
 margin: 0;
 padding: 10px;
}
​
</style>

负外边距

负外边距（negative margin）是 CSS 盒模型中的一个概念，它能够在盒子之间创立堆叠或许调整盒子的方位。与正外边距（positive margin）增加空间不同，负外边距会削减空间。以下是负外边距在不同情况下的效果：

1. 水平方向上的负外边距：

   • 当两个块级元素并排时，它们的负外边距会让它们相互堆叠。这能够用于调整元素之间的间隔或许完结特定的布局效果。
   • 当一个元素的左面距为负时，它会向左移动；当一个元素的右边距为负时，它会向右移动。这能够用于调整元素相关于其父容器的方位。

2. 笔直方向上的负外边距：

   • 当两个笔直摆放的块级元素具有负外边距时，它们会相互堆叠。这能够用于调整元素之间的间隔，特别是当需求削减默许的笔直间隔时。
   • 当一个元素的上边距为负时，它会向上移动；当一个元素的下边距为负时，它会拉近下一个元素与它之间的间隔。

需求留意的是，负外边距或许会导致布局上的问题，例如元素堆叠、脱离正常文档流等。因而，在运用负外边距时需求谨慎，保证它不会导致不行预期的布局问题。在某些情况下，运用其他布局技术（如 Flexbox、Grid 或定位）或许会更适宜。

布局和定位

惯例流布局

惯例流（Normal Flow）布局，也被称为文档流（Document Flow）布局，是浏览器默许的 CSS 布局办法。在惯例流布局中，元素依照它们在 HTML 代码中的次序自上而下、自左向右地摆放。惯例流布局首要包含两类元素：块级元素（block-level elements）和行内元素（inline elements）。

1. 块级元素：

   • 块级元素会独占一行，即它们会从上到下摆放。
   • 块级元素默许的宽度为其父容器的宽度，高度取决于其内容。
   • 常见的块级元素有：<div>、<p>、<h1>–<h6>、<ul>、<ol>、<li>等。

2. 行内元素：

   • 行内元素会在同一行内从左到右摆放，直到容器宽度缺乏时才会换行。
   • 行内元素的宽度和高度取决于其内容，而不是父容器的尺度。
   • 常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

在惯例流布局中，元素遵从必定的规矩进行摆放，这些规矩取决于元素的 display 特色。display 特色有几个常用值，例如：block（块级元素）、inline（行内元素）和 inline-block（既具有块级元素的特色，又具有行内元素的特色）。

虽然惯例流布局是浏览器的默许布局办法，但现代前端开发中，许多布局需求无法仅依靠惯例流完结。因而，CSS 供给了愈加强大和灵敏的布局技术，如 Flexbox、Grid、定位（Positioning）等，来满足各种布局需求

BFC（Block Formatting Context，块级格局化上下文）和 IFC（Inline Formatting Context，行内格局化上下文）是两种不同的 CSS 布局办法(格局标准)，它们影响着元素怎么在页面上摆放。在解说 BFC 和 IFC 之前，需求了解一下“格局化上下文（Formatting Context）”。

BFC是什么?

• BFC自身是block formatting context的缩写，是一种格局标准。假如说一个盒子是BFC或许有BFC特性，那么BFC表明的是block formatting.context root。不管它外部显现类型是什么，可是它的内部显现类型是flow-root,.其实便是这个盒子内部形成了一个新的块级格局化上下文。

块级格局化上下文(block formatting context)

格局化上下文的布局标准为：

• “在一个块格局区域中，盒子会从包含块的顶部开端，按序笔直摆放。同级盒子间的笔直间隔会由“margin“特色决议。相邻两个块级盒子之间的笔直间隔会遵从外边距折叠准则被折叠。
• 在一个块格局区域中，每个盒子的左外边际会与包含块左面缘重合（假如是从右到左的排版次序，则盒子的右外边际与包含块右边际重合）。

格局化上下文（Formatting Context）是 CSS 盒子模型的一部分，它界说了一组规矩来描绘怎么对元素进行布局。

1. BFC（块级格局化上下文）：

   • BFC 是块级元素的布局环境，这些元素依照笔直方向一个接一个地摆放。
   • 在 BFC 中，每个元素的左外边距与上一个元素的右外边距相邻，但不会堆叠。
   • BFC 中的元素不会遭到外部起浮元素的影响，能够用来铲除起浮。
   • BFC 是一个独立的容器，内部元素的布局不会影响到外部元素，反之亦然。

   BFC 能够经过以下办法触发：

   • display 特色值为 block、inline-block、table、table-cell、table-caption 等；
   • position 特色值为 absolute 或 fixed；
   • float 特色值不为 none；
   • overflow 特色值不为 visible。

2. IFC（内联级格局化上下文）：

   • IFC 是行内元素的布局环境，这些元素依照水平方向一个接一个地摆放。
   • 在 IFC 中，行内元素会依据它们在文档流中的次序摆放，并依据字体的基线对齐。
   • IFC 会主动调整行高以习惯最高的行内元素，因而，IFC 中的行高或许不同。
   • IFC 中的元素与块级元素不同，不会独占一行，而是尽或许地填充水平空间，直到容器宽度缺乏时才会换行。

   IFC 能够经过以下办法触发：

   • display 特色值为 inline、inline-block、inline-table 等

外边距陷落

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

• 外边距陷落首要出现在以下三种情况：

  1. 相邻兄弟元素的外边距陷落： 当两个兄弟元素笔直相邻时，它们之间的上下外边距会产生陷落。合并后的外边距巨细等于这两个外边距中的较大值。

  <div style="margin-bottom: 20px;"></div>
  <div style="margin-top: 30px;"></div>
  <!--这两个相邻的 div 元素的笔直间隔将为 30px（较大的外边距），而不是 20px 和 30px 的总和（50px）-->
  

  2. 父元素与榜首个或终究一个子元素的外边距陷落： 当一个块级元素没有上边框、上内边距以及没有内联内容（例如空的 div 或只包含块级子元素的 div）时，该元素的上外边距会与其榜首个子元素的上外边距产生陷落。相同，假如一个元素没有下边框、下内边距以及没有内联内容时，该元素的下外边距会与其终究一个子元素的下外边距产生陷落。

  <div style="margin-top: 20px;">
   <div style="margin-top: 30px;"></div>
  </div>
  <!--上面的父元素和子元素之间的笔直间隔将为 30px（较大的外边距），而不是 20px 和 30px 的总和（50px）-->
  

  3. 空块级元素的上下外边距陷落： 当一个块级元素为空（没有内容、内边距和边框），它的上下外边距会产生陷落，即合并为一个外边距。

  <div style="margin-top: 20px; margin-bottom: 30px;"></div>
  <!--上面的空 div 元素的上下外边距将合并为一个 30px 的外边距-->
  

• 消除外边距的办法：

  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;
     }
     

内联级格局化上下文

介绍：内联级格局化上下文（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.)”

• 水平方向摆放： 内联级元素按从左到右（在 LTR（从左到右）文本方向）的次序摆放。假如行内空间缺乏以包容一个内联级元素，它会换行到下一行持续摆放。
• 笔直对齐： 内联级元素支撑 vertical-align 特色，能够调整元素在笔直方向上的对齐办法。例如，能够设置元素相关于基线（baseline）向上或向下对齐。
• 行框（Line box）： 在 IFC 中，内联级元素被包含内行框内。行框的高度由内联级元素的高度决议。每一行都有一个行框，行框之间没有笔直外边距陷落。
• 不支撑宽度和高度设置： 内联级元素不支撑设置 width 和 height 特色。它们的宽度由内容决议，而高度则由 line-height 特色决议。
• 支撑水平外边距、内边距和边框： 内联级元素支撑设置水平方向的外边距、内边距和边框，但笔直方向的设置不会影响其他内联级元素的布局。
• 匿名文本： 在 IFC 中，不属于任何内联级元素的文本被视为匿名文本。匿名文本会依照内联级元素的布局规矩进行摆放。

常用的事例

• 单行文字笔直居中，比如标题

  • 运用了Iine-height的笔直居中特性

<div class="container">
   XiaoYu
</div>
​
<style>
  .container {
    height: 100px; /* 设置容器高度 */
    background-color: #f0f0f0; /* 设置容器布景色，便于观察笔直居中效果 */
    font-size: 24px; /* 设置字体巨细 */
    line-height: 100px; /* 设置行高等于容器高度，完结笔直居中 */
   }
</style>

• 文字和icon笔直对齐

  • 运用了line box中核算高度的原理和vertical-align的设置，笔直对齐，但不是彻底笔直居中假如设置父元素font-size:0,基线和中线堆叠，则居中对齐

<!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>文字和icon笔直对齐</title>
 <style>
 .image{
   width: 24px;
   height: 24px;
   vertical-align: middle;
  }
 .text{
   font-size: 16px;
   line-height: 32px;
   margin-left: 4px;
   vertical-align: middle;
  }
 
 </style>
</head>
<body>
 <div class="wrap">
  <img class="image" src="你的图片地址">
  <span class="text">XiaoYu笔记，你值得具有</span>
 </div>
</body>
</html>

弹性盒子

运用弹性盒子布局的示例

展现灵敏的文件长度省掉演示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>

Grid

2017年推出的Gd布局能够界说由行和列组成的二维布局，然后将元素放置到网格中。元素能够只占其间一个单元格，也能够占有多行或多列。

CSS Grid Layout（网格布局）是一个用于创立二维网格的 CSS 布局技术。它答应你以行和列的方法规划杂乱的布局，而不需求运用起浮、定位和其他传统布局办法。Grid 布局特别适宜用于构建呼应式和自习惯规划，因为它能够轻松地在不同的屏幕尺度和设备上调整布局。

CSS Grid 的一些根本概念：

1. 容器（Container）：要运用 Grid 布局，首要需求将一个元素声明为网格容器。这能够经过将 display 特色设置为 grid 或 inline-grid 来完结。

   .container {
    display: grid;
   }
   

2. 网格项（Grid Items）：容器的直接子元素主动成为网格项。

3. 网格线（Grid Lines）：网格布局由水平缓笔直的网格线组成，这些网格线界说了网格的行和列。网格线能够用数字或名称来引证。

4. 网格轨迹（Grid Tracks）：网格轨迹是由两条相邻的网格线之间的区域组成的，能够是行或列。

5. 网格单元（Grid Cells）：由相邻的两条行网格线和两条列网格线组成的一个单元格称为网格单元。

6. 网格区域（Grid Areas）：网格区域是由恣意数量的网格单元组成的矩形区域。网格区域能够用来放置网格项。

.grid-container{
  display:grid;
  grid-template-columns:100px 1fr;
  grid-template-rows:60px 6fr 1fr;
}

筛子示例(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>

Gird和Flex布局的运用战略

定位

为了咱们能够在文档流的基础上，让元素移动，做出更多灵敏的改变。当position特色的取值非staticl的时候，能够运用top,right,,bottom,left对其进行定位

1. static： 默许值，元素遵从正常的文档流。在这种情况下，top、right、bottom 和 left 特色不会收效。

2. relative： 元素相关于其在正常文档流中的方位进行定位。即便对元素进行了移动，它在文档流中的空间依然被保存。能够运用 top、right、bottom 和 left 特色来调整元素的方位。

   例如，假如一个元素的 position 被设置为 relative，而且 top 设置为 20px，那么这个元素将向下移动 20 像素，但它本来在文档流中的方位依然会被保存。

3. absolute： 元素相关于最近的非 static 先人元素进行定位。假如没有非 static 先人元素，它将相关于文档的初始包含块进行定位。肯定定位的元素从文档流中移除，不占有空间。能够运用 top、right、bottom 和 left 特色来调整元素的方位。

4. fixed： 元素相关于浏览器窗口进行定位，不随页面翻滚而移动。固定定位的元素从文档流中移除，不占有空间。能够运用 top、right、bottom 和 left 特色来调整元素的方位。

5. sticky： 元素在翻滚进程中在某种程度上表现为相对定位，又在某种程度上表现为固定定位。当元素在视口内时，它的行为相似于 relative 定位，而当元素在视口外时，它的行为相似于 fixed 定位。能够运用 top、right、bottom 和 left 特色来调整元素的方位。

留意：sticky 定位或许在某些浏览器中不受支撑或支撑有限。为了保证兼容性，请必须在运用 sticky 之前检查 Can I use。

层叠上下文

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

层叠上下文（Stacking Context）它用于决议元素在页面上的层叠次序。层叠上下文由具有特定特色的元素生成，这些特色会影响该元素及其子元素在 z 轴上的烘托次序。z 轴是笔直于屏幕的轴线，用于表明页面中元素的前后次序

一些创立层叠上下文的常见特色：

1. 根元素（<html>）天然创立一个层叠上下文。
2. 元素的 position 特色值为 absolute 或 relative 且 z-index 值不是 auto。
3. 元素的 position 特色值为 fixed 或 sticky（在兼容的浏览器中）。
4. 元素的 opacity 特色值小于 1。
5. 元素的 transform、filter、perspective、clip-path、mask、mask-image、mask-border 特色值不是 none。
6. 元素的 isolation 特色值为 isolate。
7. 元素的 mix-blend-mode 特色值不是 normal。
8. 元素的 z-index 特色值是一个整数，且其 display 特色值为 flex 或 grid。

在一个层叠上下文中，元素的层叠次序由以下要素决议：

1. 层叠上下文的 z-index 值。较高的 z-index 值会使元素在较低的 z-index 值之上显现。
2. 当 z-index 相一起，元素在 HTML 代码中的次序决议层叠次序。坐落后边的元素将掩盖坐落前面的元素。

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

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

在同一个层叠上下文中，元素之间的层叠次序是依照以下规矩确认的：

1. 布景和边框：层叠上下文元素的布景和边框坐落最底层。
2. 负 z-index：具有负 z-index 值的子元素依照 z-index 从小到大的次序制作。数值小的元素会被数值大的元素掩盖。
3. 块级元素：依照 HTML 代码中的次序制作非定位的块级元素。坐落后边的元素将掩盖坐落前面的元素。
4. 起浮元素：依照 HTML 代码中的次序制作起浮元素。坐落后边的元素将掩盖坐落前面的元素。
5. 内联元素：依照 HTML 代码中的次序制作非定位的内联元素。坐落后边的元素将掩盖坐落前面的元素。
6. z-index 为 0 或 auto 的定位元素：依照 HTML 代码中的次序制作 z-index 为 0 或 auto 的定位元素。坐落后边的元素将掩盖坐落前面的元素。
7. 正 z-index：具有正 z-index 值的子元素依照 z-index 从小到大的次序制作。数值小的元素会被数值大的元素掩盖。

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

事例

编写z-index的主张

1. 运用css变量或许预处理言语的变量，办理z-index的值
2. 将预设间隔设置10或100，便利后续的插入

变形、过渡、动画

transform 变形 3D

CSS transform 特色答应咱们对元素进行 2D 或 3D 改换。这儿咱们首要讨论一下 3D 改换相关的特色。

1. transform：这是一个复合特色，能够包含一个或多个 3D 改换函数。以下是一些常用的 3D 改换函数：

   • rotateX(angle)：绕 X 轴旋转指定的视点。
   • rotateY(angle)：绕 Y 轴旋转指定的视点。
   • rotateZ(angle)：绕 Z 轴旋转指定的视点。
   • scale3d(sx, sy, sz)：别离沿 X、Y 和 Z 轴缩放元素。
   • translate3d(tx, ty, tz)：别离沿 X、Y 和 Z 轴移动元素。
   • perspective(p)：设置透视间隔。较小的值会增强 3D 效果。

2. transform-origin：界说改换的基点，即元素进行改换时以哪个点为中心。默许值为 “50% 50% 0″，即元素的中心点。

3. transform-style：设置元素的子元素是否坐落 3D 空间中。取值为 flat（默许）或 preserve-3d。当设置为 preserve-3d 时，子元素将保存其 3D 方位。

4. perspective：界说观察者间隔元素的间隔，关于创立 3D 效果十分有用。较小的值会增强 3D 效果。此特色一般运用于父元素上。

5. perspective-origin：界说透视投影点的方位。默许值为 “50% 50%”，即元素的中心点。

筛子事例

这儿有个彩蛋事例(纯CSS完结)，请将代码复制到编辑器中运行

字节官方供给的事例：3D Dice (codepen.io)

<!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"hljs-attribute">background-color: red"></div>
    </div>
    <div class="face face-2">
      <div class="dot"hljs-attribute">top: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-3">
      <div class="dot"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-4">
      <div class="dot"hljs-attribute">position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-5">
      <div class="dot"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; right: 10px;"></div>
    </div>
    <div class="face face-6">
      <div class="dot"hljs-attribute">position:absolute; top: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 10px; right: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; left: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; bottom: 10px; right: 10px;"></div>
      <div class="dot"hljs-attribute">position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
    </div>
  </div>
</div>
</body>
</html>

transition过渡

• 经过指定某些元素特色从一种起始状况，在一段时刻内以某种改变节奏，过渡到终止状况

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

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

  • 线性（linear）： 线性 timing-function 意味着动画在其整个进程中坚持稳定的速度。这意味着在履行动画的每个时刻片段中，动画元素的移动速度都相同。要运用线性 timing-function，能够运用 linear 值：

    animation-timing-function: linear;
    

  • 贝塞尔曲线（cubic-bezier() 或 ease-in 等）： 贝塞尔曲线 timing-function 供给了更为杂乱的速度操控。贝塞尔曲线经过一个四阶（cubic）贝塞尔函数界说动画速度的改变。这意味着动画能够在某些时刻片段内加速，然后在其他时刻片段内减速。CSS 供给了一些预界说的贝塞尔曲线值，如 ease-in、ease-out、ease-in-out 和 ease。此外，还能够运用 cubic-bezier() 函数自界说贝塞尔曲线：

    animation-timing-function: ease-in; /* 预界说值 */
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* 自界说贝塞尔曲线 */
    

  • 阶跃（step）： 阶跃 timing-function 用于创立分段的、非滑润动画。这种类型的动画在其履行进程中会跳过必定数量的帧，使动画元素在特定的时刻点产生忽然的改变。阶跃 timing-function 运用 steps() 函数界说，其间包含一个整数参数，表明动画的阶段数：

    animation-timing-function: steps(4);
    

    上述代码将动画分为4个阶段，每个阶段在动画履行进程中都会有一个忽然的改变。

    综上所述，timing-function 特色经过调整动画速度的改变，为创立杂乱、吸引人的动画供给了很大的灵敏性。

animation 动画

动画库：Animate.css | A cross-browser library of CSS animations.

transform、transition、animation一功用相关

硬件加速详解

动画功用相关了解深化

呼应式规划

呼应式规划引荐遵从的准则

媒体查询

媒体查询（Media Queries）是 CSS3 引进的一种技术，答应某些款式只在页面满足特定条件时才收效。咱们能够将媒体类型(如screen、pit)以及媒体特性（如视口宽度、屏幕份额、设备方向：横向或纵向）做为约束条件。

说白了便是答应你依据设备特征（如屏幕尺度、分辨率等）对款式进行条件性地运用。这让网页能够依据不同的设备和视口尺度自习惯地调整布局和款式，然后进步用户体会

/*media-type 是指定要运用款式的媒体类型，如 screen、print 等。media-feature-rule 是一个或多个针对特定设备特征的条件表达式，例如 min-width、max-width 等*/
@media media-type and (media-feature-rule) {
 /* 款式规矩 */
}

事例

改变屏幕尺度时调整字体巨细

/* 默许字体巨细 */
body {
 font-size: 16px;
}
​
/* 当屏幕宽度大于等于768像素时，字体巨细增加到18px */
@media screen and (min-width: 768px) {
 body {
  font-size: 18px;
  }
}

针对不同的屏幕尺度更改布局：

/* 默许布局：单列布局 */
.container {
 width: 100%;
}
.column {
 width: 100%;
 margin-bottom: 20px;
}
​
/* 当屏幕宽度大于等于600像素时，改为双列布局 */
@media screen and (min-width: 600px) {
 .column {
  width: calc(50% - 20px);
  margin-right: 20px;
  float: left;
  }
}
​
/* 当屏幕宽度大于等于900像素时，改为三列布局 */
@media screen and (min-width: 900px) {
 .column {
  width: calc(33.333% - 20px);
  }
}
​
/* 铲除起浮 */
.row::after {
 content: "";
 display: table;
 clear: both;
}

针对高分辨率设备（如 Retina 屏幕）供给高清图画：

/* 默许情况下运用低分辨率图画 */
.logo {
 background-image: url('logo-lowres.png');
}
​
/* 当设备像素比大于等于2时（例如 Retina 屏幕），运用高分辨率图画 */
@media screen and (min-resolution: 2dppx) {
 .logo {
  background-image: url('logo-highres.png');
  }
}

• 运用媒体查询的一些Tips

  1. 媒体查询相同遵从cascading层叠掩盖准则，min-和max挑选一个
  2. 因为设备的多样化逐步不行枚举，断点的挑选尽量依据内容挑选
  3. 因为断点的增加会增加款式处理的杂乱度，所以尽量削减断点

cascading层叠掩盖准则

Cascading 层叠是 CSS (Cascading Style Sheets) 中的一个中心概念。层叠规矩界说了当一个 HTML 元素的款式从多个来历（如内联款式、外部款式表、浏览器默许款式等）产生抵触时，怎么确认哪个款式应该优先运用。

层叠规矩首要遵从以下准则：

1. 重要性（Importance）：!important 标记的款式规矩具有更高的优先级，会掩盖其他没有标记 !important 的款式规矩。假如有多个 !important 规矩抵触，将依照下面的规矩进行判断。

2. 挑选器优先级（Specificity）：挑选器优先级是依据挑选器的杂乱程度核算出的一个权重值。具有更高优先级的挑选器界说的款式将掩盖具有较低优先级的挑选器界说的款式。优先级的核算规矩如下：

   • 内联款式（style 特色）优先级最高，计为 1000。
   • 每个 ID 挑选器（如 #example）计为 100。
   • 每个类挑选器（如 .example）、特色挑选器（如 [type="text"]）或伪类（如 :hover）计为 10。
   • 每个元素挑选器（如 h1）或伪元素（如 ::before）计为 1。
   • 通配符挑选器（*）、联系挑选器（如 +, >）和否定伪类（如 :not()）不增加优先级。
   • 假如优先级相同，则遵从下面的源次序规矩。

3. 源次序（Source order）：在款式表或文档中后界说的款式规矩会掩盖从前界说的相同优先级的款式规矩。换句话说，越靠后的规矩会掩盖越靠前的规矩，前提是它们具有相同的优先级。

设备像素、参阅像素和移动设备视口

设备像素

DPI && PPI

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

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

• 直观比照：

CSS像素

CSS 像素（CSS pixel）是一个笼统的单位，用于在网页规划中表明屏幕上的可见元素的尺度。它不同于物理像素，物理像素是显现器或其他输出设备用来显现内容的实践点。CSS 像素与设备像素份额（device pixel ratio，DPR）有关，DPR 是物理像素与 CSS 像素之间的份额。

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

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

要确认设备的 DPR，能够运用 JavaScript 的 window.devicePixelRatio 特色。为了更好地习惯高分辨率屏幕，能够运用媒体查询和呼应式图片技术来供给针对不同 DPR 的优化图画。

DPR设备像素比

设备像素比（Device Pixel Ratio，简称 DPR）是一个与屏幕分辨率相关的概念。它表明一个 CSS 像素与设备物理像素之间的份额。简略地说，DPR 描绘了一个 CSS 像素占有了多少个设备物理像素。

在一般屏幕上（例如一般显现器和前期的移动设备屏幕），DPR 一般为 1，这意味着一个 CSS 像素对应一个物理像素。然而，在高分辨率屏幕上（例如 Retina 显现屏或其他高 DPI 屏幕），DPR 的值或许大于 1，这意味着一个 CSS 像素占有了多个物理像素。这样的规划使得在高分辨率屏幕上显现的内容愈加清晰和细腻。

例如，假如设备的 DPR 为 2，那么一个 CSS 像素实践上占有了 2×2 = 4 个物理像素。假如设备的 DPR 为 3，那么一个 CSS 像素占有了 3×3 = 9 个物理像素。

要确认设备的 DPR，能够运用 JavaScript 的 window.devicePixelRatio 特色。为了更好地习惯不同 DPR 的设备，能够运用媒体查询和呼应式图片技术供给针对不同 DPR 的优化图画。

当规划网页时，了解 DPR 的概念关于保证在不同分辨率和像素密度的屏幕上完结清晰、一致的用户体会至关重要。经过为高 DPR 设备供给高分辨率的图画和优化的布局，能够保证网页内容在各种设备上都能正常显现。

移动端的viewport

在移动端，viewport 是一个重要的概念，它用于界说浏览器窗口中可见区域的巨细和缩放。

移动设备的屏幕尺度和分辨率一般比桌面设备小得多。默许情况下，许多移动浏览器将尝试将整个网页缩放到屏幕的宽度以习惯屏幕尺度，这或许导致文本和元素变得过小，难以阅览和操作。为了处理这个问题，能够运用 viewport 元标签来操控浏览器怎么显现页面内容。

要在网页中设置 viewport，能够在 HTML 文档的 <head> 部分增加一个 <meta> 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1">

这段代码做了两件事：

1. width=device-width：将 viewport 的宽度设置为设备的物理屏幕宽度。这意味着网页的宽度将依据设备的屏幕宽度进行调整，使内容在不同尺度的设备上自习惯。
2. initial-scale=1：设置页面的初始缩放份额为 1，也便是不缩放。这能够保证在加载时，页面内容会以 100% 的巨细显现。

除了 width 和 initial-scale 之外，还能够设置其他一些 viewport 特色，例如：

• minimum-scale：界说页面的最小缩放份额。
• maximum-scale：界说页面的最大缩放份额。
• user-scalable：指定用户是否能够手动缩放页面（设置为 yes 或 no）。

例如，假如要约束用户的缩放才干，能够运用以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

viewport的meta标签中的特色

1. width：设置 viewport 的宽度。一般，将宽度设置为 device-width，这意味着 viewport 的宽度等于设备的物理屏幕宽度。这有助于保证页面在不同尺度的设备上自习惯。

<meta name="viewport" content="width=device-width">

2. height：设置 viewport 的高度。与 width 相似，能够运用 device-height 作为值。然而，实践运用中，高度特色很少用到，因为大多数情况下，只需关注宽度即可。

<meta name="viewport" content="height=device-height">

3. initial-scale：设置页面的初始缩放份额。1 表明不缩放，即页面以 100% 的巨细显现。设置恰当的初始缩放能够保证页面在加载时以适宜的巨细出现

<meta name="viewport" content="initial-scale=1">

4. minimum-scale：界说页面的最小缩放份额。例如，设置为 0.5 表明用户能够将页面缩小到 50% 的巨细。

<meta name="viewport" content="minimum-scale=0.5">

5. maximum-scale：界说页面的最大缩放份额。例如，设置为 2 表明用户能够将页面放大到 200% 的巨细

<meta name="viewport" content="maximum-scale=2">

6. user-scalable：指定用户是否能够手动缩放页面。设置为 yes 答应缩放，设置为 no 制止缩放。一般，答运用户缩放页面以习惯他们的需求是一个好的做法，但在某些情况下，你或许期望制止缩放。

<meta name="viewport" content="user-scalable=no">

• 一般，将多个特色组合运用以完结最佳效果，例如：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes">

这个示例设置了 viewport 的宽度、初始缩放份额、最小和最大缩放份额，并答运用户手动缩放页面。

相对长度的运用

em

em 是一种相对长度单位，它的巨细是依据其最近的父元素的字体巨细。在 CSS 中，em 常用于设置字体巨细、行高、边距和填充等特色。运用 em 能够协助你完结可伸缩和呼应式的规划，因为它们会依据父元素的字体巨细主动调整。

1. 字体巨细

运用 em 设置字体巨细能够完结可伸缩的文本。当你改变父元素的字体巨细时，子元素的字体巨细也会相应地调整。

.parent {
  font-size: 16px;
}
​
.child {
  font-size: 1.5em; /* 1.5 x 16px = 24px */
}

2. 行高

运用 em 设置行高能够依据文本巨细主动调整行间隔，然后坚持杰出的可读性。

p {
  font-size: 18px;
  line-height: 1.5em; /* 1.5 x 18px = 27px */
}

3. 边距和填充

运用 em 设置边距和填充能够完结与文本巨细成份额的间隔。这在坚持元素间的视觉平衡时十分有用。

/*按钮的内部填充和外部边距与其字体巨细成份额*/
.button {
  font-size: 16px;
  padding: 0.5em 1em; /* 0.5 x 16px = 8px (top and bottom), 1 x 16px = 16px (left and right) */
  margin-top: 1em; /* 1 x 16px = 16px */
}

4. 媒体查询

在呼应式规划中，你或许期望在不同的屏幕尺度下调整元素的巨细。经过在媒体查询中运用 em，你能够依据父元素的字体巨细来调整元素。

/*当屏幕宽度小于或等于 40em（640px）时，容器的字体巨细会减小到 14px，一起，容器的宽度也会相应地减小（60 x 14px = 840px），然后完结呼应式规划*/
.container {
  font-size: 16px;
  width: 60em; /* 60 x 16px = 960px */
}
​
@media (max-width: 40em) {
  .container {
    font-size: 14px;
    /* width will now be 60 x 14px = 840px */
   }
}

5. 嵌套元素

当你在嵌套元素中运用 em 时，它们的巨细将依据其父元素的字体巨细进行调整。这使得组件和模块能够在不同的上下文中主动调整巨细。

/*在这个比如中，父元素的字体巨细为 16px，子元素的字体巨细为 20px（1.25 x 16px），孙子元素的字体巨细则康复为 16px（0.8 x 20px）*/
.parent {
  font-size: 16px;
}
​
.child {
  font-size: 1.25em; /* 1.25 x 16px = 20px */
}
​
.grandchild {
  font-size: 0.8em; /* 0.8 x 20px = 16px */
}

rem

rem 是一种相对单位，表明相关于根元素（即 HTML 元素）的字体巨细。与 em 不同，rem 不会受嵌套元素字体巨细的影响，因为它直接依靠于根元素的字体巨细。这降低了杂乱性并使 rem 更易于操控和预测。作为相对单位，rem 能够习惯不同屏幕尺度，因而在创立呼应式规划和组件时尤为有用。

1. 大局字体巨细

   一般，咱们会在根元素（<html>）上设置一个根本的字体巨细

/*这意味着，1rem 等于 16px。接下来，咱们能够运用 rem 单位为其他元素设置字体巨细、边距、宽度等特色*/
html {
  font-size: 16px;
}

2. 呼应式字体巨细

   与 em 相似，咱们能够运用媒体查询在不同屏幕尺度下调整根元素的字体巨细。

/*当屏幕宽度小于或等于 768px 时，根元素的字体巨细会减小到 14px。因而，一切运用 rem 单位的元素也会相应地缩小*/
html {
  font-size: 16px;
}
​
@media (max-width: 768px) {
  html {
    font-size: 14px;
   }
}

3. 组件和模块

   运用 rem 单位能够协助咱们创立可复用、可伸缩的组件和模块。

/*容器的字体巨细、边距和宽度都是依据根元素的字体巨细。这意味着，当根元素的字体巨细产生改变时，这些值也会主动调整*/
.container {
  font-size: 1.125rem; /* 1.125 x 16px = 18px */
  padding: 1rem; /* 16px */
  width: 60rem; /* 60 x 16px = 960px */
}

4. 防止字体巨细累积

   与 em 不同，rem 不受父元素字体巨细的影响。这意味着，咱们能够防止字体巨细累积的问题

/*子元素的字体巨细一直为 14px，而不受父元素字体巨细的影响*/
.parent {
  font-size: 1.25rem; /* 1.25 x 16px = 20px */
}
​
.child {
  font-size: 0.875rem; /* 0.875 x 16px = 14px */
}

vw和vh

vw（viewport width）和 vh（viewport height）是两种相对长度单位，用于表明相关于视口宽度和高度的尺度。这两个单位首要用于呼应式规划，以习惯不同屏幕尺度和设备。

1. vw：viewport width（视口宽度）单位。1vw 等于视口宽度的 1%。这意味着，假如浏览器窗口的宽度为 1200px，那么 1vw 就等于 12px（1200 * 0.01）。跟着浏览器窗口宽度的改变，vw 单位的实践像素值也会相应改变。
2. vh：viewport height（视口高度）单位。1vh 等于视口高度的 1%。这意味着，假如浏览器窗口的高度为 900px，那么 1vh 就等于 9px（900 * 0.01）。与 vw 相同，跟着浏览器窗口高度的改变，vh 单位的实践像素值也会相应改变。

这两个单位的首要长处是它们能够依据视口的巨细主动调整，然后使规划在不同尺度的屏幕上坚持一致。这在呼应式布局中十分有用，尤其是当你需求依据设备或浏览器窗口巨细调整元素尺度时。例如，你能够运用 vw 和 vh 单位来设置字体巨细、边距、宽度和高度等。

相同，vw也能够作为呼应式布局的基准单位。因为vw天然是视口宽度的1%，所以不需求js动态装备。

/* 设置字体巨细为视口宽度的 4% */
p {
 font-size: 4vw;
}
​
/* 设置一个元素的高度为视口高度的 50% */
.container {
 height: 50vh;
}
​
/* 设置一个元素的宽度为视口宽度的 80% */
.box {
 width: 80vw;
}

• 需求留意的是，在某些情况下，vw 和 vh 或许导致内容溢出或不行见。因而，在运用这些单位时，需求保证充分测试并为溢出内容供给恰当的处理

CSS生态相关

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

言语增强 — CSS预处理器

预处理器怎么进步研发功率？

scss、less、stylus简略比照

Dart Sass 的源代码、文档和示例：sass/dart-sass: The reference implementation of Sass, written in Dart. (github.com)

Sass 的源代码、文档和示例：sass/sass: Sass makes CSS fun! (github.com)

Less 的源代码：less/less.js: Less. The dynamic stylesheet language. (github.com)

stylus 的源代码：stylus/stylus: Expressive, robust, feature-rich CSS language built for nodejs (github.com)

scss	less	stylus
css语法兼容	兼容	兼容	惯例兼容
可编程才干	较强：逻辑处理才干丰富	较弱：不支撑自界说函数	较强
社区活泼、运用人数	最多(存疑)star 3.5k；burbon库支撑	较多star 16.9k；twitter bootstrap结构	相对少 star 11k;

代码演示

1. Sass (SCSS 语法)：展现了 Sass 的变量、函数（darken）、mixin 和 @include 指令

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}
​
.button {
 background-color: darken($blue, 10%);
 padding: 10px 20px;
 color: white;
 @include border-radius(5px);
}

2. Less：展现了 Less 的变量、函数（darken）、mixin 和 mixin 调用

.mixin(@border-radius) {
 -webkit-border-radius: @border-radius;
 -moz-border-radius: @border-radius;
 -ms-border-radius: @border-radius;
 border-radius: @border-radius;
}
​
.button {
 @base-color: blue;
 background-color: darken(@base-color, 10%);
 padding: 10px 20px;
 color: white;
 .mixin(5px);
}

3. Stylus：展现了 Stylus 的变量、函数（darken）、mixin 和 mixin 调用。留意 Stylus 的语法比其他两者愈加简洁

border-radius(radius)
 -webkit-border-radius radius
 -moz-border-radius radius
 -ms-border-radius radius
 border-radius radius
​
.button
 base-color = blue
 background-color darken(base-color, 10%)
 padding 10px 20px
 color white
 border-radius(5px)

言语增强 — 广义CSS预处理器

• 现在项目中常见的款式处理流程

言语增强 — CSS后处理器

Plugins：PostCSS Plugins

CSS 后处理器是一种东西，它在 CSS 预处理器处理生成的 CSS 代码之后运行。其首要意图是优化和改进终究的 CSS 输出，以进步功用、浏览器兼容性和代码可保护性。

CSS 后处理器运用 JavaScript 插件（或其他编程言语编写的东西）来处理 CSS，这些插件能够处理不同的问题或履行特定使命。常见的 CSS 后处理器使命包含：

1. 主动增加浏览器前缀（autoprefixer）：依据方针浏览器和其版别，主动增加恰当的浏览器前缀以保证跨浏览器兼容性。
2. CSS 紧缩（minification）：删除 CSS 代码中的空格、换行符和注释，以削减文件巨细，进步加载速度。
3. 优化和合并规矩（optimization）：查找和合并重复的 CSS 规矩，重写代码以削减不必要的挑选器和规矩，然后削减文件巨细和进步功用。
4. 运用 CSS 变量（CSS custom properties）：将 CSS 预处理器中运用的变量转化为原生的 CSS 变量，然后在运行时更改款式。
5. 完结未来 CSS 标准（future-proofing）：将没有得到广泛支撑的新 CSS 标准转化为现在可用的兼容语法，以便在不等候浏览器支撑的情况下运用新功用。

PostCSS 是现在最盛行的 CSS 后处理器。它供给了一个插件体系，使开发人员能够依据需求挑选和装备插件。PostCSS 能够与构建东西（如 Webpack、Gulp 和 Grunt）结合运用，将后处理集成到主动化构建和布置流程中。

言语增强 — postcss机制浅析

Astexplorer：AST explorer是一个在线东西，用于可视化各种编程言语的笼统语法树（AST）。它能够协助开发者更好地理解代码在解析进程中是怎么被表明的。AST 是一种树形数据结构，用于表明源代码中的结构和语法联系。

在 Astexplorer 中，能够输入源代码，挑选相应的解析器，然后检查生成的 AST。这个东西支撑多种编程言语和相应的解析器，如 JavaScript、TypeScript、HTML、CSS、JSON 等。除了显现 AST，Astexplorer 还答应咱们经过点击树形结构中的节点来高亮源代码中的对应部分，反之亦然。

Astexplorer 关于编译器和解析器的开发、编写代码转化东西（如 Babel 插件）以及深化了解编程言语的语法和结构十分有用。经过 Astexplorer，开发者能够更直观地理解源代码在解析和转化进程中是怎么被操作和处理的。

• PostCSS 的工作机制能够分为以下几个进程：

1. 解析：PostCSS 运用 CSS 解析器将 CSS 代码解析成一个 Abstract Syntax Tree（AST，笼统语法树）。AST 是一种树形数据结构，它表明了 CSS 代码的结构和层次联系，使得插件能够更容易地遍历和操作 CSS 规矩。
2. 插件：PostCSS 的插件体系是其中心功用。插件是 JavaScript 函数，它们在 PostCSS 生成 AST 后，对 AST 进行操作和修正。插件能够独立运用，也能够组合成一个管道（pipeline），依照特定的次序履行多个插件。这使得 PostCSS 十分灵敏，开发者能够依据项目需求挑选和装备插件。
3. 转化：在插件处理 AST 后，PostCSS 将修正后的 AST 转化回 CSS 代码。这个进程中，PostCSS 会保存原始代码中的格局、缩进和注释，以便生成的 CSS 代码具有杰出的可读性。
4. 集成：PostCSS 能够与各种构建东西（如 Webpack、Gulp 和 Grunt）集成，以便将后处理进程集成到主动化构建和布置流程中。这种集成能够简化开发流程，保证生成的 CSS 代码经过优化且兼容方针浏览器。

工程架构 — CSS模块化

css-modules/css-modules: Documentation about css-modules (github.com)

CSS Module 便是为了处理大局污染问题出现的计划，处理CSS大局污染，本质上是保证款式集合对应的挑选器是仅有的，从这个视点看，干流的单纯针关于防止大局污染的计划大概有以下三种：

工程架构 — CSS-in-JS

cij的playground(下面那张图的演示地址)：CSS in JS Playground

CSS-in-JS（JavaScript 中的 CSS）是一种现代的前端开发模式，它答应开发者直接在 JavaScript 代码中编写 CSS 款式，运用js动态生成css，这种在React中便是一个大杀器。CSS-in-JS 的意图是处理组件化和模块化的开发进程中遇到的一些 CSS 问题，例如大局效果域、命名抵触、依靠办理和代码重用等。

在 CSS-in-JS 中，款式被当作 JavaScript 目标来处理，这样能够运用 JavaScript 的一切特性（例如变量、函数、条件句子等）来创立动态款式。为组件创立的款式会在运行时注入到 DOM 中，这样就能够完结部分效果域，防止款式污染和命名抵触。

CSS-in-JS 的长处：

1. 部分效果域：款式仅运用于特定的组件，防止了大局款式污染和命名抵触。
2. 代码安排和重用：将款式与相应的组件绑定，使组件更易于保护和重用。
3. 动态款式：能够运用 JavaScript 的才干来依据状况、特色和逻辑创立动态款式。
4. 依靠办理：经过 JavaScript 模块体系办理款式依靠，简化了构建和打包进程。
5. 主题和款式同享：经过 JavaScript 变量和目标轻松同享主题和款式。

一些盛行的 CSS-in-JS 库包含：

1. styled-components：运用 ES6 标签模板字符串创立款式化的组件。
2. emotion：具有高功用的 CSS-in-JS 库，供给了多种款式界说办法。
3. JSS：灵敏的、独立的 CSS-in-JS 库，支撑插件和款式复用。

需求留意的是，CSS-in-JS 并非适用于一切场景，也有一些潜在的缺点，如功用开支、额定的学习曲线、以及与传统 CSS 的不兼容。因而，在挑选 CSS-in-JS 时，需求依据项目需求和团队技术进行权衡

工程架构 — styled.component 机制浅析

• styled-components 的工作机制的解说：

1. 创立款式化组件：styled-components 运用了 ES6 的标签模板字符串功用，它答应你在 JavaScript 中直接编写 CSS 代码。首要，你需求导入 styled 目标，然后运用它来创立带有款式的组件。

import styled from 'styled-components';
​
const StyledButton = styled.button`
 background-color: blue;
 color: white;
 border: none;
 padding: 10px;
 cursor: pointer;
 
 &:hover {
  background-color: darkblue;
 }
`;

1. 生成仅有的类名：styled-components 为每个创立的款式化组件生成一个仅有的类名。这能够保证款式不会与其他组件抵触，并完结部分效果域。
2. 动态特色和主题：styled-components 支撑经过插值将动态特色和主题值注入到款式中。这答应你依据组件的特色或运用程序的主题来调整款式
3. 款式注入：当你在运用程序中运用款式化组件时，styled-components 会将生成的款式注入到 DOM 中。一般情况下，这是经过在页面中增加一个 style 标签来完结的，该标签包含一切组件的款式

const StyledDiv = styled.div`
 background-color: ${props => props.backgroundColor || 'white'};
 color: ${props => props.theme.primaryColor};
`;

4. 款式注入：当你在运用程序中运用款式化组件时，styled-components 会将生成的款式注入到 DOM 中。一般情况下，这是经过在页面中增加一个 style 标签来完结的，该标签包含一切组件的款式

import React from 'react';
import { StyledButton } from './StyledButton';
​
const App = () => {
 return (
  <div>
   <StyledButton>Click me</StyledButton>
  </div>
  );
};
​
export default App;

5. 服务器端烘托和款式提取：styled-components 支撑服务器端烘托，能够在服务器上生成静态 HTML 和 CSS。这有助于进步页面加载速度和搜索引擎优化。此外，styled-components 还供给了一个 babel 插件来提取静态款式，然后进一步优化构建结果

工程架构 — CSS-in-JS pros & cons

工程架构 — 原子化CSS

能够去看B站UP主小满zs的Vue3+TypeScript中的第三十七章集学习(运用Vue3+TS写原子化事例)

CSS 原子化的优缺点

1. 削减了 css 体积，进步了 css 复用
2. 削减起名的杂乱度
3. 增加了记忆成本 将 css 拆分为原子之后，你势必要记住一些 class 才干书写，哪怕 tailwindcss 供给了完善的东西链，你写 background，也要记住最初是 bg

Tailwind 怎么做的？

原子化的优劣图示

Facebook重构拥抱atomic css：Atomic CSS-in-JS (sebastienlorber.com)

课程总结