非零基础自学前端最后一遍 一 HTML+CSS 17 CSS Flex布局

小鱼儿 2024-03-22 17:14 172阅读 0赞

非零基础自学前端最后一遍

文章目录

      • 非零基础自学前端最后一遍
      • 一 HTML+CSS
      • 17 CSS Flex布局
        • 17.1 认识flex布局和flex布局的由来
          • 17.1.1 认识flexbox
          • 17.1.2 原先的布局存在的痛点
          • 17.1.3 flex布局的出现
        • 17.2 flex布局-两个重要概念
          • 17.2.1 flex布局的重要概念
        • 17.3 flex布局-布局模型-主轴和交叉轴
          • 17.3.1 flex布局的模型
          • 17.3.2 flex相关的属性
        • 17.4 flex布局-container-flex-direction
          • 17.4.1 flex-direction
        • 17.5 flex布局-container-flex-wrap-flow
          • 17.5.1 flex-wrap
          • 17.5.2 flex-flow
        • 17.6 flex布局-container-justify-content
          • 17.6.1 justify-content
        • 17.7 flex布局-container-align-items
          • 17.7.1 align-items
        • 17.8 flex布局-container-align-content
        • 17.9 flex布局-item-order
          • 17.9.1 flex-item属性 - order
        • 17.10 flex布局-item-align-self
          • 17.10.1 flex-item属性 - flex items
        • 17.11 flex布局-item-grow-shrink
          • 17.11.1 flex-item属性 - flex-grow
          • 17.11.2 flex-item属性 - flex-shrink
        • 17.12 flex布局-item-flex-basis
          • 17.12.1 flex-item属性 - flex-basis
        • 17.13 flex布局-item-flex属性
          • 17.13.1 flex-item属性 - flex属性

在这里插入图片描述

一 HTML+CSS

17 CSS Flex布局

17.1 认识flex布局和flex布局的由来
17.1.1 认识flexbox

  • Flexbox翻译为弹性盒子:

    • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
    • 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
    • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);

  • flex布局是目前web开发中使用最多的布局方案：

    • flex 布局（Flexible 布局，弹性布局）;
    • 目前特别在移动端可以说已经完全普及;
    • 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;

  • 为什么需要flex布局呢?

    • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 position。
    • 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;
17.1.2 原先的布局存在的痛点

原来的布局存在哪些痛点呢? 举例说明:

  • 比如在父内容里面垂直居中一个块内容。

    在这里插入图片描述

  • 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
  • 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
17.1.3 flex布局的出现

  • 所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了;

    • Nature and nature’s laws lay hid in night; God said “Let Newton be” and all was light.

      自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.

  • flexbox在使用时, 我们最担心的是它的兼容性问题:

    • 我们可以在caniuse上查询到具体的兼容性

在这里插入图片描述

17.2 flex布局-两个重要概念
17.2.1 flex布局的重要概念

  • 两个重要的概念：

    • 开启了 flex 布局的元素叫 flex container

      在这里插入图片描述

    • flex container 里面的直接子元素叫做 flex item

      在这里插入图片描述

  • 当flex container中的子元素变成了flex item时, 具备一下特点:

    • flex item的布局将受flex container属性的设置来进行控制和布局;
    • flex item不再严格区分块级元素和行内级元素;
    • flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

  • 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

    • flex： flex container 以 block-level 形式存在
    • inline-flex： flex container 以 inline-level 形式存在

    <!DOCTYPE html>







    Document







    1

    2

    3






渲染效果

在这里插入图片描述

17.3 flex布局-布局模型-主轴和交叉轴
17.3.1 flex布局的模型

在这里插入图片描述

17.3.2 flex相关的属性

应用在 flex container 上的 CSS 属性

  • flex-flow
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

应用在 flex items 上的 CSS 属性

  • flex-grow
  • flex-basis
  • flex-shrink
  • order
  • align-self

  • flex

    <!DOCTYPE html>







    Document







    1

    2

    3

    4

    5

    4

    5

    4

    5






渲染效果

在这里插入图片描述

17.4 flex布局-container-flex-direction
17.4.1 flex-direction

  • flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

    • flex-direction 决定了 main axis 的方向，有 4 个取值

      row（默认值）、row-reverse、column、column-reverse

在这里插入图片描述

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  18.       /* 修改主轴的方向 */
  19.       /* row-reverse: row的反转 */
  20.       /* column: 列变成主轴的方向 */
  21.       /* column-reverse: 列主轴进行反转 */
  22.       /* flex-direction: column-reverse; */
  23.     }
  25.     .item {
  27.       width: 120px;
  28.       height: 120px;
  30.       background-color: #f00;
  31.     }
  32.   </style>
  33. </head>
  35. <body>
  37.   <div class="container">
  38.     <div class="item item1">1</div>
  39.     <div class="item item2">2</div>
  40.     <div class="item item3">3</div>
  41.   </div>
  43.   <script src="./js/itemRandomColor.js"></script>
  44. </body>
  46. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random()*255}, ${
  5.       Math.random()*255}, ${
  6.       Math.random()*255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.5 flex布局-container-flex-wrap-flow
17.5.1 flex-wrap

  • flex-wrap 决定了 flex container 是单行还是多行

    • nowrap（默认）：单行
    • wrap：多行
    • wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  18.       /* nowrap: 默认值不换行 */
  19.       /* flex-wrap: wrap; */
  20.       /* flex-flow: wrap; */
  21.       flex-flow: row-reverse wrap;
  22.     }
  24.     .item {
  26.       width: 120px;
  27.       height: 120px;
  29.       background-color: #f00;
  30.     }
  31.   </style>
  32. </head>
  34. <body>
  36.   <div class="container">
  37.     <div class="item item1">1</div>
  38.     <div class="item item2">2</div>
  39.     <div class="item item3">3</div>
  40.   </div>
  42.   <script src="./js/itemRandomColor.js"></script>
  43. </body>
  45. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random()*255}, ${
  5.       Math.random()*255}, ${
  6.       Math.random()*255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

布局效果

在这里插入图片描述

17.5.2 flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

  • 顺序任意, 并且都可以省略;

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  18.       /* flex-direction: row-reverse;
  19.       flex-wrap: wrap-reverse; */
  20.       flex-flow: row-reverse wrap-reverse;
  21.     }
  23.     .item {
  25.       width: 120px;
  26.       height: 120px;
  28.       background-color: #f00;
  29.     }
  30.   </style>
  31. </head>
  33. <body>
  35.   <div class="container">
  36.     <div class="item item1">1</div>
  37.     <div class="item item2">2</div>
  38.     <div class="item item3">3</div>
  39.   </div>
  41.   <script src="./js/itemRandomColor.js"></script>
  42. </body>
  44. </html>

渲染效果

在这里插入图片描述

17.6 flex布局-container-justify-content
17.6.1 justify-content

  • justify-content 决定了 flex items 在 main axis 上的对齐方式

    • flex-start（默认值）：与 main start 对齐
    • flex-end：与 main end 对齐
    • center：居中对齐

    • space-between：

      • flex items 之间的距离相等
      • 与 main start、main end两端对齐

    • space-around：

      • flex items 之间的距离相等
      • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

    • space-evenly：

      • flex items 之间的距离相等
      • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  15.       /* padding: 0 10px; */
  16.       box-sizing: border-box;
  18.       display: flex;
  20.       flex-wrap: wrap;
  22.       /* 切换justify-content */
  23.       /* flex-end: 让元素和main end对齐 */
  24.       /* center: 居中对齐 */
  25.       /* space-between: 两端个放一个元素, 其他多余的元素一定要空间等分 */
  26.       /* space-evenly: 两端也有间距, 并且所有的空间进行等分 */
  27.       /* space-around: 两端也有间距, 两端的间距是items之间的间距一半 */
  28.       justify-content: space-between;
  29.     }
  31.     .item {
  33.       width: 120px;
  34.       height: 120px;
  36.       background-color: #f00;
  38.       /* margin-left: 20px; */
  39.       /* margin: 0 20px; */
  40.     }
  41.   </style>
  42. </head>
  44. <body>
  46.   <div class="container">
  47.     <div class="item item1">1</div>
  48.     <div class="item item2">2</div>
  49.     <div class="item item3">3</div>
  50.     <div class="item item4">4</div>
  51.   </div>
  53.   <script src="./js/itemRandomColor.js"></script>
  54. </body>
  56. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.7 flex布局-container-align-items
17.7.1 align-items

  • align-items 决定了 flex items 在 cross axis 上的对齐方式

    • normal：在弹性布局中，效果和stretch一样
    • stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container
    • flex-start：与 cross start 对齐
    • flex-end：与 cross end 对齐
    • center：居中对齐  baseline：与基准线对齐

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  15.       /* padding: 0 10px; */
  16.       box-sizing: border-box;
  18.       display: flex;
  20.       align-items: stretch;
  21.     }
  23.     .item {
  25.       width: 120px;
  26.       /* height: 120px; */
  27.     }
  29.     .item1 {
  31.       height: 80px;
  32.       font-size: 30px;
  33.     }
  35.     .item2 {
  37.       height: 150px;
  38.       font-size: 40px;
  39.     }
  41.     .item3 {
  43.       height: 60px;
  44.       font-size: 12px;
  45.     }
  46.   </style>
  47. </head>
  49. <body>
  51.   <div class="container">
  52.     <div class="item item1">1x</div>
  53.     <div class="item item2">2x</div>
  54.     <div class="item item3">3x</div>
  55.     <div class="item item4">4x</div>
  56.   </div>
  58.   <script src="./js/itemRandomColor.js"></script>
  59. </body>
  61. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.8 flex布局-container-align-content

  • align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

    • stretch（默认值）：与 align-items 的 stretch 类似
    • flex-start：与 cross start 对齐
    • flex-end：与 cross end 对齐
    • center：居中对齐

    • space-between：

      • flex items 之间的距离相等
      • 与 cross start、cross end两端对齐

    • space-around：

      • flex items 之间的距离相等
      • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

    • space-evenly：

      • flex items 之间的距离相等
      • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  17.       flex-wrap: wrap;
  19.       justify-content: space-between;
  20.       align-content: center;
  21.     }
  23.     .item {
  25.       width: 120px;
  26.       height: 120px;
  27.       /* margin-bottom: 10px; */
  28.     }
  29.   </style>
  30. </head>
  32. <body>
  34.   <div class="container">
  35.     <div class="item item1">1x</div>
  36.     <div class="item item2">2x</div>
  37.     <div class="item item3">3x</div>
  38.     <div class="item item4">4x</div>
  39.     <div class="item item2">2x</div>
  40.     <div class="item item3">3x</div>
  41.     <div class="item item4">4x</div>
  42.     <div class="item item2">2x</div>
  43.     <div class="item item3">3x</div>
  44.     <div class="item item4">4x</div>
  45.   </div>
  47.   <script src="./js/itemRandomColor.js"></script>
  48. </body>
  50. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.9 flex布局-item-order
17.9.1 flex-item属性 - order

order 决定了 flex items 的排布顺序

  • 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
  • 默认值是 0

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  17.     }
  19.     .item {
  21.       width: 120px;
  22.       height: 120px;
  23.     }
  25.     .item1 {
  27.       order: 5;
  28.     }
  30.     .item2 {
  32.       order: 3;
  33.     }
  35.     .item3 {
  37.       order: 9;
  38.     }
  39.   </style>
  40. </head>
  42. <body>
  44.   <div class="container">
  45.     <div class="item item1">1</div>
  46.     <div class="item item2">2</div>
  47.     <div class="item item3">3</div>
  48.   </div>
  50.   <script src="./js/itemRandomColor.js"></script>
  51. </body>
  53. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.10 flex布局-item-align-self
17.10.1 flex-item属性 - flex items

  • flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

    • auto（默认值）：遵从 flex container 的 align-items 设置
    • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  12.       width: 500px;
  13.       height: 500px;
  14.       background-color: orange;
  16.       display: flex;
  18.       align-items: center;
  19.     }
  21.     .item {
  23.       width: 120px;
  24.       height: 120px;
  25.     }
  27.     .item1 {
  29.       height: 90px;
  30.     }
  32.     .item2 {
  34.       height: 150px;
  36.       align-self: flex-start;
  37.     }
  39.     .item3 {
  41.       height: 120px;
  42.     }
  43.   </style>
  44. </head>
  46. <body>
  48.   <div class="container">
  49.     <div class="item item1">1</div>
  50.     <div class="item item2">2</div>
  51.     <div class="item item3">3</div>
  52.   </div>
  54.   <script src="./js/itemRandomColor.js"></script>
  55. </body>
  57. </html>

itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.11 flex布局-item-grow-shrink
17.11.1 flex-item属性 - flex-grow

  • flex-grow 决定了 flex items 如何扩展(拉伸/成长)

    • 可以设置任意非负数字（正小数、正整数、0），默认值是 0
    • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

  • 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为

    • flex container 的剩余 size * flex-grow / sum

      在这里插入图片描述

  • flex items 扩展后的最终 size 不能超过 max-width\max-height

    <!DOCTYPE html>







    Document






    1

    2

    3






itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.11.2 flex-item属性 - flex-shrink

  • flex-shrink 决定了 flex items 如何收缩(缩小)

    • 可以设置任意非负数字（正小数、正整数、0），默认值是 1
    • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

  • 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为

    • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

  • flex items 收缩后的最终 size 不能小于 min-width\min-height

    <!DOCTYPE html>







    Document






    1

    2

    3

    4

    5






渲染效果

在这里插入图片描述

17.12 flex布局-item-flex-basis
17.12.1 flex-item属性 - flex-basis

  • flex-basis 用来设置 flex items 在 main axis 方向上的 base size

    • auto（默认值）、具体的宽度数值（100px）

  • 决定 flex items 最终 base size 的因素，从优先级高到低

    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的 size

    <!DOCTYPE html>







    Document






    1

    2我是coderwhy_why_hahahaha

    3






itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

17.13 flex布局-item-flex属性
17.13.1 flex-item属性 - flex属性

  • flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

    在这里插入图片描述

  • 单值语法: 值必须为以下其中之一:

    • 一个无单位数(): 它会被当作的值。
    • 一个有效的宽度(width)值: 它会被当作 的值。
    • 关键字none，auto或initial.

  • 双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。

    • 第二个值必须为以下之一：

      • 一个无单位数：它会被当作 的值。
      • 一个有效的宽度值: 它会被当作 的值。

  • 三值语法:

    • 第一个值必须为一个无单位数，并且它会被当作 的值。
    • 第二个值必须为一个无单位数，并且它会被当作 的值。
    • 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

    <!DOCTYPE html>







    Document






    1

    2我是coderwhy_why_hahahaha

    3






itemRandomColor.js

  1. function getRandomColor() {
  3.   return `rgb(${
  4.       Math.random() * 255}, ${
  5.       Math.random() * 255}, ${
  6.       Math.random() * 255})`
  7. }
  9. const itemEls = document.querySelectorAll(".item")
  10. for (const item of itemEls) {
  12.   item.style.backgroundColor = getRandomColor()
  13. }

渲染效果

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读