前端技术学习路线图-初阶-CSS

CSS

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。

语法

@规则

@charset

@charset 用来设置 CSS 文件使用的字符编码，语法格式如下：

@charset "<charset>";

其中 为具体的字符编码，默认值为“utf-8”。

在使用时需要注意以下几点：

• 如果设置 @charset 的话，那么它必须出现在 CSS 文件的最前面，@charset 之前不能出现任何字符；
• 字符编码需要使用双引号""包裹起来；
• @规则名称（@charset）与具体的字符编码之间需要使用一个空格分隔；
• 规则后面的分号不能省略；
• 如果设置多个 @charset，那么只有第一个声明有效；
• 不能在 HTML 元素或者

下面示例中演示了 @charset 的使用，以及几个错误的示例：

/* 设置 CSS 的编码格式为 Unicode UTF-8 */
@charset "UTF-8";      
@charset "utf-8";       /*大小写不敏感*/
/*错误演示*/
@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
@charset  "UTF-8";      /* 无效的, @charset 与字符编码之间多用了一个空格 */
@charset "UTF-8";       /* 无效的, @规则之前多了一个空格 */
@charset UTF-8;         /* 无效的, 字符编码需要使用双引号包裹 */

@import

@import 用来向当前 CSS 样式文件中导入其它样式文件。通过 @import 可以引入其他样式表文件中除 @charset 以外的所有内容，另外 @import 也必须放在样式文件的最前面。@import 的语法格式如下：

@import <url> <media_query_list>

其中， 为使用绝对或相对路径指定的要导入的外部样式表文件路径，也可以使用 url() 函数来指定文件路径；<media_query_list> 为可选参数，用来指定媒体查询的条件，多个条件之间使用逗号,分隔。

在实际项目中不建议过多的使用 @import，因为它会造成很多额外的请求，阻塞其它文件的加载。

在使用 @import 时，还需要注意以下几点：

• @import 必须在样式表文件的开头最先声明，并且声明的末尾必须使用分号结尾，如果省略了结尾的分号，可能会导致外部样式表无法正确导入；
• 在 IE 浏览器使用 @import 最多只能引入 35 条样式表。

下面示例中演示了 @import 的使用：

@import url("global.css");
@import url(global.css);
@import "global.css";
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

以上几种定义方式都是有效的，当使用 url() 来设置样式表文件的路径时，包裹路径的引号可有可无；当直接使用具体路径来设置样式表文件的路径时，包裹路径的引号则必须保留。

@namespace

@namespace 用来定义 CSS 样式表中 XML 命名空间的 @规则，可以为当前样式文件内的所有选择器都设置指定的命名空间。@namespace 通常用来处理包含多个命名空间的文档，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。

@namespace 必须定义在所有 @charset 和 @import 的之后，并且在样式表中要位于其他任何样式声明之前。@namespace 可以用来定义默认命名空间，当指定默认命名空间后，所有的通用选择器和类选择器（但不包括属性选择器）都只会应用在这个命名空间的元素中。@namespace 也可以用于定义命名空间前缀，当一个通用、类、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。

下面示例中演示了 @namespace 的使用：

/* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/* 命名空间前缀 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

@media

@media 用来根据一个或多个媒体查询的结果来应用样式表的某一部分（花括号中的样式信息），使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。

媒体查询是用于判断设备信息的一组条件，如设备的宽高值，宽高比，颜色，分辨率等，当条件匹配时，才会执行其内嵌套的样式信息。

@media 可以放置在样式表中的任意位置，也可以放置于其它 @规则中，示例代码如下：

@media all and (min-width: 1280px) {
    /* 宽度大于1280 */
}
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx) {
    /* Retina屏幕 */
}
@media print {
    /* 打印 */
}
@media \0screen\,screen\9 {
    /* IE7,IE8 */
}
@media screen\9 {
    /* IE7*/
}

@page

@page 用于在打印文档时修改某些 CSS 属性，需要注意的是，使用 @page 您只能修改部分 CSS 属性，例如外间距属性 margin，打印相关的 orphans、widows 属性，以及 page-break-* 等属性，其他的 CSS 属性会被忽略。

/* 表示打印时 第一页的上、左外边距均为 50% */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

@supports

@supports 用于检查浏览器是否支持某个 CSS 特性，也被称为“特性查询”，该规则的语法结构如下：

@supports (rule)[operator (rule)]* { sRules };

其中，rule 为某个具体的 CSS 样式，必须使用括号包裹；operator 的可选值为 or、and、not，通过 operator 参数可以指定多条 CSS 样式。

@supports 既可以在样式文件的顶部定义，也可以在其它嵌套规则内部定义。但是 @supports 目前还在实验阶段，在使用时要先确定浏览器是否支持。

下面示例中演示了 @supports 的使用：

/* 当浏览器支持 display: grid 属性时要使用的 CSS 样式 */
@supports (display: grid) {
  div {
    display: grid;
  }
}
/* 当浏览器不支持 display: grid 属性时要使用的 CSS 样式 */
@supports not (display: grid) {
  div {
    float: right;
  }
}
/* 同时检查多个条件 */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

@font-face

@font-face 用于从远程服务器或者用户本地加载指定的字体，语法格式如下：

@font-face {
    font-family: <identifier>;
    src: <url> [format(<string>)] [, <url> [format(<string>)]]*;
    <font>;
}

参数说明如下：

• ：字体名称；
• ：使用 url()（远程字体）或者 local()（本地字体）来指定字体的存放路径，可以是相对路径也可以是绝对路径；
• ：用来指定自定义字体的格式，例如以下几种类型 truetype、opentype、embedded-opentype、svg 等；
• ：定义字体相关样式。

提示：@font-face 可以放在 css 样式表的顶部，也可以放在其它嵌套规则中。如果同时使用 local() 函数和 url() 函数加载字体，则会优先加载 local() 函数中定义的本地字体，如果没有找到则会加载 url() 函数中定义的远程字体。

下面示例中演示了 @font-face 的使用：

/* 定义 @font-face 规则 */
@font-face {
    /* 指定字体名称 */
    font-family: "Open Sans";
    /* 指定字体文件的路径 */
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
/* 字体的应用 */
p {
    font-family: "Open Sans";
}

@keyframes

@keyframes 用来定义 CSS3 中 animation 动画关键帧（或 waypoints）的样式，以此来控制动画序列中的中间步骤。定义该规则后，需要通过 animation-name 属性来使用。关键帧序列是由百分比来标识命名的，起始状态和结束状态分别为 from 和 to 代表 0% 和 100% 。

@keyframes 的语法格式如下：

@keyframes <identifier> {
    <keyframes-blocks>
}

其中 用来定义动画名称； 用来定义动画在每个阶段的样式，即帧动画。

下面示例中演示了 @keyframes 的使用：

/* 声明 */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@keyframes slideout {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
  }
  100% {
    top: 60px;
  }
}
/* 应用 */
p {
  animation-name: slidein;
  animation-duration: 4s;
}
div {
  animation-name: slideout;
  animation-duration: 4s;
}

@document

@document 用来根据文档的 URL 限制文档中样式的作用范围，通过该属性可以为指定用户定义专属的样式。目前 @document 还在实验阶段，具体标准会在 CSS4 中确定。

@document 中的可用函数如下所示：

• url()：匹配整个 URL；
• url-prefix()：匹配文档的 URL 是否以参数指定的值开头；
• domain()：匹配文档的域名是否为参数中指定的域名或者为它的子域名；
• regexp()：匹配文档的 URL 是否和参数中指定的正则表达式匹配，该表达式必须匹配整个 URL。

提示：提供给 url()、url-prefix() 和 domain() 函数的参数可以不使用引号包裹，但提供给 regexp() 函数的参数必须使用引号包裹起来。

下面示例中演示了 @document 的使用：

@document url(http://www.weixueyuan.net/),
            url-prefix(http://www.weixueyuan.net/Style/),
            domain(weixueyuan.net),
            regexp("https:.*")
{
  /* 该条 CSS 规则会应用在下面的网页:
    + URL 为"http://www.weixueyuan.net/"的页面.
    + 任何 URL 以"http://www.weixueyuan.net/Style/"开头的网页
    + 域名"weixueyuan.net"下的所有网页
    + 任何 URL 以"https:"开头的网页 */
  /* 定义样式 */
    body {
        color: purple;
        background: yellow;
    }
}

层叠

层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式，后面定义的样式会覆盖前面定义的样式。

例如整个站点引用了同样的 CSS 样式文件，但想要调整其中某个页面的某些元素，这时就可以针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式，在浏览器同样只会看到最后设置的效果。

注释

在代码中合理的添加注释是个非常好的习惯，通过注释您可以对代码加以解释说明（例如描述某段代码的功能、使用方法等），浏览器会自动忽略注释的内容。注释对开发人员非常重要，它可以帮助开发人员更快的理解代码的用途。

在 CSS 中注释以/*开头（起始符），以*/结尾（结束符），/*与*/是成对出现的，所有在/*与*/之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法，无论是在单行中使用还是跨越多行使用，只要保证注释的内容在/*与*/之间即可。例如：

/*单行注释*/

/*
    多行注释
*/

【示例】通过注释对 CSS 样式进行解释说明。

<!DOCTYPE html>
<html>
    <head>
        <title>编程帮</title>
        <style>
            /* 为所有 h1 标签设置 CSS 样式 */
            h1 {
                color: blue;        /*设置字体颜色为蓝色*/
                text-align: center; /*设置对齐方式为居中对齐*/
            }
            /* 为所有 p 标签设置 CSS 样式 */
            p {
                color: red;         /*设置字体颜色为红色*/
                font-size: 18px;    /*设置字体大小为 18 像素*/
            }
        </style>
    </head>  
    <body>
        <h1>编程帮</h1>
        <p>http://www.biancheng.net/</p>
    </body>
</html>

解释器

一个 CSS 解释器定义一条 @ 规则的属性。一条 @ 规则可以有一条或多条解释器。每一条解释器拥有：

• 一个名称
• 一个值，用于定义其名称的属性
• 一个可选的 “!important” 标识，默认不带有。

继承

在 css 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的 (“Inherited: Yes”) 还是默认不继承的 (“Inherited: no”)。这决定了当你没有为元素的属性指定值时该如何计算值。

当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value (en-US)。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

继承属性的一个典型例子就是 color 属性。给出以下样式规则：

p { color: green; }

若将其应用在下面这段 HTML 代码上…

<p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 “emphasized text” 就会呈现为绿色，因为 em 元素继承了 p 元素 color 属性的值，而没有获取 color 属性的初始值（这个 color 值用于页面没有指定 color 时的根元素）。

当元素的一个非继承属性(在 Mozilla code 里有时称之为reset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

非继承属性的一个典型例子就是 border 属性。给出以下样式规则：

 p { border: medium solid; }

若将其应用在下面这段 HTML 代码上…

<p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 “emphasized text” 就没有边框，因为 border-style 属性的初始值为none。

简写

简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，最常见的字体相关的属性可以使用 font 的简写，盒子（box）各方向的外边距（margin）可以使用 margin 这个简写。

省略属性

没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此：

p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

以上样式不会将 background 的 color 值设置为 red，而是 background-color 的默认值 transparent。

关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit 的普通属性（longhand property）。

属性的顺序

简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。

两种非常重要的情况如下：

• 与盒子（box）边界（edge）相关的属性，比如 border-style、margin 或者 padding。
• 与盒子的角（corner）相关的属性，比如 border-radius。

盒子边界

在处理和盒子的边界相关的属性时，比如 border-style、margin 或者 padding，始终使用一致的 1 个到 4 个值的语法表示：

• 单值语法：border-width: 1em，这一个值表示所有的边框宽度；

• 双值语法：border-width: 1em 2em，第一个值表示垂直方向的值，即 top 和 bottom；第二个值表示水平方向的值，即 left 和 right；

• 三值语法：border-width: 1em 2em 3em，第一个值表示 top；第二个值表示水平方向的，即 left 和 right；第三个值表示 bottom；

• 四值语法：border-width: 1em 2em 3em 4em，这四个值分别表示 top、right、bottom、left，即总是从 top 开始的顺时针顺序。

Top-Right-Bottom-Left 的首字母与英文单词 trouble 的辅音字母顺序一致：TRBL。

盒子角

在处理和盒子的角相关的属性时，比如 border-radius，也始终使用一致的 1 个到 4 个值的语法表示：

• 单值语法：border-radius: 1em，这一个值表示所有的边框宽度；
• 双值语法： border-radius: 1em 2em，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角；
• 三值语法：border-radius: 1em 2em 3em，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角；
• 四值语法：border-radius: 1em 2em 3em 4em，这四个值分别表示 top left、top right、bottom right、bottom left，即总是从 top left 开始的顺时针顺序。

Background 属性

background 有以下属性：

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

可以简写成一行声明：

background: #000 url(images/bg.gif) no-repeat top right;

简写的形式实际上等价于以上普通属性再加上 background-attachment: scroll 以及 CSS3 中的一些附加属性。

Font 属性

下面的声明：

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

可以简写成下面的：

font: italic bold .8em/1.2 Arial, sans-serif;

这个简写声明实际上等价于以上普通属性再加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。

Border 属性

对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：

border-width: 1px;
border-style: solid;
border-color: #000;

可以简写成：

border: 1px solid #000;

Margin 和 Padding 属性

margin 和 padding 值的简写版本类似。下面的 CSS 声明：

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left，与“trouble”的辅音字母顺序相同）。

margin: 10px 5px 10px 5px;

Margin 对于多个值有以下的简写规则：

• 当只有一个值声明时，该值会用于所有四个值。
• 当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。
• 当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。
• 当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针方向）。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

1. 选择器相同，则执行层叠性。
2. 选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承、通配符选择器（*）	0，0，0，0
标签选择器、伪元素选择器	0，0，0，1
类选择器、伪类选择器、结构伪类选择器、属性选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式，style=“”	1，0，0，0
!important，重要的	无穷大

优先级注意点：

1. 权重是有4组数字组成，但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4. 可以简单记忆法，通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!important无穷大。
5. 继承的权重为0，如果元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

值定义

CSS 属性值定义语法（CSS value definition syntax）是用来限定 CSS 属性合法取值的专门语法。在此基础之上，一个 CSS 属性的合法取值也由语义所限制，比如一些数字必须是正数。

CSS 属性值定义语法描述了哪些值是可取的 CSS 属性，基本组成元素包括关键字、符号与带类型的参数。

单位与取值类型

CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上的任何属性页将帮助你理解对任何特定属性有效的值。

什么是 CSS 的值？

在 CSS 规范和 MDN 的属性页上，你将能够发现值的存在，因为它们将被尖括号包围，如 <color> 或 <length>。当你看到值 <color> 对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值。

你还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。

是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性（例如 color 属性和 <color> 数据类型）。你可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。

在下面的例子中，我们使用关键字设置标题的颜色，使用 rgb() 函数设置背景：

h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}

CSS 中的值类型是一种定义了一些可使用的值的集合的方式。这意味着如果你看到的 <color> 是有效的，那么你就不需要考虑可以使用哪种类型——不管是关键字、十六进制值还是 rgb() 函数等都是有效的。如果浏览器支持这些可用的 <color> 值，则可以使用它们当中的任意一个。MDN 上针对每个值类型的页面将提供有关浏览器支持的信息。例如，如果你查看 `` 的页面，你将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。

数字、长度和百分比

你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：

数值类型	描述
<integer>	<integer> 是一个整数，比如 1024 或 -55。
<number>	<number> 表示一个小数——它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 -1.2。
<dimension>	<dimension> 是一个 <number> 它有一个附加的单位，例如 45deg、5s 或 10px。<dimension> 是一个伞形类别，包括 <length>、<angle>、<time> 和 <resolution> 类型。
<percentage>	<percentage> 表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量。例如，一个元素的长度相对于其父元素的长度。

长度

最常见的数字类型是 ，例如 10px（像素）或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

单位	名称	等价换算
cm	厘米	1cm = 37.8px = 25.2/64in
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	派卡	1pc = 1/6th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）。

相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。
ex	字符“x”的高度。
ch	数字“0”的宽度。
rem	根元素的字体大小。
lh	元素的行高。
rlh	根元素的行高。当用于根元素的 font-size 或 line-height 属性时，它指的是这些属性的初始值。
vw	视口宽度的 1%。
vh	视口高度的 1%。
vmin	视口较小尺寸的 1%。
vmax	视口大尺寸的 1%。
vb	在根元素的块向上，初始包含块的尺寸的 1%。
vi	在根元素的行向上，初始包含块的尺寸的 1%。
svw、svh	分别为视口较小尺寸的宽度和高度的 1%。
lvw、lvh	分别为视口大尺寸的宽度和高度的 1%。
dvw、dvh	分别为动态视口的宽度和高度的 1%。

em 和 rem

em 和 rem 是你在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当你开始学习更复杂的主题时，比如样式化文本或 CSS 布局。

百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity），它控制元素的不透明度（它的透明程度）。此属性接受 0（完全透明）和 1（完全不透明）之间的数字。

颜色

在 CSS 中指定颜色的方法有很多，其中一些是最近才实现的。在 CSS 中，相同的颜色值可以在任何地方使用，无论你指定的是文本颜色、背景颜色还是其他颜色。

现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值（256 x 256 x 256 = 16,777,216）。

十六进制 RGB 值

你可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号（#）和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f（代表 15）之间的 16 个值中的一个——所以是 0123456789abcdef。每对值表示一个通道——红色、绿色和蓝色——并允许我们为每个通道指定 256 个可用值中的任意一个（16 x 16 = 256）。

这些值有点复杂，不太容易理解，但是它们比关键字更通用——你可以使用十六进制值来表示你想在配色方案中使用的任何颜色。

.one {
  background-color: #02798b;
}

.two {
  background-color: #c55da1;
}

.three {
  background-color: #128a7d;
}

RGB 和 RGBA 的值

我们将在这里讨论的第三种方案是 RGB。RGB 值是一个函数——rgb()——它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的——这有点容易理解。

.one {
  background-color: rgb(2, 121, 139);
}

.two {
  background-color: rgb(197, 93, 161);
}

.three {
  background-color: rgb(18, 138, 125);
}

你可以向 rgb() 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 0，它将使颜色完全透明，而 1 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。

在颜色上设置 alpha 通道与使用我们前面看到的 opacity 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。

在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。

.one {
  background-color: rgba(2, 121, 139, .3);
}

.two {
  background-color: rgba(197, 93, 161, .7);
}

.three {
  background-color: rgba(18, 138, 125, .9);
}

HSL 和 HSLA 的值

另一种指定颜色的方法是 HSL 颜色模型。hsl() 函数不接受红、绿、蓝值，而是接受色相、饱和度和亮度值，这些值用于区分 1670 万种颜色，但方式不同：

• 色调：颜色的底色。这个值在 0 和 360 之间，表示 color wheel (en-US) 周围的角度。
• 饱和度：颜色有多饱和？它的值为 0–100%，其中 0 为无颜色（它将显示为灰色阴影），100% 为全色饱和度
• 亮度：颜色有多亮？它从 0–100% 中获取一个值，其中 0 表示没有光（它将完全显示为黑色），100% 表示完全亮（它将完全显示为白色）

.one {
  background-color: hsl(188, 97%, 28%);
}

.two {
  background-color: hsl(321, 47%, 57%);
}

.three {
  background-color: hsl(174, 77%, 31%);
}

就像 rgb() 一样，你可以向 hsl() 传递一个 alpha 参数来指定不透明度。

.one {
  background-color: hsl(188 97% 28% / .3);
}

.two {
  background-color: hsl(321 47% 57% / .7);
}

.three {
  background-color: hsl(174 77% 31% / .9);
}

在旧版本的 CSS 中，hsl() 语法不支持 alpha 参数——你需要使用一个叫做 hsla() 的不同函数来实现。现在你可以向 hsl() 传递一个 alpha 参数，但为了向后兼容老网站，hsla() 语法仍然被支持，并且具有与 hsl() 完全相同的行为。

你可以在项目中使用这些颜色值中的任何一个。对于大多数项目，你可能会选择一个调色板，然后在整个项目中使用这些颜色——以及你所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个！

图片

数据类型用于图像为有效值的任何地方。它可以是一个通过 url() 函数指向的实际图像文件，也可以是一个渐变。

.image {
  background-image: url(star.png);
}

.gradient {
  background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%);
}

位置

数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像（通过 background-position）。它可以使用关键字（如 top、left、bottom、right 以及 center）将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

.box {
  height: 300px;
  width: 400px;
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: right 40px;
}

字符串和标识符

在上面的示例中，我们看到关键字被用作值的地方（例如 <color> 关键字，如 red、black、rebeccapurple 和 goldenrod）。这些关键字被更准确地描述为标识符，一个 CSS 可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。

在某些地方可以使用 CSS 中的字符串，例如在指定生成的内容时。在本例中，引用该值以证明它是一个字符串。

.box {
  width:400px;
  padding: 1em;
  border-radius: .5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
}

.box::after {
  content: "This is a string. I know because it is quoted in the CSS."
}

函数

我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与 JavaScript、Python 或 C++ 等语言相关联，但它们也以属性值的形式存在于 CSS 中。我们已经在颜色部分看到了函数的作用——rgb()、hsl() 等。用于从文件返回图像的值——url()——也是一个函数。

calc() CSS 函数的行为更像你在传统编程语言中可能找到的东西。这个函数使你能够在 CSS 中进行简单的计算。如果你想计算一些你在编写项目的 CSS 时无法定义的数值，并且需要浏览器在运行时为你计算，那么它特别有用。

例如，下面我们使用 calc() 使框宽为 20% + 100px。20% 是根据父容器 .wrapper 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用 calc() 来告诉浏览器为我们做这个计算。

.wrapper {
  width: 400px;
}

.box {
  width: calc(20% + 100px);
}

选择器

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。

通用选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：

* {
    margin: 0 auto;
    padding: 0;
}

注意：虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点，频繁的使用会给浏览器带来太多不必要的压力。

元素选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

p {
    color: blue;
}

p选择器能够匹配文档中所有的<p>标签。

类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示：

.black {
    color: black;
}

.black选择器能够匹配文档中所有具有class="black"属性的标签。

由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：

p.black {
    color: black;
}

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的<p>标签中，对于其它的具有class="black"属性的标签则没有影响。

另外，一个 HTML 标签中 class 属性可能不止一个，例如：

<p class="info selected"></p>
<p class="info"></p>

假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：

.info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。

ID选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值，如下所示：

#nav {
    color: red;
}

#nav选择器能够匹配文档中具有id="nav"属性的标签。

属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息，如下所示：

input[type="text"] {
   color: blue;
}

input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。

选择符	描述
E[att]	选择具有att属性的E元素
E[att=val]	选择具有att属性且属性值等于val的E元素
E[att^=val]	匹配具有att属性且值以val开头的E元素
E[att$=val]	匹配具有att属性且值以val结尾的E元素
E[att*=val]	匹配具有att属性且值中包含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重都是10。

后代选择器

当一个<p>标签嵌套在一个<div>标签内部的时候，就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：

ul li a {
    text-decoration: none;
}

ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签。

子元素选择器

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开，如下所示：

p > strong {
    color:red;
}

p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色，但对第二个<p>标签中的<strong>标签则没有影响。

<p>欢迎访问<strong>编程帮</strong>！</p>
<p><em><strong>编程帮（biancheng.net）</strong></em>，一个在线学习编程的网站，专注于分享优质编程教程。</p>

相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示：

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

/* 1.选择ul里面的第一个孩子 小li */
ul li:first-child {
    background-color: pink;
}

/* 2.选择ul里面的最后一个孩子 小li */
ul li:last-child {
    background-color: pink;
}

/* 3.选择ul里面的第五个孩子 小li */
ul li:nth-child(5) {
    background-color: pink;
}

/* 4.把所有的偶数的孩子选出来 */
ul li:nth-child(even) {
    background-color: #ccc;
}

/* 5.把所有的奇数的孩子选出来 */
ul li:nth-child(odd) {
    background-color: red;
}

/* 6.nth-child(n) 从0开始，每次加1，往后计算，这里面必须是n，不能是其他字母，为n时选择了所有的孩子 */
ol li:nth-child(n) {
    background-color: pink;
}

/* 7.nth-child(n) 为2n时选择了偶数的孩子 */
ol li:nth-child(2n) {
    background-color: pink;
}

/* 8.nth-child(n) 为2n+1时选择了奇数的孩子 */
ol li:nth-child(2n+1) {
    background-color: pink;
}

选择符	描述
E: first-child	匹配父元素中的第一个子元素E
E: last-child	匹配父元素中最后一个子元素E
E: nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-tye	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

区别：

1. nth-child对父元素里面的所有子元素排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配，匹配正确执行样式，匹配不正确则不执行样式。
2. nth-of-type对父元素里面的指定子元素精选排序选择，先去匹配E，然后在根据E找第n个孩子。

E: nth-child(n)选择某个父元素的一个或多个特定的子元素

1. n可以是数字，关键字和公式。
2. n如果是数字，就是选择第n个子元素，里面的数字从1开始。
3. n可以是关键字：even偶数，odd偶数。
4. n可以是公式：常见的公式如下（如果n时公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）。

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15…
n+5	从第5个开始（包括第5个）到最后
-n+5	前5个（包括第5个）

伪元素

伪元素选择器可以帮我们利用CSS创建新标签，而不需要HTMl标签，从而简化HTMl结构。

选择器	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

1. before和after创建一个元素，但是属于行内元素。
2. 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
3. 语法：element::before{}。
4. before和after必须有content属性。
5. before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
6. 伪元素选择器和标签选择器一样，权重为1。

定位

position

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：

取值	说明
static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed	固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。

.box {
    z-index: 1;
}

1. 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上。
2. 如果属性值相同，则按照书写顺序，后来居上。
3. 数字后面不能加单位。
4. 只有定位的盒子才有z-index属性。

top、left、bottom、right

top

top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
top: 3px;
top: 2.4em;

/* 参照于包含块高度的百分比 */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

top的效果取决于元素的position属性：

• 当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
• 当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
• 当position设置为sticky时，如果元素在 viewport 里面，top属性的效果和 position 为relative等同；如果元素在 viewport 外面，top属性的效果和 position 为fixed等同。
• 当position设置为static时，top属性无效。

当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom 都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。

left

CSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
left: 3px;
left: 2.4em;

/* <percentage>s of the width of the containing block */
left: 10%;

/* Keyword value */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: unset;

left的效果取决于元素的position属性：

• 当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
• 当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
• 当position设置为sticky时，如果元素在 viewport 里面，left属性的效果和 position 为relative等同；如果元素在 viewport 外面，left属性的效果和 position 为fixed等同。
• 当position设置为static时，left属性无效。

当left和right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

bottom

bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
bottom: 3px;
bottom: 2.4em;

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: unset;

bottom的效果取决于元素的position属性：

• 当position设置为absolute或fixed时，bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
• 当position设置为relative时，bottom属性指定了元素的下边界离开其正常位置的偏移。
• 当position设置为sticky时，如果元素在 viewport 里面，bottom属性的效果和 position 为relative等同；如果元素在 viewport 外面，bottom属性的效果和 position 为fixed等同。
• 当position设置为static时，bottom属性无效。

当 top和bottom同时指定时，并且 height没有被指定或者指定为auto或100%的时候，top和bottom都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。

right

right CSS 属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。

/* <length> values */
right: 3px;
right: 2.4em;

/* <percentage>s of the width of the containing block */
right: 10%;

/* Keyword value */
right: auto;

/* Global values */
right: inherit;
right: initial;
right: unset;

right的效果取决于元素的position属性：

• 当 position 设置为 absolute 或 fixed 时，right 属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
• 当 position 设置为 relative 时，right 属性指定了元素的右边界离开其正常位置的偏移。
• 当 position 设置为 sticky 时，如果元素在 viewport 里面，right 属性的效果和 position 为 relative 等同；如果元素在 viewport 外面，right 属性的效果和 position 为 fixed 等同。
• 当 position 设置为 static 时，right 属性无效。

当 left 和 right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，left 的值会被优先设定；当容器是从右到左时，right 的值会被优先设定。

布局

Box Model

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型 (Box Model)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GbZ08aoH-1683380796866)(img/前端技术学习路线图-初阶-CSS-Box Model.jpg)]

不同部分的说明：

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content（内容） - 盒子的内容，显示文本和图像

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

**提示：**在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

Flexbox

Flexbox 是 CSS Flexible Box Layout Module 的常用名称，这是一种用于在单个维度（行或列）中显示项目的布局模型。

在规范中，Flexbox 被描述为用户界面设计的布局模型。Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。

Flexbox 还可以对齐主轴或交叉轴上的项目，从而提供对一组项目大小和对齐的高级控制。

grid

grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)

您仅可在一个 grid 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

columns

CSS 属性 columns 用来设置元素的列宽和列数。

它是一个简写属性，可在单个方便的声明中设置 column-width (en-US) 和 column-count 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

columns 属性可以按任何顺序指定为下面列出的一个或两个值。

flex

Flex 布局优势

Flex布局（弹性布局）：

1. Flex布局是一种浏览器提倡的布局模型。
2. 布局网页更简单、灵活。
3. 避免浮动脱标的问题。

Flex 布局模型构成

Flex布局作用：

1、基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

2、Flex布局非常适合结构化布局。

设置方式：给父元素添加：display: flex，子元素可以自动的挤压或拉伸

Flex布局模型组成：

弹性容器、弹性盒子、主轴、侧轴/交叉轴

水平排列：默认主轴在水平方向，弹性盒子都是沿着主轴排列。

主轴对齐方式 justify-content

justify-content: 属性值;

属性值	描述
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

注意：属性需添加到弹性容器。

侧轴对齐方式 align-items

align-items: 属性值;

属性值	描述
flex-start	默认值，起点开始一次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿侧轴线被拉伸至铺满容器

注意：属性需添加到弹性容器。

补充：align-self控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)。

弹性盒子尺寸特点

宽度：如果没有给定宽度则靠内容撑开，如果给定宽度则以给定的宽度显示。

高度：

1. 如果没有给定高度，又没有设置任何的侧轴对齐方式，弹性盒子会被拉伸至和父盒子一样的高度。
2. 如果没有给定高度，又设置任何了除 stretch 以外其他的侧轴对齐方式，弹性盒子根据内容高度撑开。
3. 如果给定了高度，则按照给定的高度进行显示。

Flex属性

作用：按照比例来划分容器盒子的宽度

flex: 属性值;

属性值：数值（整数）

注意： 只占用父盒子剩余尺寸。

flex属性是**flex-grow、flex-shrink和flex-basis**的简写。

Flex-basis属性

语法：

flex-basis: 属性值;

属性值	描述
auto	默认值，根据弹性盒子自身尺寸渲染
content	根据弹性盒子内容自动调整大小
max- content	最大内容宽度
mix- content	最小内容宽度
fill	未知
fit- content	未知

flex-basis与width不同:

flex-basis与width盒模型

• 只设置宽度、内边距、边框属性时，flex-basis与width尺寸相同。

.flex-basis {
    padding: 10px;
    border: 10px solid pink;
    color: pink;
    flex-basis: 100px;
}

.width {
    padding: 10px;
    border: 10px solid pink;
    color: pink;
    width: 100px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vMrK8Dy3-1683380796867)(img/前端技术学习路线图-初阶-CSS-flex-1.jpg)]

.flex-basis {
    padding: 10px;
    border: 10px solid pink;
    color: pink;
    flex-basis: 100px;
    box-sizing: border-box;
    word-break: break-all;
}

• 当给盒子开启內减模式和单词内换行时，盒子外部尺寸表现为100px。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kukXI4YA-1683380796867)(img/前端技术学习路线图-初阶-CSS-flex-2.jpg)]

flex-basis与width关系

在flex布局中，弹性盒子设置width是没有直接效果的。当弹性盒子有宽度时，并不是width直接生效，而是flex-basis：auto生效，同时在flex布局中，flex-basis优先级是高于width的。

同时设置width：300px和flex-basis: 200px时，width无法生效。

.flex-basis {
    padding: 10px;
    border: 10px solid pink;
    color: pink;
    flex-basis: 200px;
    width: 300px;
    box-sizing: border-box;
    word-break: break-all;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afOCh3Pr-1683380796867)(img/前端技术学习路线图-初阶-CSS-flex-3.jpg)]

.width {
    width: 100px;
}

最终尺寸=自身mix basis尺寸。

此时，自身尺寸为100px，min basis尺寸按照自身尺寸来计算（默认值为auto），所以自身尺寸为100px。

.flex-basis {
    flex-basis: 100px;
}

最终尺寸=自身mix basis尺寸。

此时，自身尺寸就是内容最小宽度，basis尺寸100px，因此最终尺寸是：如果内容最小宽度不超过100px，则最终尺寸是100px，否则就是内容最小宽度（开启内容不换行）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmtvqK7s-1683380796868)(img/前端技术学习路线图-初阶-CSS-flex-4.jpg)]

当最小内容宽度、width和flex-basis同时满足时（开启內减模式）：

width:100px + flex-basis:auto = 元素自身100px

content + flex-basis:100px = max(content, flex-basis) = 大于等于100px

再加上flex-basis优先级是比width高的结论，我们就可以得到：

content + width:100px + flex-basis:100px = content + flex-basis:100px = max(content, flex-basis) = 大于等于100px。

Flex-grow属性

Flex-grow属性定义弹性盒子的放大比例，默认为0，即如果存在剩余的空间，也不放大。

如果所有的弹性盒子Flex-grow都为1，则为它们等分剩余空间。如果一个弹性盒子的Flex-grow属性为2，其他弹性盒子都为1，则前占据的剩余空间将比其他项多一倍。

Flex-shrink属性

Flex-shrink属性定义了弹性盒子的缩小比例，默认为1，即如果空间不足，则该盒子将缩小。

如果所有的弹性盒子Flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个盒子的Flex-shrink属性为0，其他盒子都为1，则空间不足时，前者不缩小。

负值对该属性无效。

修改主轴方向 flex-direction

主轴默认是水平方向，侧轴默认是垂直方向。

flex-direction: 属性值;

属性值	描述
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右往左
column-reverse	列，从下往上

多行排列 flex-wrap

弹性盒子换行：

flex-wrap: wrap;

order属性

order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。

order:属性值；

属性值为整数。数值越小越靠前，默认为0。

样式

背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色。

<style>
  div {
    width: 200px;
    height: 200px;
    background-color: #ff6f00;
  }
</style>

一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色。

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

<style>
  div {
    width: 200px;
    height: 200px;
    background-image: url(images/logo.png);
  }
</style>

属性值	描述
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺

background-repeat属性定义了背景图像在HTML页面上进行平铺。

<style>
  div {
    width: 200px;
    height: 200px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
  }
</style>

属性值	描述
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

背景图片位置

利用background-position属性可以改变图片在背景中的位置。

<style>
  div {
    width: 500px;
    height: 500px;
    background-color: pink;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。

属性值	描述
length	百分数（由浮点数字和单位标识符组成的长度值）
position	top、center、bottom、left、center、right，方位名词

1. 参数是方位名词：
   • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如“left top”和“top left”效果一致。
   • 如果只指定一个访问名词，另一个值省略，则第二个值默认居中对齐。
2. 参数是精确单位：
   • 如果参数值是精确单位，那么第一个肯定是x坐标，第二个一定是y坐标。
   • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
3. 参数是混合单位：
   • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

背景图像固定

background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

<style>
  body {
    background-image: url(images/bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-style: 16px;
    color: #fff;
  }
</style>

属性值	描述
scroll	背景图像时随对象内容滚动
fixed	背景图像固定

背景复合属性

综合写法1：

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

<style>
  background: #fff url(images/bg.jpg) no-repeat fixed center top;
</style>

综合写法2：

我们也可以把背景尺寸设置给到综合写法中，用 / 隔开连接即可，但是必须要有background-position值，哪怕是0也要书写，否则综合写法失效。

<style>
  background: red url(./img/01.gif) no-repeat 0 0 / cover;
</style>

背景尺寸

如果背景图片小于当前的盒子或者大于当前的盒子，设置背景图的尺寸大小。

取值为cover（常用）：

背景图等比缩放，一直到铺满整个盒子。

<style>
  background-size: cover;
</style>

注意：该属性取值如果**背景图和盒子比例不一致。可能会导致背景图过大超出盒子显示不全，溢出隐藏。

取值为contain：

背景图等比缩放，直到背景图的宽或者高和盒子一致就停止缩放。

<style>
  background-size: contain;
</style>

注意：该属性取值如果背景图和盒子比例不一致可能会导致背景图不会完全铺满盒子。

取值为实际像素大小（移动端小图标常用）：

设置背景图大小固定，一般我们可以让宽俄日固定的值，然后让高为auto自动计算。

<style>
  background-size: 45px auto;
</style>

背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

<style>
  background: rgba(0, 0, 0, .4);
</style>

最后一个参数时alpha透明度，取值范围在0~1之间。

我们习惯把0.4的0省略掉，写为“background: rgba(0, 0, 0, .4)”。

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

盒子透明

opacity 设置盒子的透明，取值为0-1之间，0表示完全透明，1表示不透明，之间的小数表示透明的程度。

<style>
  opacity: .5;
</style>

注意：用opacity 设置透明，不仅让背景颜色透明，也会影响盒子里面的内容也跟着透明，所以我们不建议使用，后期在制作css3的动画时会用到。

文本

CSS text属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用来定义文本的颜色。

<style>
  div {
    color: red;
    color: #ff00c0;
    color: rgb(255, 0, 125);
  }
</style>

表示	属性值
预定义的颜色值	red，green，blue等固定颜色
十六进制	#ff00c0、#ff0000
RGB代码	rgb(255, 0, 125)或rgb(100%, 0%, 80%)

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

<style>
  h1 {
    text-align: center;
  }
</style>

属性值	描述
left	左对齐(默认)
right	右对齐
center	居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等。

<style>
  a {
    text-decoration: none;
    color: black;
  }
</style>

属性值	描述
none	默认，没有装饰线
underline	下划线
overline	上划线
line-through	删除线

文本缩进

text-indent属性用来定义指定文本的第一行的缩进，通常是将**$段落的首行缩进$**。

<style>
  p {
    font-size: 26px;
    text-indent: 26px;
    text-indent: 2em;
  }
</style>

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

em是一个相对单位，就是当前元素(font-size)$1个文字的大小$，如果当前元素没有设置大小，啧按照父元素的1个文字大小。

行间距

line-height属性用于设置行间的距离(行高)，可以控制文本于文本之间的距离。

<style>
  p {
    line-height: 26px;
  }
</style>

行间距由上间距、文本高度、下间距组成。

文本阴影

在CSS3中，可以使用text-shadow属性为文本添加阴影。

<style>
  div {
    text-shadow: 10px 10px 5px rgba(0, 0, 0, .3);
  }
</style>

属性值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

边框

border可以设置元素的边框。边框有三个部分组成：边框宽度、边框样式、边框颜色。

<style>
  body {
    border-width: 2px;
    border-style: solid;
    background-color: pink;
  }
</style>

属性值	描述
border-width	定义边框粗细，单位是px
border-style	定义边框的样式
border-color	定义边框的颜色

属性值	描述
solid	实线边框
dashed	虚线边框
dotted	点线边框
double	双线边框

边框复合属性（没有顺序）

<style>
  body {
     border: 1px solid blue;
  }
</style>

属性值	描述
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

列表

无序列表

<ul>标签表示HTML中项目的无序列表，一般会以项目符号呈现列表项，而列表项则用

• 标签定义。

• <ul>
      <li></li>
  </ul>
  

  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul>中只能嵌套
  4. ，直接在
     标签中输入其他标签或者文字的做法是不被允许的。
  5. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  6. 无序列表会带有自己的样式属性，但在实际使用时，会使用CSS来设置。
  7. list-style: none去除
  8. 前面的标点。

  有序列表

  <ol>标签表示HTML中项目的有序列表，列表顺序以数字来显示，并且使用

• 标签定义列表项。

• <ol>
      <li></li>
  </ol>
  

  1. <ol></ol>中只能嵌套
  3. ，直接在
     标签中输入其他标签或者文字的做法是不被允许的。
  4. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  5. 有序列表会带有自己的样式属性，但在实际使用时，会使用CSS来设置。

  自定义列表

  在HTML标签中，

  标签用于定义描述列表(或定义列表)，该标签会与 (定义项目/名字)和

  (描述每一个项目/名字)一起使用。

  <dl>
      <dt></dt>
      <dd></dd>
  </dl>
  

  1. <dl></dl>里面只能包含 和
     。
  2. <dt>和<dd>个数没有限制，经常是一个 对应多个
     。

  动画

  Animation

  动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画。常用来实现复杂的动画效果。

  相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

  动画的基本使用

  制作动画分为两步：

  1、先定义动画

  2、再使用（调用）动画

  动画序列：

  1、0%是动画的开始，100%是动画的完成。这样的规划就是动画序列。

  2、在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

  3、动画是使元素从一种样式逐步变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

  4、用百分比来规定变化发生的时间，或用关键词form和to，等同于0%和100%。

  用keyframes定义动画（类似定义类选择器）

  /* 1、先定义动画 */
  @keyframes 动画名称 {
  
      /* 开始状态 */
      0% {
          transform: translateX(0px);
      }
  
              /* 结束状态 */
      100% {
          transform: translateX(1200px);
      }
  }
  

  元素使用动画

  div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 2、元素使用动画 */
      /* 调用动画 */
      animation-name: move;
      /* 持续时间 */
      animation-duration: 2s;
  }
  

  动画常用属性

  属性	描述
  @keygrams	规定动画
  animation	所有动画属性的简写属性，除了”animation-play-state”属性
  animation-name	规定”@keygrams”动画名称（必须）
  animation-duration	规定动画完成一个周期所花费的秒或者毫秒，默认是0（必须）
  animation-timing-function	规定动画的速度曲线，默认是”ease”，均速是”infinite”
  animation-delay	规定动画何时开始，默认是0
  animation-iteration-count	规定动画被播放的次数，默认是1，还有”infinite”
  animation-direction	规定动画是否在下一周期逆向播放，默认是”normal”，alternate逆播放
  animation-play-state	规定动画是否正在运行或暂停。默认是”running”，还有” paused”
  animation-fill-mode	规定动画结束后，保持” forwards”回到起点” backwards”

  div {
      width: 100px;
      height: 100px;
      background-color: lightskyblue;
      /* 动画名称 */
      animation-name: move;
      /* 持续时间 */
      animation-duration: 3s;
      /* 运动曲线 */
      animation-timing-function: ease;
      /* 何时开始 */
      animation-delay: 1s;
      /* 重复次数 iteration 重复的 count 次数 infinite */
      animation-iteration-count: infinite;
      /* 是否反方向播放 默认的是normal 如果想反方向播放 则写 alternate */
      animation-direction: alternate;
      /* 动画结束后的状态 默认是 backwards 回到起始状态 forwards 停留在结束状态 */
      animation-fill-mode: forwards;
  }
  
  div:hover {
      /* 鼠标经过div 让这个div停止动画 鼠标离开就继续动画 */
      animation-play-state: paused;
  }
  

  动画属性简写

  animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态;

  animation: move 3s linear 1s infinite alternate;
  

  注意：

  1. 简写属性里面不包含animation-play-state。
  2. 暂停动画：animation-play-state: paused；经常和鼠标经过等其他配合使用。
  3. 想要动画走回来，而不是直接跳回来：animation-direction: alternate。
  4. 盒子动画结束后，停在结束位置：animation-fill-mode: forwards。

  速度曲线细节

  animation-timing-function:规定动画的速度曲线，默认是“ease”。

  属性值	描述
  linear	动画从头到尾的速度是相同的，匀速
  ease	默认，动画以低速开始，然后加快，在结束前变慢
  ease-in	动画以低速开始
  ease-out	动画以低速结束
  ease-in-out	动画以低速开始和结束
  steps()	指定了时间函数中的间隔数量（步长）

  注意：

  • steps就是分几步来完成我们的动画，有了steps就不要写ease或者linear了

  transition

  过渡时CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或Javascript的情况下，当元素从一个样式转换为另一个样式时为元素添加的效果。

  过渡动画：是从一个状态渐渐的过度到另一个状态。

  可以让我们页面更好看，更动感十足，但是不会影响页面布局。

  现在经常和:hover一起搭配使用。

  transition：要过渡的属性 花费时间 运动曲线 何时开始；

  transition: all .5s ease .5s;
  

  1. 属性：想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
  2. 花费时间：单位是秒（必须写单位）比如0.5s。
  3. 运动曲线：默认是ease（可以省略）。
  4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）。

  注意：

  1. 谁做过渡给谁加。
  2. 如果想要写多个属性，用逗号分隔。
  3. 如果想要过渡多个属性，用all代替。

  应用

  响应式

  vh/vw

  vw/vh 基本使用

  特点：

  1. 相对单位，相对视口的尺寸计算结果
  2. vw：viewport width：1vw=1/100视口的宽度
  3. vh：viewport height：1vh=1/100视口的高度

  vw 移动适配

  width: 100 + 10vw;
  width: 100 - 10vw;
  width: 100 * 2vw;
  
  /* 
      除法运算    
  */
  width: (100 / 37.5vw);
  

  vh 移动适配

  width: 100 + 10vh;
  width: 100 - 10vh;
  width: 100 * 2vh;
  
  /* 
      除法运算    
  */
  width: (100 / 37.5vh);
  

  百分比

  百分比布局， 也叫流式布局，宽度自适应，高度固定。

  自适应

  rem 基本使用

  效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

  特点：

  1. rem是相对单位。
  2. rem单位是相对于HTML标签的字号计算结果。
  3. 1rem = 1HTML字号大小。

  rem 配合媒体查询

  媒体查询：

  1. 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。
  2. 当某个条件成立， 执行对应的CSS样式。

  @media (媒体特性)) {
      选择器{
          CSS属性
      }
  }
  

  rem 移动端适配

  目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。

  @media(width:375px) {
      html {
          font-size: 37.5px;
      }
  }
  
  @media(width:320px) {
      html {
          font-size: 32px;
      }
  }
  
  @media(width:414px) {
      html {
          font-size: 41.4px;
      }
  }
  

  rem 布局流程

  流程：

  1. 根据视口宽度，设置不同的HTML标签字号。
  2. 书写代码，尺寸是rem单位。
     1. 确定设计稿对应的设备的HTML标签字号。
        • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)。
     2. rem单位的尺寸。
        • rem单位的尺寸 = px单位数值 / 基准根字号。

  flexible 配合rem

  flexible.js 是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

  <!-- 通过script标签引入外部js文件 -->
  <script src="./js/flexible.js"></script>
  

  快，在结束前变慢 |
  | ease-in | 动画以低速开始 |
  | ease-out | 动画以低速结束 |
  | ease-in-out | 动画以低速开始和结束 |
  | steps() | 指定了时间函数中的间隔数量（步长） |

  注意：

  • steps就是分几步来完成我们的动画，有了steps就不要写ease或者linear了

  transition

  过渡时CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或Javascript的情况下，当元素从一个样式转换为另一个样式时为元素添加的效果。

  过渡动画：是从一个状态渐渐的过度到另一个状态。

  可以让我们页面更好看，更动感十足，但是不会影响页面布局。

  现在经常和:hover一起搭配使用。

  transition：要过渡的属性 花费时间 运动曲线 何时开始；

  transition: all .5s ease .5s;
  

  1. 属性：想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
  2. 花费时间：单位是秒（必须写单位）比如0.5s。
  3. 运动曲线：默认是ease（可以省略）。
  4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）。

  注意：

  1. 谁做过渡给谁加。
  2. 如果想要写多个属性，用逗号分隔。
  3. 如果想要过渡多个属性，用all代替。

  应用

  响应式

  vh/vw

  vw/vh 基本使用

  特点：

  1. 相对单位，相对视口的尺寸计算结果
  2. vw：viewport width：1vw=1/100视口的宽度
  3. vh：viewport height：1vh=1/100视口的高度

  vw 移动适配

  width: 100 + 10vw;
  width: 100 - 10vw;
  width: 100 * 2vw;
  
  /* 
      除法运算    
  */
  width: (100 / 37.5vw);
  

  vh 移动适配

  width: 100 + 10vh;
  width: 100 - 10vh;
  width: 100 * 2vh;
  
  /* 
      除法运算    
  */
  width: (100 / 37.5vh);
  

  百分比

  百分比布局， 也叫流式布局，宽度自适应，高度固定。

  自适应

  rem 基本使用

  效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

  特点：

  1. rem是相对单位。
  2. rem单位是相对于HTML标签的字号计算结果。
  3. 1rem = 1HTML字号大小。

  rem 配合媒体查询

  媒体查询：

  1. 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。
  2. 当某个条件成立， 执行对应的CSS样式。

  @media (媒体特性)) {
      选择器{
          CSS属性
      }
  }
  

  rem 移动端适配

  目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。

  @media(width:375px) {
      html {
          font-size: 37.5px;
      }
  }
  
  @media(width:320px) {
      html {
          font-size: 32px;
      }
  }
  
  @media(width:414px) {
      html {
          font-size: 41.4px;
      }
  }
  

  rem 布局流程

  流程：

  1. 根据视口宽度，设置不同的HTML标签字号。
  2. 书写代码，尺寸是rem单位。
     1. 确定设计稿对应的设备的HTML标签字号。
        • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)。
     2. rem单位的尺寸。
        • rem单位的尺寸 = px单位数值 / 基准根字号。

  flexible 配合rem

  flexible.js 是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

  <!-- 通过script标签引入外部js文件 -->
  <script src="./js/flexible.js"></script>