[TOC] # 选择器 ## 选择器表 |选择器| 例子 |描述| | :---- | :---- | :--- | |.class| .intro |类选择器| |#id |#firstname |id 选择器| |* |* |选择所有元素| |element |p|选择所有\<p>元素| |element, element| div, p |选择所有 \<div> 元素和所有 \<p> 元素| |element element |div p |选择 \<div> 元素内部的所有 \<p> 元素| |element > element |div > p |选择父元素为 \<div>元素的所有 \<p>元素| |element + element |div + p |选择紧接在 \<div> 元素之后的所有 \<p> 元素| |element ~ element |p ~ ul |选择所有为 \<p> 元素兄弟元素的 \<ul> 元素（ul 与 p 为兄弟关系而不是父子关系）| <span style="font-size: 20px;">通过属性选择</span> |选择器| 例子| 描述| | :---- | :---- | :---- | |[attribute]| [target]| 选择带有 target 属性的所有元素| |[attribute=value]| [target=_blank]| 选择 target="_blank" 的所有元素| |[attribute^=value]| a[src^=”https”]| 选择其 src 属性以 "https" 开头的每个 \<a> 元素| |[attribute$=value]| a[src$=”.pdf”]| 选择其 src 属性以 ".pdf" 开头的每个 \<a> 元素| |[attribute*=value]| a[src*=”abc”]| 选择其 src 属性包含 "abc" 子串的每个 \<a> 元素| <span style="font-size: 20px;">伪元素选择器（针对 CSS 中已经定义好的伪元素使用的选择器）</span> |选择器| 例子| 描述| |:---- | :---- | :---- | |:before |p:before |在每个 \<p> 元素的内容之前插入内容（该元素为内联元素）| |:after |p:after| 在每个 \<p> 元素的内容之后插入内容| |first-line| p:first-line| 选中每个 \<p> 元素的首行| |first-letter| p:first-letter |选中每个 \<p> 元素的首字母| <span style="font-size: 20px;">带父子关系的选择器</span> |选择器| 例子 |描述| | :---- | :---- | :----| |first-child| p:first-child |指定第一个子元素的样式| |last-child |...|指定最后一个子元素的样式| |nth-child |...| 指定第 n 个子元素的样式（从 1 开始）| |nth-last-child| ...| 指定倒数第 n 个子元素的样式| |only-child |...| 指定唯一子元素的样式（该元素是唯一的子元素）| `nth-child(odd) `选择第奇数个子元素；`nth-child(even) `选择第偶数个子元素 需要注意`h2:nth-child(odd)` 并不是指 "针对 div 元素中第奇数个 h2 子元素来使用"，而是指 "当 div 元素中的第奇数个子元素如果是 h2 子元素时使用" 这样的含义可能会导致一些问题，所以有了 `nth-of-type` 和 `nth-last-of-type` 这两个选择器，在计算子元素到底是第奇数个还是第偶数个时只会针对同指定类型的子元素进行计算。 同样的，有 `only-of-type` 选择器可以设定指定类型的是唯一子元素的元素的样式。 <span style="font-size: 20px;">伪状态选择器（指定的样式只有当元素处于某种状态下时才起作用）</span> |选择器| 描述| |:----| :---- | |:hover |鼠标经过| |:active| 鼠标按下还未松开| |:target |选择当前活动的元素（一般用于指定当前页面中的链接跳转到的元素的样式）| |:focus |元素获得光标焦点时的样式，文本框控件获得焦点并进行文字输入时使用| |:enabled |元素处于可用状态时的样式| |:disabled |元素处于不可用状态时的样式| |::selection| 当元素处于选中状态时的样式，注意这个是两个冒号| |:invalid :valid | 指定当元素通过 required、pattern 等属性进行检查时不符合 / 符合元素规定格式时的样式| |:required（已指）:optional（未指）| 指定允许使用 required 属性，且已经指定了 / 未指定 required 属性的 input 元素、select 元素以及 textarea 元素的样式| |:in-range :out-of-range |需设置 min 和 max 属性，指当输入值在该范围内 / 不在该范围内时的样式| |:checked |元素处于选取状态时的样式| |:default |指定页面打开时默认处于选取状态的单选框或复选框控件的样式| css 设置链接样式下列说法正确的是（C） - a:hover 可以在 a:visited 之前生效 - a:hover 可以在 a:link 之前生效 - a:active 必须位于 a:hover 之后 - a:active 链接被点击后的样式 1. link: 链接平常的状态 2. visited: 链接被访问过之后 3. hover: 鼠标放到链接上的时候 4. active: 链接被按下的时候 正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母 LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active 因为当鼠标经过未访问的链接，会同时拥有 a:link、a:hover 两种属性，a:link 离它最近，所以它优先满足 a:link，而放弃 a:hover 的重复定义。当鼠标经过已经访问过的链接，会同时拥有 a:visited、a:hover 两种属性，a:visited 离它最近，所以它优先满足 a:visited， 而放弃 a:hover 的重复定义。 <span style="font-size: 20px;">过滤选择器</span> |选择器 |例子| 描述| |:----| :---- | :---- | |:not(selector) |:not(p)| 选择非 \<p> 元素的每个元素。 |:root |:root| 选择文档的根元素 |:empty| td:empty| 选择没有子元素的每个 \<td> 元素（包括文本节点）(一般用于指定表格项为空时的样式)| ## 优先级与权重 CSS的权重分为 4 个级别： - 内联样式（HTML 文档中的 style 属性） - ID 选择器 - 类、伪类、属性选择器 - 元素、伪元素 这 4 个级别的权重从高到低代表不同的优先级，内联样式的优先级最高，元素和伪元素的优先级最低，最终权重值根据不同的优先级加权计算。可以使用 “0, 0, 0, 0” 这样来表示一个权重，分别对应上面的 4 个级别。 **比较权重大小时，先从高优先级的权重开始比较，遇到相同值后再比较后面的优先级。** > 有些文案将这 4 个级别的权重值描述为 1000， 100， 10， 1；需要注意的是，在做权重计算时，低级别的权重不会进位成高级别的权重，如 11 个类选择器的权重并不会超过 1 个 ID 选择器 | 选择器/内联样式 | 权重说明 | | :---- | :---- | | * | 通配符和继承的属性，权重为 0, 0, 0, 0 | | ul li | 2 个元素选择器，权重为 0, 0, 0, 2 | | ul li .item | 2 个元素选择器，1 个类选择器，权重为 0, 0, 1, 2 | | ul li:hover | 2 个元素选择器，1 个伪类选择器，权重为 0, 0, 1, 2 | | #content | 1 个 ID 选择器，权重为 0, 1, 0, 0 | | body #content | 1 个 ID 选择器，1 个元素选择器，权重为 0, 1, 0, 1 | | div[id="content"] | 1 个元素选择器，1 个属性选择器，权重为 0, 0, 1, 1 | | style="" | 内联样式属性，权重为 1, 0, 0, 0 | 最后，还有一个特殊的规则就是`!important`，可以将对应的规则提升到最高的权重。 # 文字与字体 ## 文本相关属性 |属性 |描述 |值 | | --- | --- | --- | |color |设置文本颜色 |……下面都有 inherit 不写了 | |direction | 规定文本方向/书写方向 |ltr(默认:从左到右) rtl | |letter-sapcing |设置字符间距| normal length | |line-height |设置行高 |normal length % number| |text-align| 设置文本水平对齐方式 |left right center justify | |text-decoration |规定添加到文本的装饰效果 |none underline overline line-through blink | |text-indent |规定文本块首行的缩进 |length %| |text-shadow |规定添加到文本的阴影效果 | text-shadow: h-shadow v-shadow blur color | |text-transform |控制文本的大小写 |none capitalize uppercase lowercase | |white-space |规定如何处理元素中的空白以及控制换行 |normal nowrap(不换行直到遇到\<br>) pre(空白会被浏览器保留) pre-wrap | |word-spacing |设置单词间距 | normal length| |text-outline |规定文本轮廓 |text-outline: thickness（轮廓粗细） blur（模糊半径） color;| |text-overflow |规定当文本溢出包含元素时的操作| clip（修剪） ellipsis（省略号） string（使用给定的字符串）| |text-justify |text-align 设置为 "justify" 时使用的对齐方法 | text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim | | word-break | 规定自动换行的处理方法 | normal 使用浏览器默认的换行规则；break-all 允许在单词内换行；keep-all 只能在半角空格或连字符处换行。 | | word-wrap | word-wrap 属性允许长单词或 URL 地址换行到下一行。 | normal 只在允许的断字点换行（浏览器保持默认处理）；break-word 在长单词或 URL 地址内部进行换行。 | 1.设置容器宽度后结合 `word-break: break-all;` 和 `word-wrap: break-word;` 属性可以实现文字的自动换行。 2.设置单行文本溢出显示 "..." 使用 `text-overflow: ellipse` 还需要给父元素加上 `overflow: hidden` 才行，且父元素要设置宽度。 ## 字体相关属性 |属性 |说明 |值| |--- |--- | ---| |font-family |规定文本的字体系列 | ... | |font-size| 规定字体尺寸 | ... | |font-style |字体样式 |normal italic oblique| |font-weight| 字体粗细 |normal bold bolder（更粗） lighter| font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。 有两种类型的字体系列名称： • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。 • 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace" 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。 注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。 ## 使用自定义字体 现在一般使用 .woff2 格式的自定义字体，需要从网上下载 .ttf 格式然后转换为 .woff2 格式，鉴于 Web 字体一般都是有版权的，使用须谨慎。 ```css <style> @font-face { font-family: 'myFirstFont'; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style> ``` # 盒模型 标准盒子模型：box-sizing: content-box（默认）  IE盒子模型：box-sizing: border-box  区别： - 标准盒子模型 width 和 height 只包括内容 (content) 的宽和高 尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。 - IE盒子模型 width 和 height 包括内容、内边距和边框 尺寸计算公式: width = border + padding + (内容的)width，height = border + padding + (内容的)height 一般来说，使用 flex 布局的容器会设置`box-sizing: border-box` # 布局 ## postion 的属性 `static` 默认位置：在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用 Position:static 取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。 `relative` 相对定位：相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。 `absolute` 绝对定位：设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 **absolute 或者 relative 或者 fixed**，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据（这里会向上找到第一个有设置 position 为 absolute 或 relative 或 fixed 的父元素相对它定位）。注意设置 absolute 属性的元素在标准流中不占位置。 <span style="color: red">另外，设置了 position:absolute 的元素将变为块级元素</span> `fixed` 固定定位：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。 `sticky`：新增属性（兼容性低）。设置了 sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。 sticky 属性生效有以下限制： 1. 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 - 并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。 2. 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下： - 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。 - 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。 3. 达到设定的阀值。即设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。 - 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 - 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动。 比如使用 sticky 属性实现顶部导航栏固定，`position:sticky; top:0;`表示 top 值 0 为阈值，当该元素距离页面视窗顶部的距离大于 0 时为 relative 定位，小于 0 时为 fixed 定位。 [sticky 使用示例](https://www.cnblogs.com/coco1s/p/6402723.html) ## flex 布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称 "容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 "项目"。 注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex 布局的属性可以分为在容器上设置的属性和在项目上设置的属性 详细阅读：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ### 容器的属性 以下6个属性设置在容器上：`flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content` - flex-direction: 决定主轴的方向，即项目的排列方向，有 4 个可选的值 - row(默认值)：主轴为水平方向，起点在左端 - row-reverse：主轴为水平方向，起点在右端 - column：主轴为垂直方向，起点在上沿 - column-reverse：主轴为垂直方向，起点在下沿  ***** - flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。它有3种可能的取值：nowrap wrap wrap-reverse  ***** - flex-flow: flex-direction 和 flex-wrap 的简写 - justify-content: 定义了项目在主轴上的对齐方式，其有 5 种可能的取值。具体对齐方式与轴的方向有关。下面假设主轴为从左到右 - flex-start（默认值）：左对齐 - flex-end：右对齐 - center：居中 - space-between：两端对齐，项目之间的间隔相等 - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍]  ***** - align-items: 定义项目在交叉轴上如何对齐，它有 5 个可能的取值 - flex-start：交叉轴的起点对齐 - flex-end：交叉轴的终点对齐 - center：交叉轴的中点对齐 - baseline：项目的第一行文字的基线对齐 - stretch(默认值)：如果项目未设置高度或设为 auto，将占满整个容器的高度  ***** - align-content: 该属性用于定义多根轴线的对齐方式，如果只有一根轴线则该属性无效（多行才有效），其有 6 种可能的取值  ### 项目的属性 以下 6 个属性设置在项目上，限于篇幅，这里只列出便于记忆的要点 - order: 定义项目的排列顺序，默认为 0，数值越小，排列越靠前  - flex-grow: 定义项目的放大比例，默认为 0，即如果存在剩余空间也不放大；如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。如果一个项目的 flex-grow 属性为 2，其他项目为 1，则前者占据的剩余空间将比其他项多一倍。  - flex-shrink: 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小；如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。 - flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间，默认值为 auto，即项目本来的大小。它可以设为跟 width 或 height 属性一样（比如 350px），则项目将占据固定空间。 - flex: flex-grow、flex-shrink、flex-basis 的简写，默认值 0 1 auto，后两个属性可选。有两个快捷值：auto（1 1 auto）和 none（0 0 auto） - align-self: align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致。  ## column布局（多栏布局） 一般在对文本内容内部布局时才会使用 |属性 |描述| 值| | :----| :---- | :---- | |column-count| 规定元素应该被分隔的列数| number auto（由其他属性决定）| |column-fill| 规定如何填充列 |balance auto| |column-gap| 规定列之间的间隔| length normal（建议1em）| |column-rule| 设置所有column-rule-*的简写|| |column-rule-color| 规定列之前规则的颜色| color| |column-rule-style| 规定列之间规则的样式| | |column-rule-width| 规定列之间规则的宽度| length auto| |column-span| 规定元素应该横跨的列数| number all| |column-width| 规定列的宽度| length auto| |columns| column-width 和 column-count的简写|| 简写： ```css columns: column-width column-count; column-rule: column-rule-width column-rule-style column-rule-color; ``` # 变形处理及动画 ## transfrom变形处理  | 变形方法 | 描述 | | --- | --- | |translate3d(x,y,z) |3D 转换-移动| |translate(x,y) |2D 转换-移动| |translateX(x) |只用 X 轴| |translateY(y) |只用 Y 轴| |translateZ(z) |3D 转换-只用 Z 轴| | --- | --- | |scale3d(x,y,z) |3D 转换-缩放| |scale(x,y) |2D 转换-缩放| |scaleX(x) |通过设定 X 轴的值来定义缩放转换| |scaleY(y) |通过设定 Y 轴的值来定义缩放转换| |scaleZ(z) |3D 缩放-通过 Z 轴设置| | --- | --- | |rotate3d(x,y,z,angle) |3D 转换-旋转| |rotate(angle/value) |可以填值 = 缩放倍率 2D 转换-旋转| |rotateX(x) |定义沿着 X 轴的 3D 旋转| |rotateY(x) |定义沿着 Y 轴的 3D 旋转| |rotateZ(x) |定义沿着 Z 轴的 3D 旋转| | --- | --- | |skew(x-angle,y-angle) |定义沿着 X 和 Y 轴的 2D 倾斜转换| |skewX(angle) |定义沿着 X 轴的 2D 转换| |skewY(angle) |定义沿着 Y 轴的 2D 旋转| | --- | --- | |perspective(n) |为 3D 转换元素定义透视视图| |matrix(n,n,n,n,n,n)| 定义 2D 转换，使用六个值的矩阵| |matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)|定义 3D 转换，使用 16 个值 4x4| |transform-origin: |x-axis y-axis z-axis; |指定变形的基准点，不指定的话默认以元素的中心为基准点| 可以一次对元素进行多种变形处理： ```css transform: translate(100px, 100px) rotate(45deg) scale(1.5); ``` ## transition & animation 动画 <span style="font-size: 20px;">transition</span> 简写：`transition：property duration timing-function transition-delay` - property：对哪个属性进行平滑过渡，可以用 all 表示所有属性 - duration：在多久时间内完成属性值的平滑过渡 - timing-function：通过什么方法进行平滑过渡 - linear：以相同的速度开始至结束，等同于cubic-bezier(0, 0, 1, 1) - ease：慢速开始，然后变快，慢速结束 - ease-in：慢速开始的过渡效果 - ease-out：慢速结束的过渡效果 - ease-in-out：慢速开始和慢速结束的过渡效果 - cubic-bezier(n, n, n, n)：自定义过渡效果，可能的值0~1 - transition-delay：延迟时间，单位 s、ms 可以平滑过渡多个属性：`transition: background-color 1s linear, color 1s linear, width 1s linear;` <span style="font-size: 20px;">animation</span> 使用方式：在指定元素的样式中添加 animation 属性并指定动画名称和时间等 样式文件中定义对应的 @keyframes 动画名称 简写：`animation: name duration timing-function delay iteration-count direction` 也可以单独设置：`animation-name: xxx; animation-duration: xxx;` - animation-name（单独设置时的样式名称）：动画名称 - animation-duration：规定动画完成一个周期所花费的秒或毫秒，默认是 0 - animation-timing-function：规定动画的速度曲线，默认是 ease，值与 transition 相同 - animation-delay：规定动画从何时开始，默认是 0 - animation-iteration-count：规定动画的播放次数，默认是 1，infinite 表示无限 - animation-direction：规定动画是否在下一个周期逆向播放，默认是 "normal"，"alternate" 表示轮流反向播放 - animation-play-state：规定动画在运行还是暂停，可以在 JS 中使用该属性，这样能在播放过程中暂停动画；paused 规定动画已暂停，running 规定动画正在播放 - animation-fill-mode： 规定对象动画时间之外的状态，语法：`animation-fill-mode : none | forwards | backwards | both;` - none 不改变默认行为。 - forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 - backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 - both 向前和向后填充模式都被应用。 # 颜色篇 [颜色对照表](https://www.sioe.cn/yingyong/yanse-rgb-16/) 目前有 4 种设定颜色的方式： - RGB + opacity（元素透明度） - RGBA：红色值（R）、绿色值（G）、蓝色值（B）、alpha通道值（A）；RGB 值范围 0~255，alpha 通道范围 0~1 - HSL：色调（H）、饱和度（S）、亮度（L）；色调值 0 或 360 表示红色，120 表示绿色，240 表示蓝色，取值大于 360 时，实际的值等于该值除以 360 后的余数。饱和度和亮度的取值范围是 0%~100% - HSLA：HSL 加个 alpha 通道 <span style="font-size: 20px;">alpha 通道与 opacity 属性的区别</span> opacity 只能指定整个元素的透明度，而使用 alpha 通道可以单独针对元素的背景色和文字颜色等指定透明度。 <span style="font-size: 20px;">指定颜色值为 transparent</span> 如果将颜色值指定为 transparent，则会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为 0 的 alpha 通道 > 网络解释：transparent 它代表着全透明黑色，即一个类似 rgba(0,0,0,0) 这样的值。 > 例如在 css 属性中定义：background:transparent，意思就代表背景透明。 > 实际上 background 默认的颜色就是透明的属性，所以写和不写都是一样的。 > transparent 一般使用场景： > 如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的 background 设置为 transparent # 单位篇 | 单位 | 描述 | | --- | --- | | em | 相对于当前元素的 `font-size` 的计量单位。一般浏览器默认字体大小为 16px，那么 2em = 32px | | rem| 根元素（html）的 `font-size` | | vw| viewpoint width 视窗宽度； 1vw = 视窗宽度的 1% | | vh| viewpoint height 视窗高度；1vh = 视窗高度的 1% | | vmin| vw 和 vh 中较小的那个 | | vmax| vw 和 vh 中较大的那个 |