winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

方法一：父元素： display: flex; + 子元素：margin: auto;

  1. 适用于有宽高的盒子

    1
    2
    3
    <div class="big-box">
        <div class="inner-box"></div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .big-box {
        width: 400px;
        height: 400px;
        background-color: darkseagreen;
        display: flex;
    }

    .inner-box {
        width: 200px;
        height: 200px;
        background-color: rgb(243, 236, 132);
        margin: auto;
    }

垂直水平居中

  1. 适用于文字内容所在的元素没有宽高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .inner-box {
        width: 200px;
        height: 200px;
        background-color: rgb(243, 236, 132);
        margin: auto;
        display: flex;
    }
    p {
        color: #333;
        margin: auto;
    }

垂直水平居中

如果给文字内容所在p元素设置宽高，使用这个方法，文字就不居中了

1
2
3
4
5
6
7
8
9
10
11
12
13
.inner-box {
    width: 200px;
    height: 200px;
    background-color: rgb(243, 236, 132);
    margin: auto;
    display: flex;
}
p {
    color: #333;
    margin: auto;
    width: 200px;
    height: 100px;
}

inner-box 有宽高,显示如下图:

垂直水平居中

如果给文字内容所在p元素设置宽高，使用这个方法，文字就不居中了

1
2
3
4
5
6
7
8
9
10
11
12
13
.inner-box {
    /* width: 200px;
    height: 200px; */
    background-color: rgb(243, 236, 132);
    margin: auto;
    display: flex;
}
 p {
    color: #333;
    margin: auto;
    width: 200px;
    height: 200px;
}

inner-box 没有宽高,显示如下图:

垂直水平居中

方法二：使用Flexbox（弹性布局）

1
2
3
4
5
<div class="big-box">
    <div class="inner-box">
        你好
    </div>
</div>
1
2
3
4
5
6
7
.container {
    height: 400px;
    background-color: #bfc;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

垂直水平居中

方法三：父元素：text-align: center;和line-height: *;

适用于内联元素，如文本或行内块元素。(文字内容所在盒子没有设置宽高的情况下。)

1
2
3
4
5
<div class="big-box">
    <div class="inner-box">
        你好
    </div>
</div>
1
2
3
4
5
6
7
.big-box {
    width: 400px;
    height: 400px;
    background-color: #bfc;
    text-align: center;
    line-height: 400px;
}

如果文字内容所在盒子有宽高，则不水平居中对齐。

1
2
3
4
.inner-box {
    width: 100px;
    height: 100px;
}

垂直水平居中

方法四：使用Grid（网格布局）

1
2
3
4
5
6
7
.big-box  {
    display: grid;
    place-items: center; /* 同时实现水平和垂直居中 */
    width: 400px;
    height: 400px;
    background-color: #bfc;
}

方法五：使用绝对定位

1
2
3
4
5
6
7
8
9
10
11
12
13
.big-box  {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: #bfc;
}

.inner-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 负的50%来实现水平和垂直居中 */
}

方法六：使用表格布局

1
2
3
4
5
6
7
8
9
10
11
12
.big-box {
    display: table;
    width: 400px;
    height: 400px;
    background-color: #bfc;
}

.inner-box {
    display: table-cell;
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
}

发表于 更新于 分类于

认识 Node.js | Node.js学习指南 (poetries.top)

认识 Node.js

  • Node 是一个服务器端 JavaScript 解释器
  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
  • Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效
  • Node.js 的包管理器 npm，是全球最大的开源库生态系统
  • Node.js 是一门动态语言，运行在服务端的 Javascript

NVM

Node.js Version Manager（简称 NVM）是一个用于管理 Node.js 版本的命令行工具。Node.js 是一个流行的服务器端 JavaScript 运行时环境，用于构建 Web 应用程序和服务。NVM 允许您在同一台计算机上安装多个 Node.js 版本，并轻松在它们之间切换，以确保您的应用程序与特定的 Node.js 版本兼容。

  • nvm install <version>：安装指定版本的 Node.js。
  • nvm use <version>：切换到指定版本的 Node.js。
  • nvm ls：列出已安装的 Node.js 版本。
  • nvm alias <name> <version>：创建 Node.js 版本别名。

安装

使用git bash工具

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash

这些命令可以在 macOS 和 Linux 上使用。请注意，NVM 不支持 Windows，但您可以使用类似的工具，如 nvm-windows 或 nvmw。

nvm-windows 的安装和使用:

  1. 下载 nvm-setup.zip 安装文件。您可以在 nvm-windows GitHub Releases 页面 下载最新版本的 nvm-setup.zip。

  2. 解压缩 nvm-setup.zip 文件，并运行 nvm-setup.exe 安装程序。按照安装程序的指示进行安装。

  3. 安装完成后，打开一个新的命令提示符窗口（cmd.exe）或 PowerShell 窗口。

  4. 使用以下命令来查看所有可用的 Node.js 版本并安装其中一个：

    • 列出可用版本：

      1
      2
      bashCopy code
      nvm list available

    • 安装特定版本，例如 14.17.5：

      1
      2
      bashCopy code
      nvm install 14.17.5

  5. 使用以下命令来选择已安装的 Node.js 版本：

    1
    2
    bashCopy code
    nvm use 14.17.5

    这将设置当前的 Node.js 版本为 14.17.5。

  6. 验证 Node.js 版本是否正确切换：

    1
    2
    bashCopy code
    node -v

  7. 您还可以使用其他 nvm-windows 命令来管理 Node.js 版本，如 nvm list、nvm uninstall 等。