为什么要有版本控制系统

在开发过程中，经常需要对一个文件进行修改甚至删除，但是我们又希望能够保存这个文件的历史记录，如果通过备份，那么管理起来会非常的复杂

什么是版本控制系统

版本控制系统（Version Control System）:是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。

版本控制系统不仅可以应用于软件源代码的文本文件，而且可以对任何类型的文件进行版本控制。

版本控制系统的分类

参考文章：关于版本控制的介绍

本地版本控制系统

本地版本控制系统就是在一台机器上，记录版本的不同变化，保证内容不会丢失

1. 如果多人开发，每个人都在不同的系统和电脑上开发，没办法协同工作。

集中式版本控制系統

svn 是集中式的版本控制系统，集中式版本控制系统都有一个单一的集中管理的服务器（中央服务器），保存所有文件的修订版本，而协同工作的人们都通过客户端连到这台服务器，取出最新的文件或者提交更新。

1. 需要一个中央服务器来管理代码的的版本和备份
2. 所有的用户电脑都是从中央服务器获取代码或者是将本地的代码提交到中央服务器
3. 依赖与网络环境，如果连不上中央服务器，就无法提交和获取代码。

分布式版本控制系统

git 是分布式的版本控制系统。分布式版本控制系统的客户端并不只提取最新版本的文件快照，而是把代码仓库完整地镜像下来。这么一来，任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来的本地仓库恢复。因为每一次的提取操作，实际上都是一次对代码仓库的完整备份

1. 需要一台服务器作为代码仓库
2. 每个用户电脑都是一个服务器（代码仓库），并且和代码仓库是镜像的，用户修改和获取代码都是提交到自己的服务器当中。
3. 不需要网络就可以进行工作。
4. 当连接网络时，用户可以选择将自己的服务器与代码仓库进行同步。

Git

git 官方中文文档

Git 核心概念

• **WorkSpace**：
  工作区，即从仓库中 checkout 出来的，需要通过 Git 进行版本控制的目录和文件，可以简单的理解为在电脑里真实看到的文件

• **Stage(Index)**：
  暂存区，或者叫做待提交更新区；在提交进入 Repository 之前，可以把所有的更新放在暂存区, 用 git add 的文件都在这里

• **Repository(Remote/Local)**：
  仓库，一个存放在远端/本地的版本库，用 git commit 提交的文件就到 Local Repository,用 git push 提交的文件就到 Remote Repository

• **.git**：存放 Git 管理信息的目录，初始化仓库的时候会自动创建

Git 初始设置

设置用户名和邮箱

# 用户名使用英文
# --global 全局设置
git config --global user.name 'your_name'
git config --global user.email 'your_email@example.com'

# 查看账号信息
git config --list

# 重置信息
git config --unset -- user.name

全局设置会在 ~/.gitconfig 中以如下形式输出设置文件，可以直接编辑这个文件来修改设置

[user]
name = your_name
email = your_email@example.com

每个仓库的 Git 配置文件都放在 .git/config 文件中，可以直接修改此文件
$ cat .git/config 查看配置文件

# 解决中文变成数字加百分号，也可以在设置中将编码修改为 utf-8
git config --global core.quotepath false

设置 SSH Key

GitHub 上连接已有仓库时的认证，是通过使用了 SSH 的公开密钥认证方式进行的。现在我们来创建公开密钥认证所需的 SSH Key，并将其添加至 GitHub

运行下面的命令

ssh-keygen -t rsa -C "your_email@example.com"
Generating public/private rsa key pair.
Enter file in which to save the key(/Users/your_user_directory/.ssh/id_rsa):按回车键
Enter passphrase (empty for no passphrase):输入密码
Enter same passphrase again:再次输入密码

输入密码后会出现以下结果

Your identification has been saved in /Users/your_user_directory/.ssh/id_rsa.
Your public key has been saved in /Users/your_user_directory/.ssh/id_rsa.pub.
The key fingerprint is:SHA256:hbn1zPihlVDe/Y2FvzzZU8l+AOSlVRlaOmro/nTQDGg cui3155@gmail.com(fingerprint值+your_email@example.com)
The key's randomart image is:
+---[RSA 2048]----+
|            o o++|
...
|        . . .   +|
|         ...     |
+----[SHA256]-----+

id_rsa 文件是私有密钥，id_rsa.pub 是公开密钥

添加公开密钥

在 GitHub 中添加公开密钥，今后就可以用私有密钥进行认证了
点击右上角的账户设定按钮（Account Settings），选择 SSH Keys 菜单。点击 AddSSH Key 之后，在 Title 中输入适当的密钥名称。Key 部分请粘贴 id_rsa.pub 文件里的内容

id_rsa.pub 的内容可以用如下方法查看

cat ~/.ssh/id_rsa.pub
ssh-rsa公开密钥的内容your_email@example.com

完成以上设置后，就可以用手中的私人密钥与 GitHub 进行认证和通信了

ssh -T git@github.com
The authenticity of host 'github.com (192.30.255.113)' can't be established.
RSA key fingerprint is (fingerprint值).
Are you sure you want to continue connecting (yes/no)?输入yes
Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.
Enter passphrase for key '/c/Users/C.DESKTOP-3S4APJ4/.ssh/id_rsa':

出现如下结果即为成功

Hi cuilongjin! You've successfully authenticated, but GitHub does not provide shell access.

提高命令输出的可读性

将 color.ui 设置为 auto 可以让命令的输出拥有更高的可读性

git config --global color.ui true

~/.gitconfig 中会增加下面一行

[color]
ui = true

这样一来，各种命令的输出就会变得更容易分辨。

文件名大小写问题

git 默认对文件名大小写不敏感

# 设置 git 大小写敏感
git config core.ignorecase false

# 或者先删除文件在添加进去

设置头像

通过 Gravatar 服务

配置别名

# 配置 st 别名表示 status
git config --global alias.st status

git config --global alias.co checkout
git config --global alias.ci commit
git config --global alias.br branch
git config --global alias.unstage 'reset HEAD'
git config --global alias.last 'log -1'

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

搭建 Git 服务器

搭建 Git 服务器

配置多用户

根据不同邮箱生成对应的私钥公钥

ssh-keygen -t rsa -C email

将公钥上传到对应的用户账号中

在 .ssh 目录创建 config 文件，配置私钥对应的服务器，每个账号单独配置一个 Host，每个 Host 要取一个别名，每个 Host 主要配置 HostName 和 IdentityFile 两个属性即可

# 配置用户1
Host github
HostName github.com
IdentityFile ~/.ssh/id_rsa_github
User cuilongjin

# 配置用户2
Host gitlab
HostName git.gitlab.net
IdentityFile ~/.ssh/id_rsa_gitlab
User cuilongjin

Host 的名字可以任意，不过这个会影响 git 相关命令，例如：

Host mygithub 这样定义的话，命令如下

git clone git@mygithub:cuilongjin/cuilongjin.git

即 git@ 后面紧跟的名字改为 mygithub

执行 ssh -T git@github、ssh -T git@gitlab 测试是否成功

配置局部 git 用户名和邮箱，如果没有局部配置，默认用全局配置

git config user.name "Your name"
git config user.email "your_email@gmail.com"

或者直接找到 .git/config 文件，添加

[user]
name = Your name
email = your_email@gmail.com

Git 基本操作

git init

mkdir project
cd project
git init

如果初始化成功，执行了 git init 命令的目录下就会生成 .git 目录。这个 .git 目录里存储着管理当前目录内容所需的仓库数据

mkdir project 命令创建 project 空文件夹

• pwd 命令用于显示当前目录

git add

# 将指定文件夹添加到暂存区（目录中的所有文件，包括新增/修改/删除的文件）--not-all 忽略删除的
git add 目录名

# 将 指定文件 添加到暂存区 （文件可以是新增/修改/删除的）
git add README.md

# 将当前目录下所有的js文件添加到暂存区（文件可以是新增/修改的，不包括删除的）
git add *.js

# 添加当前目录及子目录下件 （文件可以是新增/修改/删除的）
git add .

# 添加当前仓库下所有的文件 （文件可以是新增/修改/删除的）
git add -A
git add --all

git commit

# 将文件从暂存区提交到仓库
git commit -m '提交说明'

# 如果是一个已经暂存过的文件，可以快速提交，如果是未追踪的文件，那么命令将不生效。
git commit -a -m '提交说明'

# 修改最近的一次提交说明， 如果提交说明不小心输错了，可以使用这个命令
git commit --amend -m '提交说明'

-m 参数后的 'First commit' 称作提交信息，是对这个提交的概述,如果想要记述得更加详细，请不加 -m ，直接执行 git commit 命令，执行后编辑器就会启动。
在编辑器中记述提交信息的格式如下:
​ 第一行：用一行文字简述提交的更改内容
​ 第二行：空行
​ 第三行以后：记述更改的原因和详细内容

git status

# 建立 README.md 文件作为管理对象
touch README.md
git status

# 简化日志输出格式
git stauts -s (short)

git status 命令可以让我们时刻掌握仓库当前的状态，但不能看到具体修改了什么内容，需要用 git diff 这个命令来查看具体修改内容。

git diff

# 查看当前工作树和最新add之间（暂存区）的差别（difference）
git diff
# 如果尚未用 `git add` 命令向暂存区添加任何东西，则程序只会显示工作树与最新提交状态之间的差别
# “+”号标出的是新添加的行，被删除的行则用“-”号标出

#查看README.md文件的修改
git diff -- README.md

# 查看工作树和最新提交的差别
git diff HEAD

# 查看暂存区与仓库区的不同
git diff --cached

# 查看两个版本之间的不同
git diff c265262 de4845b

HEAD 是指向当前分支中最新一次提交的指针

git log

# 显示当前版本之前的提交信息
git log
commit 9f129bae19b2c82fb4e98cde5890e52a6c546922
Author: cuilongjin <cuilongjin@gmail.com>
Date: Sun Oct 8 22:08:39 2017 +0900
    First commit

# 只显示提交信息的第一行
git log --pretty=oneline # 完整显示版本号
git log --oneline  # 只显示前7位版本号

# 显示指定目录、文件的日志
git log 目录名或文件名

# 显示文件的改动（q键退出命令）
git log -p 文件名

# 显示所有曾经提交的版本（包括被删除的）
git reflog

# 图表形式显示
git log --graph --pretty='%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an %ae>%Creset'

git reset

git reset -h		'查看帮助'
--mixed				'reset HEAD and index'(默认)
--soft				'reset only HEAD'
--hard  			'reset HEAD, index and working tree'
--merge 			'reset HEAD, index and working tree'
--keep 				'reset HEAD but keep local changes'

1. HEAD 表示当前版本，上一个版本就是 HEAD^ ，上上一个版本就是 HEAD^^ ，当然往上 100 个版本写 100 个^比较容易数不过来，所以写成 HEAD~100
2. 使用 commit_id 回退 , git reflog 用来记录你的每一次命令和 commit_id

git reset --soft HEAD^
git reset --hard commit_id
git reset HEAD [file]

git checkout –file

git checkout -- README.md

把 README.md 文件在 工作区的修改全部撤销 ，用版本库里的版本替换工作区的版本

这里有两种情况：

1. 一种是 README.md 自修改后还没有被放到暂存区，现在，撤销修改就回到和版本库一模一样的状态

2. 一种是 README.md 已经添加到暂存区后，又作了修改，现在撤销修改就回到添加到暂存区后的状态

总之，就是让这个文件回到最近一次 git commit 或 git add 时的状态，可用于撤销文件修改或恢复误删文件

git remote

git remote add origin git@github.com:cuilongjin/git_test.git

添加后，远程库的名字就是 origin，这是 Git 默认的叫法，也可以改成别的，但是 origin 这个名字一看就知道是远程库

# 查看远程库的信息
git remote -v
origin  git@github.com:cuilongjin/git_test.git (fetch)
origin  git@github.com:cuilongjin/git_test.git (push)

# 查看指定远程库的详细信息
git remote show <远程库>

上面显示了可以抓取和推送的 origin 的地址。如果没有推送权限，就看不到 push 的地址

# 删除已有的 GitHub 远程库
git remote rm origin

# 修改远程库名称
git remote rename <原远程库名> <新远程库名>

git pull

# 获取远程仓库的更新，并且与本地的分支进行合并
git pull <远程仓库名> <远程分支名>:<本地分支名>

# 如果远程分支是与当前分支合并，则冒号后面的部分可以省略
git pull origin next 等同于 git fetch origin && git merge origin/next

# 远程主机删除了某个分支，默认情况下，git pull 不会在拉取远程分支的时候，删除对应的本地分支
# 加上参数 -p 就会在本地删除远程已经删除的分支
$ git pull -p
# 等同于下面的命令
$ git fetch --prune origin
$ git fetch -p

# 合并 pull 两个不同的项目出现 fatal: refusing to merge unrelated histories
git pull origin master ----allow-unrelated-histories

git push

git push <远程仓库名> <本地分支名>:<远程分支名>

# 第一次推送分支时，加上 -u 参数，git 会把本地分支和远程分支关联起来，在以后的推送或者拉取时就可以简化命令
git push -u origin master

# 如果没有本地分支，表示删除远程分支
git push origin :master
# 等同于
$ git push origin --delete master

# 以强制覆盖的方式推送修改后的 repo （重新上传 repo）（不指定分支即所有分支）
git push origin --force --all

remote: error: GH007: Your push would publish a private email address.
解决方法——http://github.com/settings/emails 把 Keep my email address private 这一项去掉勾选即可。

如果推送失败，则因为远程分支比你的本地更新，需要先用 git pull 拉取远程的新提交

git clone

git clone git@github.com:cuilongjin/仓库名.git [指定文件夹]

# 默认远程主机为 origin ， -o 指定主机名
git clone --o origin1 git@github.com:cuilongjin/仓库名.git

Git 支持多种协议，包括 https，但通过 ssh 支持的原生 git 协议速度最快

从远程库 clone 时，默认情况下，只能看到本地的 master 分支
要在 dev 分支上开发，就必须创建远程 origin 的 dev 分支到本地，于是用这个命令创建本地 dev 分支

git checkout -b dev origin/dev

# 指定本地 dev 分支与远程 origin/dev 分支的链接
git branch --set-upstream dev origin/dev

克隆指定分支

# git clone -b|--branch 分支名或tag名 仓库地址

git fetch

# 将某个远程仓库的更新，全部取回本地。默认取回所有分支（branch）的更新
git fetch <远程仓库>

# 取回特定分支的更新
git fetch <远程仓库> <分支名>

git fetch 和 git pull 区别

• git pull 获取远程仓库的更新，并且与本地的分支进行合并

• git fetch 所取回的更新，在本地主机上要用 “远程仓库/分支名” 的形式读取，即不会与本地分支合并

git 忽视文件

在仓库中，有些文件是不想被 git 管理的，比如数据的配置密码、写代码的一些思路等。git 可以通过配置从而达到忽视掉一些文件，这样这些文件就可以不用提交了

忽略文件的原则是：

• 忽略操作系统自动生成的文件，比如缩略图等
• 忽略编译生成的中间文件、可执行文件等，也就是如果一个文件是通过另一个文件自动生成的，那自动生成的文件就没必要放进版本库，比如 Java 编译产生的 .class 文件
• 忽略你自己的带有敏感信息的配置文件，比如存放口令的配置文件

在仓库的根目录创建一个 .gitignore 的文件，文件名是固定的

将不需要被 git 管理的文件路径添加到 .gitignore 中，把 .gitignore 也提交到 Git，Git 就会自动忽略这些文件

# 忽视 index.txt 文件
index.txt

# 忽视 .gitignore 文件
.gitignore

# 忽视 css 下的 index.css 文件
css/index.css

# 忽视 css 下的所有的 css 文件
css/*.css

# 忽视 css 下的所有文件
css/*.*

# 忽视 css 文件夹
css

GitHub 已经为我们准备了各种配置文件 https://github.com/github/gitignore

强制添加被 .gitignore 忽略的文件

# 强制添加被.gitignore忽略的文件
git add -f <file>

# 检查哪个规则忽略了此文件，以便修订规则
git check-ignore -v <file>
.gitignore:x:xxx.xx    xxxxxx

git branch

在 git 中，分支实质上仅仅是一个指针，每次代码提交后，这个分支指针就会向后移动，保证一直指向最后一次提交的的版本。git 中使用 HEAD 指向当前分支

git branch
* master

-r 参数查看远程分支
-a 查看所有分支(远程分支会用红色表示出来)

*（星号）表示当前所在的分支

• git checkout -b 创建、切换分支

# 以 branch 为基础创建名为 feature-A 的分支
git checkout -b feature-A <branch>

连续执行下面两条命令也能收到同样效果

# 创建 feature-A 分支
git branch feature-A

# 将当前分支切换为 feature-A 分支
git checkout feature-A

# 切换回上一个分支
git checkout -

• git branch -d 删除分支

# 删除本地 feature-A 分支
git branch -d feature-A

# 强行删除本地 feature-A 分支
git branch -D feature-A

# 删除远程 feature-A 分支
git push origin :feature-A
或 git push origin --delete feature-A

• git branch -m 重命名分支

# 重命名本地分支
git branch -m old_branch new_branch

# 重命名远程分支
# 重命名本地分支 -> 删除远程分支 -> 推送到远程分支

git merge

合并分支

# 将 feature-A 合并到 master 上
# 首先切换到 master 分支，然后执行
git merge [--squash] [--no-ff] -m "描述" feature-A
--squash # 只是将<branch>中的修改内容迁移过来，而不保留其中的commit历史
--no-ff # 创建合并提交，为了在历史记录中明确记录下本次分支合并

git stash

# 把当前工作现场“储藏”起来
git stash

# 查看存储的工作现场
git stash list

恢复工作现场

# 恢复工作现场，stash 内容并不删除
git stash apply

# 删除 stash 内容
git stash drop

# 恢复的同时把 stash 内容也删了
git stash pop

恢复指定的 stash，用命令：git stash apply stash@{0}

廖雪峰 Git 教程创建与合并分支

廖雪峰 Git 教程分支管理策略

廖雪峰 Git 教程 Bug 分支

git tag

• 创建标签

# 首先切换到需要打标签的分支上
# 默认标签是打在最新提交的 commit 上的
git tag v1.0

# 对指定某一次提交打标签
git tag v1.0 <commit id>

# 创建带有说明的标签，用 -a 指定标签名，-m 指定说明文字
git tag -a v1.0 -m "version1.0 released" <commit id>

# 通过 -s 用私钥签名一个标签(需配置gpg密钥对)
git tag -s v1.0 -m "signed version1.0 released" <commit id>

• 查看标签

# 查看所有标签
git tag
v1.0

# 查看所有标签信息
git show

# 查看 v1.0 标签信息
git show v1.0
commit id:xxx
Author:xxx
Date:xxx

• 推送标签到远程

# 推送 v1.0 标签到远程
git push origin v1.0

# 推送全部尚未推送的本地标签到远程
git push origin --tags

• 删除标签

# 删除本地标签 v1.0
git tag -d v1.0
# 删除远程标签 v1.0
git push origin :refs/tags/v1.0
或 git push origin --delete tag v1.0

git 仓库分离

将一个 git 仓库里的一部分文件转出作为一个独立的仓库并保留提交记录 commit log

# 这就是那个大仓库 big-project
git clone git@github.com:**/big-project.git
cd big-project
# 把所有 `source/page` 目录下的相关提交整理为一个新的分支 page
git subtree split -P source/page -b page
# 另建一个新目录并初始化为 git 仓库
mkdir ../page
cd ../page
git init
# 拉取旧仓库的 page 分支到当前的 master 分支
git pull ../big-project page

快速克隆大项目

克隆单个分支

git clone --branch <branch_name> <remote-address>

只克隆最新的提交记录

git clone <remote-address> --depth 1

– depth 代表克隆的深度，–depth 1 代表只克隆最新一次提交记录以及这次提交之后的最新内容，不克隆历史提交，所造成的影响就是不能查看历史提交记录

克隆单个分支的最新一次提交

git clone --branch <branch_name> <remote-address> --depth 1

git 修改提交历史

修改最后一条 commit

git commit --amend

修改多条 commit

git rebase -i HEAD~3 修改最近三次提交
git rebase -i --root 修改所有提交

git rebase -i  [startpoint]  [endpoint] 指定了一个编辑区间（不包含[startpoint]），如果不指定[endpoint]，则该区间的终点默认是当前分支 HEAD 所指向的 commit

# edit 模式下
git commit --amend --author="author <email>" # 修改提交人信息
git commit --amend  --date="commit_time" # 修改时间 时间格式 Sat, 24 Dec 2016 18:12:09 +0800

Commands

p, pick = use commit: 直接使用 commit 不做任何修改，其中 p 是 pick 的缩写，以下雷同

r, reword = use commit, but edit the commit message: 使用 commit，修改 commit 注释

e, edit = use commit, but stop for amending :使用 commit，但是遇到此命令时会停止合并，可以修改提交信息

s, squash = use commit, but meld into previous commit: 使用 commit，但是会合并到前一个 commit 中，默认保留所有的 commit 注释，并变为可以修改状态

f, fixup = like “squash”, but discard this commit’s log message：和 squash 类似，但是会抛弃 commit 的 log 信息

x, exec = run command (the rest of the line) using shell：使用 shell 运行命令

d, drop = remove commit：丢弃 commit，（并删除该提交所做的修改）

https://www.jianshu.com/p/67f20d19605a

git-bisect

git 有一个以二分法帮助定位问题的命令——bisect。

# 开始二分查找问题
git bisect start
# 标记当前有问题
git bisect bad
# 标记哪个 commit 或 tag 时是没问题的
git bisect good v1.0.0

# 此时 git 会 checkout 两个点之间的某个 commit，
# 如果此时还是有问题：
git bisect bad
# 如果此时没有问题：
git bisect good
# 接着 git 会 checkout 下一个「有问题」和「没问题」之间的 commit

# 直到定位到问题，git 会提示：xxxxxxx is first bad commit

参考：https://git-scm.com/book/zh/v2/Git-工具-使用-Git-调试

git filter-branch

彻底删除不需要的文件

# 删除 ./node_modules 目录
git filter-branch -f --prune-empty --index-filter "git rm --cached --ignore-unmatch -fr ./node_modules" -- --all

修改提交用户名

git filter-branch -f --env-filter "GIT_AUTHOR_NAME=your new author name" -- --all

修改提交邮箱

git filter-branch -f --env-filter "GIT_AUTHOR_EMAIL=your new author email" -- --all

other

git add .的时候遇到warning: LF will be replaced by CRLF in ……`

git config core.autocrlf
git config --global core.autocrlf false

# true：添加文件到git仓库时，git将其视为文本文件。他将把crlf变成lf
# false：line-endings将不做转换操作。文本文件保持原来的样子
# input：把crlf转成lf，当有人Check代码时还是lf方式。因此在window操作系统下，不要使用这个设置

# CRLF (carriagereturnlinefeed)：表示句尾使用回车换行两个字符(即Windows编程时使用"\r\n"换行)
# LF(line feed)：表示句尾只使用换行(Unix Style)
# CR：表示只使用回车

Git 永久删除文件(包括历史记录)

https://help.github.com/articles/removing-sensitive-data-from-a-repository/

# 在仓库的根目录执行
git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch 文件路径' --prune-empty --tag-name-filter cat -- --all
# 文件路径相对于git仓库根目录
# 删除文件夹 添加 -r 命令

# 以强制覆盖的方式推送修改后的 repo （不指定分支即所有分支）（重新上传 repo）
git push origin --force --all

# 强制推送 tags
git push origin --force --tags

# 清理和回收空间
rm -rf .git/refs/original/
git reflog expire --expire=now --all
git gc --prune=now
git gc --aggressive --prune=now

重新绑定，而不是合并创建的旧（受污染）存储库历史记录中的任何分支

• git 修改已提交的某一次的邮箱和用户信息

git filter-branch -f --env-filter \
"GIT_AUTHOR_NAME='Newname'; GIT_AUTHOR_EMAIL='newemail'; \
GIT_COMMITTER_NAME='committed-name'; GIT_COMMITTER_EMAIL='committed-email';" HEAD

fork 的项目( A )与原项目 (B) 保持同步

# 将 A 克隆到本地做中转

# 添加 B 远程仓库地址并拉取
git remote add update <B 远程仓库地址>
git fetch update master:updated

# 合并并解决冲突
git merge updated

# 也可以直接合并远程分支
git merge update/master

远程分支删除以后，本地显示仍然存在的解决办法

# 显示所有分支：
git branch -a

# 命令查看远程分支和本地分支的对应关系
git remote show origin

# 会看到
refs/remotes/origin/<branch> stale (use 'git remote prune' to remove)

# 执行下面命令同步删除
git remote prune origin
或者
git fetch -p

宝塔面板

neofetch

screenfetch

netdata linux 系统性能监测工具

htop 系统状况监控

nano linux下文本编辑器

grafana

linux 目录表

/ 根目录

/bin 、 /usr/bin 可执行二进制文件目录，如常用的命令 ls cat 等

/boot 放置系统启动时用到的一些文件，如内核文件

/dev 存放系统下的设备文件，访问该目录下的文件，相当于访问某个设备，常用的是挂载光驱mount /dev/cdrom/mnt

/etc 系统配置文件，重要的配置文件有

文件大小表示方式

linux 常用命令

ls 常用选项

• -a 显示所有目录和文件，包括隐藏文件

$ ls -a
. .. .xxx.txt
# 以.开头的文件/文件夹为隐藏文件/文件夹
# . 代表当前目录
# .. 代表上一级目录
# 蓝色为目录，白色为文件

• -l 以列表方式显示文件的详细信息
• -h 配合-l 以人性化的方式显示文件大小

选项可以合写，无顺序

$ ls -alh

ls 通配符

• * 代表任意个数个字符
• ？代表任意一个字符
• [] 表示可以匹配字符组中的任意一个
• [abc] 匹配a、b、c 中的任意一个
• [a-f] 匹配 a-f 任意一个字符

cd 常用选项

• cd/cd ~ 切换到当前用户的主目录

• cd .. 切换到上一级目录

• cd - 在最近两次工作目录间切换

mkdir

• -p 可以递归创建目录

$ madir -p a/b/c

同一目录下文件夹名称不能和文件名同名

rm

删除时直接删除，不放入回收站

• -f 强制删除，忽略不存在的文件，无需提示

• -r 递归的删除目录下的内容，或用于删除文件夹

终端命令格式

$ command [-options][paramete]

command : 命令名，相应功能的英文单词或单词缩写
-options： 选项
paramete ：参数

查阅帮助信息

$ command --help
$ man command
# man 是manual缩写,手册
# 使用man 时的操作键
#	空格 显示手册的下一屏
#	enter 一次滚动手册页的一行
#	b 回滚一屏
#	f 前滚一屏
#	q 退出
#	/word 搜索word字符串

终端技巧

• 自动补全

  在敲出 文件/目录/命令的前几个字母后，按下 tab 键

  • 如果输入没有歧义，系统会自动补全
  • 如果输入有歧义，再按一下 tab 键，系统会提示可能存在的命令

• 曾经使用过的命令

  按上下键可在曾经使用过的命令间切换，Ctrl+c 退出选择

文件和目录常用命令

拷贝和移动文件

• tree [目录名]： 以树状图列出文件目录结构

  -d 只显示目录，不显示文件

• cp 源文件 目标文件： copy 复制文件或者目录

$ cp  ~/Documemt/readme.txt  ./readme.txt
# 将 ~/Documemt/ 目录下的 readme.txt 文件复制到./目录下并以readme.txt命名
# 如果不修改文件名，只需要写目标路径
$ cp  ~/Documemt/readme.txt  ./

-i ：覆盖文件前提示 y 覆盖 n 不覆盖

-r ：若给出的源文件是目录文件，将递归复制该目录下的所有子目录和文件，目标文件必须为一个目录名

• mv 源文件 目标文件：move 移动文件或目录/ 文件或目录重命名

$ mv  ~/Documemt/readme.txt  ./
# 将 ~/Documemt/ 目录下的 readme.txt 文件移动到./目录下
$ mv readme.txt demo.txt
# 将readme.txt文件名修改为demo.txt

-i ：覆盖文件前提示 y 覆盖 n 不覆盖

查看文件内容

• cat 文件名： concatenate 查看文件内容、创建文件、文件合并、追加文件内容等功能，会一次显示所有内容，适合内容较少的文本文件

  -b：对非空输出行编号

  -n：对输出的所有行编号

  linux 中还有一个 nl 命令和 cat -b 的效果等价

• more 文件名：分屏显示文件内容 ，按空格显示下一屏，适合查看内容较多的文本

# 使用 more 时的操作键  和 man 相同
# 空格 显示手册的下一屏
# enter 一次滚动手册页的一行
# b 回滚一屏
# f 前滚一屏
# q 退出
# /word 搜索word字符串

• grep 搜索文本 文件名： 搜索文本文件内容，输出包含该文本的行

  linux 中的文本搜索工具，允许对文本文件进行模式查找（正则表达式），如果搜索文本中间有空格可以使用引号包裹

  -n 显示匹配行和行号

  -v 显示不包含匹配文本的所有行（相当于求反）

  -i 忽略大小写

  ^a 行首，搜索以 a 开头的行

  ke$ 行尾，搜索以 ke 结束的行

其他

• echo 文字内容 ：会在终端中显示参数指定的文本，通常会和重定向联合使用

• 重定向 > 和 >>：

linux 允许将命令执行结果重定向到一个文件，将本应显示在终端上的内容输出/追加到指定文件中，保存命令输出结果

> 表示输出，会覆盖文件原有的内容

>> 表示追加，会将文件追加到已有文件的末尾

# 创建 a 文件并将 “hello world”输出到 a 文件中 ，与touch区别
$ echo hello world > a
# 将命令 “ls -lh” 的结果输出到 a 文件中
$ ls -lh > a

• 管道 |

linux 允许将一个命令的输出通过管道作为另一个命令的输入，另一个命令对第一个命令的输出进行二次处理

可以理解为现实生活中的管子，管子的一头塞东西进去，另一头取出来，这里 | 的左右分为两端，左端塞东西（写），右端取东西（读）

# more：分屏显示内容
# 分屏显示命令 “ls -lha” 的输出结果
$ ls -lha ~ | more

# grep：在命令执行结果的基础上查询指定文本
# 查找 “ls -lha ~” 的结果中包含Do的行并显示
$ ls -lha ~ | grep Do

远程管理命令

关机/重启

shutdown 选项 时间

`-r`  重新启动

不指定选项和参数，默认表示一分钟之后关闭电脑

远程维护服务器时，最好不要关闭系统，而应该重新启动系统

# 常用命令示例
# 重新启动电脑，now 表示现在
$ shutdown -r now

# 系统在今天20:00 关机
$ shutdown 20:00

# 系统十分钟后自动关机
$ shutdown +10

# 取消关机计划
$ shutdown -c

查看或配置网卡信息

ifconfig: configure a network interface 查看/配置计算机当前的网卡配置信息

# 查看网卡配置信息
$ ifconfig

# 查看网卡对应的IP地址
$ ifconfig | grep inet

在 linux 中物理网卡通常以 ensxx 表示

127.0.0.1 本地环回/环回地址，一般用来测试本机网卡是否正常

ping ip地址： ping 检测到目标 ip 地址连接是否正常

ping 127.0.0.1 检查本地网卡是否工作正常

远程登录和复制文件

• ssh 用户名@ip ：secure shell 关机/重新启动

• scp 用户名@ip:文件名或路径 用户名@ip:文件名或路径：secure copy 远程复制文件

SSH ：SSH 客户端是一种使用 Secure Shell (SSH) 协议连接到远程计算机的软件协议

• 数据传输是加密的，可以防止远程管理过程中的信息泄露，也能防止 DNS 欺骗和 IP 欺骗

• 数据传输是压缩的，可以提高传输速度

有关 ssh 配置信息都保存在用户家目录下的 .ssh目录下

域名和端口号

域名：由一串用点分割的名字组成，例如 www.baidu.com ，是 IP 地址的别名，方便记忆

端口号：通过 IP 地址可以找到网络上的计算机，通过端口号可以找到计算机上运行的程序

SSH 服务器默认端口号为 22，Web 服务器为 80，HTTPS 为 443，FTP 服务器为 21，如果没有指定端口号，使用默认端口号

SSH 基本使用

$ ssh [-p port] user@remote
# user 远程服务器上的用户名，如果不指定默认当前用户
# remote 远程机器的地址，可以是IP/域名，或者别名
# port 是SSH server 监听的端口，如果不指定，默认22

# 使用 exit 退出当前用户登录
# ssh 在 linux 或 Unix 系统下可直接使用，win下需要安装软件 putty xshell

scp 基本使用

# 从远程服务器拷贝文件
$ scp user@remoteip:文件名或路径 文件名或路径
# -r 复制目录
# -P 指定端口是要用大写的 P

# 上传文件到服务器
$ scp 文件名或路径 user@remote ip:文件名或路径

scp 命令只能在 Linux 或 Unix 下使用

在 win 系统中需安装 filezilla 使用 FTP 进行文件传输

FileZilla 传输文件时，使用的是 FTP 服务而不是 SSH 服务，因此端口号应该为 21

ssh 高级

• 免密码登陆

配置公钥：执行 ssh-keygen 即可生成 ssh 钥匙，一路回车即可

id_rsa.pub 公钥 、 id_rsa 私钥

上传公钥到服务器：执行 ssh-copy-id -p port user@remote，公钥保存在服务器 .ssh 目录下

authorized_keys

本地使用私钥对数据进行加密/解密，服务器使用公钥对数据进行加密/解密

非对称加密算法

使用公钥加密的数据，需要使用私钥解密

使用公私钥加密的数据，需要使用公钥解密

• 配置别名

~/.ssh/config

Host vultr
	HostName ip地址
	User root
	port 22

直接使用 ssh vultr 即可实现登陆，scp 同样适用

修改 ssh 配置允许自定义工具连接服务器

# 切换到 root 角色
sudo -i

# 修改 SSH 配置文件 /etc/ssh/sshd_config
vi /etc/ssh/sshd_config

# 修改
PermitRootLogin yes # 开启root用户访问
PasswordAuthentication yes # 开启密码登陆

# 给root用户设置密码
passwd root

# 重启SSH服务使修改生效
service sshd restart

用户和权限的相关命令

用户和权限的基本概念

• 用户管理包括 用户 和 组 管理

• 在 linux 中可以指定每一个用户针对不同的文件或目录不同的权限

• 对文件/目录的权限包括

组：实际工作中，可以预先对组设置好权限，然后将不同的用户添加到不同的组中（简化了用户权限设置）

# ls -l 扩展
$ ls -l
-rw-rw-r-- 1 用户名 组名 大小 时间 名称
drwxrwxr-x 2

硬链接数：表示有多少种方式可以访问到当前目录/文件，文件的硬链接数通常为 1，目录的硬链接数取决于该目录有多少个子目录。

修改文件/目录权限 chmod

$ chmod +/-rwx 文件名|目录
# + 增加权限  - 删除权限
# 直接修改文件/目录的读、写、执行权限，但不能精确到 拥有者/组/其他
$ chmod +x 文件名 // 增加文件可执行权限
$ chmod -r 目录 // 删除目录可读权限
# 目录的可读权限：读取目录内容（如果没有此权限，可cd，不能ls）
# 目录的可写权限：修改目录内容
# 目录的可执行权限：对目录执行终端命令（如果没有此权限，甚至无法 cd 到目录）

chmod 高级用法

超级用户

• root 账户用于系统的维护和管理，对操作系统的所有资源具有所有访问权限

• 不推荐直接使用 root 账户登录系统

• 在 linux 安装过程中，系统会自动创建一个标准用户账号

sudo

• su 是 substitute user 缩写，表示使用另一个用户身份

• sudo 命令用来以其他身份来执行命令，预设身份为 root

• 用户使用 sudo 时，需先输入密码，之后有五分钟的有效期，超过期限去重新输入密码

组管理

groupadd 组名 ：添加组

groupdel 组名 ：删除组

cat /etc/group ：确认组信息

chgrp 组名 文件/目录名 ：修改文件/目录的所属组 -R 递归修改

创建组/删除组的终端命令都需要通过 sudo 来执行

组信息保存在 /etc/group 文件中

/etc 目录是专门用来保存 系统配置信息的目录

用户管理

创建用户/设置密码/删除用户

useradd -m -g 组 新建用户名 ：添加新用户

​-m 自动建立用户家目录

​-g 指定用户所在的组，否则会建立一个和用户名同名的组

passwd 用户名：设置用户密码

​ 如果是普通用户，直接用 passwd 可以修改自己的账户密码

userdel -r 用户名：删除用户

​-r 选项自动删除用户家目录

cat /etc/passwd | grep 用户名：确认用户信息

​ 新建用户后，用户信息保存在 /etc/passwd 文件中

创建用户/删除用户/修改其他用户密码 的命令都需要通过 sudo 执行

用户信息保存在 /etc/passwd 文件中

查看用户信息

id [用户名]：查看用户 UID 和 GID 信息

who ：查看当前所有登陆的用户列表

$ who
用户名  时间 (:0) # :0 表示当前电脑
用户名  时间 (172.16.xx.xx)

whoami ：查看当前登录用户的账户名

passwd 文件 由六个分号组成七个信息

1. 用户名
2. 密码（x，表示加密的密码）
3. UID（用户标识）
4. GID（组标识）
5. 用户全名
6. 家目录
7. 登录使用的 shell，就是登陆之后使用的终端，ubuntu 默认使用 dash

usermod

用来设置用户的主组/附加组 和登录 shell

主组：在用户新建时指定，在 etc/passwd 的第四列 GID 对应的组

附加组：在 etc/group 中最后一列表示该组的用户列表，用于指定用户的附加权限

设置用户的附加组之后，需要重新登录才能生效

# 修改用户的主组
$ usermod -g 组 用户名
# 修改用户的附加组
$ usermod -G 组 用户名
# 修改用户登录shell
$ usermod -s /bin/bash

默认使用 useradd 添加的用户是没有权限使用 sudo 以 root 身份执行命令的，使用以下命令将用户添加到 sudo 附加组中

usermod -G sudo 用户名

which

/etc/passwd 是用于保存用户信息的文件

/usr/bin/passwd 是用于修改用户密码的程序

# which 可用于查看执行命令所在的位置
$ which ls
# /bin/ls
$ which useradd
# /usr/sbin/useradd

cd 这个命令是内置在系统内核中的，没有独立文件，因此用 which 无法找到

bin 和 sbin

/bin (binary) 是二进制执行文件目录，主要用于具体应用

/sbin (system binary) 是系统管理员专用的二进制文件目录，主要用于系统管理

/usr/bin (user commands for applications) 后期安装的一些软件

/usr/sbin (super user commands for applications) 超级用户的一些管理程序

bin 存储普通可执行文件，sbin 存储跟系统管理相关的可执行文件

切换用户

su - 用户名：切换用户，并且切换目录

- 可以切换到用户家目录，否则保持位置不变

exit： 退出当前登录用户

su 不接用户名，可以切换到 roo，不推荐，不安全

exit 示意图：

修改文件权限

chowm 修改拥有者

chgrp 修改组

chmod 修改权限

# 修改文件/目录的拥有者
$ chown 用户名 文件名/目录名
# 递归修改文件/目录的组
$ chgrp -R 组名 文件名/目录名
# 递归修改文件权限
# 755 三个数字分别代表 用户 u /组 g /其他用户 o 的权限
$ chmod -R 755 文件名/目录名

r –> 4 w –> 2 x –> 1 无权限 –> 0 ，想要什么权限直接将数字相加

系统信息相关命令

查询服务器上当前系统日期和时间 / 磁盘空间占用情况 / 程序执行情况

时间和日期

date ：查看系统时间

cal ：calendar 查看日历， -y 选项可以查看一年的日历

磁盘和空间目录

df -h ：disk free 显示磁盘剩余空间 -h 以人性化的方式显示文件大小

du -h [目录名] ：disk usage 显示目录占用空间情况，不指定目录默认表示当前目录

-h 以人性化的方式显示文件大小

进程信息

PID 进程代号

ps au : process status 查看进程的详细状况，默认只显示当前用户通过终端启动的程序

​ps 选项(没有减号)

​a 显示终端上的所有进程，包括其他用户的进程

​u 显示进程的详细状态

​x 显示不是通过终端启动的进程

top : 动态显示运行中的进程并且排序 ，输入 q 退出

kill [-9] 进程代号 : 终止指定代号的进程，-9 表示强行终止

其他命令

查找文件

find [路径] -name “*.txt” : 查找指定路径下扩展名为.txt 的文件，包括子目录

​ 如果省略路径，表示在当前文件夹下查找

软连接

ln -s 被链接的源文件 链接文件 ：建立文件的软链接，类似于 Windows 下的快捷方式

注意：

• 如果没有 -s 选项建立的是一个硬链接文件（两个文件占用相同大小的磁盘空间，几乎不用）

• 源文件要使用绝对路径，可以方便移动链接文件后，仍然能够正常使用

文件软硬链接示意图

• 在 linux 中文件名和文件的数据是分开存储的

• 在 linux 中，只有文件的硬链接数为 0 文件才会被删除

• 在日常工作中几乎不会建立文件的硬链接

打包和解包

tar 是 Linux 中常用的备份工具，此命令可以把一系列文件打包到一个大文件中，也可以把一个打包的大文件恢复成一系列文件

# 打包文件
tar -cvf 打包文件.tar 被打包的文件/路径 (多个文件一次写在后面，用空格隔开)
# 解包文件
tar -xvf 打包文件.tar

• c 生成档案文件，创建打包文件

• x 解开档案文件

• v 列出归档接档的详细过程

• f 指定档案文件名称， f 选项必须放在最后

压缩和解压缩

gzip

• tar 和 gzip 命令结合使用实现文件打包和压缩

  • tar 只负责打包，但不压缩

  • 用 gzip 压缩 tar 打包后的文件，扩展名为 xxx.tar.gz

• tar 命令中 -z 选项可以调用 gzip

# 压缩文件
tar -zcvf 打包文件.tar.gz 被压缩文件/路径
# 解压缩文件
tar -zxvf 打包文件.tar.gz
# 解压缩到指定路径
# -C 解压到指定路径，（路径必须存在）
tar -zxvf 打包文件.tar.gz -C 目标路径

bzip2

• tar 和 bzip2 命令结合使用实现文件打包和压缩（用法同 gzip）

  • tar 只负责打包，但不压缩

  • 用 bzip2 压缩 tar 打包后的文件，扩展名为 xxx.tar.bz2

• tar 命令中 -j 选项可以调用 bzip2

# 压缩文件
tar -jcvf 打包文件.tar.bz2 被压缩文件/路径
# 解压缩文件
tar -jxvf 打包文件.tar.bz2
# 解压缩到指定路径
# -C 解压到指定路径，（路径必须存在）
tar -jxvf 打包文件.tar.bz2 -C 目标路径

软件安装

apt : Advanced Packaging Tool ，linux 下安装包管理工具，可以方便的安装/卸载/更新软件包

# 安装软件
sudo apt install 软件包
# 卸载软件
sudo apt remove 如软件名
# 更新已安装的包
sudo apt upgrade

防火墙管理

CentOS7 默认的防火墙不是 iptables,而是 firewalle

# 添加规则
firewall-cmd --add-port=16343/tcp
firewall-cmd --zone=public --add-port=16343/tcp --permanent （--permanent 永久生效，没有此参数重启后失效）
# 重新载入
firewall-cmd --reload
# 查看
firewall-cmd --zone=public --query-port=80/tcp
# 删除
firewall-cmd --zone=public --remove-port=80/tcp --permanent

# 开启防火墙
systemctl start firewalld.service
# 关闭防火墙
systemctl stop firewalld.service
# 列出端口信息
firewall-cmd --list-ports

使用 iptables

# 先检查是否安装了iptables
service iptables status
# 安装iptables
yum install -y iptables
# 升级iptables
yum update iptables
# 安装iptables-services
yum install iptables-services
# 停止firewalld服务
systemctl stop firewalld
# 禁用firewalld服务
systemctl mask firewalld

#注册iptables服务
systemctl enable iptables.service
# 开启 iptables 防火墙
systemctl start iptables.service
# 重启iptables防火墙
systemctl restart iptables.service
# 关闭 iptables 防火墙
systemctl stop iptables.service
# 查看 iptables 防火墙状态
systemctl status iptables.service

# 查看iptables现有规则
iptables -L -n
# 允许所有
iptables -P INPUT ACCEPT
# 清空所有默认规则
iptables -F
# 清空所有自定义规则
iptables -X
# 所有计数器归0
iptables -Z
# 允许来自于lo接口的数据包(本地访问)
iptables -A INPUT -i lo -j ACCEPT
# 开放22端口
iptables -A INPUT -p tcp --dport 22 -j ACCEPT
# 开放21端口(FTP)
iptables -A INPUT -p tcp --dport 21 -j ACCEPT
# 开放80端口(HTTP)
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
# 开放443端口(HTTPS)
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
# 允许ping
iptables -A INPUT -p icmp --icmp-type 8 -j ACCEPT
# 允许接受本机请求之后的返回数据 RELATED,是为FTP设置的
iptables -A INPUT -m state --state  RELATED,ESTABLISHED -j ACCEPT
# 其他入站一律丢弃
iptables -P INPUT DROP
# 所有出站一律绿灯
iptables -P OUTPUT ACCEPT
# 所有转发一律丢弃
iptables -P FORWARD DROP
#保存上述规则
service iptables save

#!/bin/sh
iptables -P INPUT ACCEPT
iptables -F
iptables -X
iptables -Z
iptables -A INPUT -i lo -j ACCEPT
iptables -A INPUT -p tcp --dport 22 -j ACCEPT
iptables -A INPUT -p tcp --dport 21 -j ACCEPT
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
iptables -A INPUT -p icmp --icmp-type 8 -j ACCEPT
iptables -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT
iptables -P INPUT DROP
iptables -P OUTPUT ACCEPT
iptables -P FORWARD DROP
service iptables save
systemctl restart iptables.service

sudo -i 为了频繁的执行某些只有超级用户才能执行的权限，而不用每次输入密码，可以使用该命令。提示输入密码时该密码为当前账户的密码。没有时间限制。执行该命令后提示符变为“#”而不是“$”。想退回普通账户时可以执行“exit”或“logout” 。
su 切换到某某用户模式，提示输入密码时该密码为切换后账户的密码，用法为“su 账户名称”。如果后面不加账户时系统默认为 root 账户，密码也为超级账户的密码。没有时间限制。
sudo su 运行 sudo 命令给 su 命令提权，运行 su 命令。
sudo -i 运行结果 PWD=/root
sudo su 运行结果 PWD=/home/用户名（当前用户主目录）

sudo : 暂时切换到超级用户模式以执行超级用户权限，提示输入密码时该密码为当前用户的密码，而不是超级账户的密码。不过有时间限制，Ubuntu 默认为一次时长 15 分钟。

通过 src 请求到的 js 文件，会被解析到 script 标签内，并且覆盖原 script 标签内的 js 代码

script 标签的 src 属性可以写任何路径或文件，并不仅仅只能写 js 文件

如果重新声明 js 变量，该变量的值不会丢失 var car='yellow'; var car car 的值依然是 ‘yellow’

010 === 8 // 八进制
0xa === 10 // 十六进制
1 / 0 // Infinity (无穷大)

null 出现场景

• str.match()方法匹配不到返回 null
• 通过 document.querySelector、getElementById() 获取不到元素返回 null

undefined 出现场景

• 已声明未赋值的变量
• 没有明确返回值的变量：获取对象不存在的属性，数组下标不存在，函数没有返回值，函数参数没有传入

switch 语句在比较值时使用的是 全等 操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）

Date() 和 new Date() 区别

Fixed 定位脱离 Viewport 的 bug

<style>
  .outer {
    overflow: hidden;
    width: 300px;
    height: 300px;
    background: yellow;
  }
  .mid {
    margin: 20px;
    width: 200px;
    height: 200px;
    transform: translate(0, 0);
    background: greenyellow;
  }
  .inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: pink;
    z-index: 1
  }
</style>
</head>
<body>
  <div class="outer">
    <div class="mid">
      <div class="inner"></div>
    </div>
  </div>
</body>
</html>

对于声明 transfrom 值非 none 元素，其子元素中若存在 position: fixed 将以声明 transform 的最近祖先作为基准而定位，这是因为 transfrom 值非 none 的元素定义了一个局部坐标系统，导致 postion: fixed 以此坐标系统计算布局。

9.3.2 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上
2. 如果属性值相同，则按照书写顺序，后来居上
3. 数字后面无单位
4. 只应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
5. 层叠水平仅在直接父级层叠上下文中进行比较，即层叠上下文 A 中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较

层叠上下文（stacking context）：创建层叠上下文的元素自己会成为一个参考对象

层叠水平（stacking level）

层叠顺序（stacking order）

满足下面规则的元素将会构造出一个 Stacking Context 结构：

• html 根元素默认会创建层叠上下文
• position不为static且z-index不是 auto 的元素
• display为flex且z-index不是 auto 的元素
• opacity不等于 1
• transform不等于 none

<html>
  <div class="me">
    <div class="you"></div>
  </div>
</html>
<style>
  .me {
    width: 100px;
    height: 100px;
  }
  .you {
    width: 100px;
    height: 100px;
    left: 50px;
    position: relative;
    z-index: -1;
  }
</style>

you 在这里和 me 做比较，比较开始，首先 you 寻找参考对象，上一层 me 是吗？显然不是，因为 me 没有触发上面任一条件创建层叠上下文，所以继续往上寻找，找到 html。对于 me，也直接往上找到 html，所以这个例子里 me 和 you 是在以 html 为参考对象进行比较，换句话说就是在 html 创建的层叠上下文环境中进行比较！然后按照七阶图，负值 index 在 block 元素之下！所以 me 在 you 之上。

然后我们修改下 me，加个z-index:0; 按照之前的思路演算一遍，you 的参考对象变成 me 了！而 me 仍然是 html，然后 me 和 html 再做比较，me 参考对象是 html，html 的参考对象是 html，OK，在同一上下文了，me 明显高于 html，所以 you 高于 me。

参考链接

元素上下层叠关系总结

北风吹雪：不起眼的 z-index 却能牵扯出这么大的学问

张鑫旭:深入理解 CSS 中的层叠上下文和层叠顺序

1.CSS 初识

• 概念：CSS(Cascading Style Sheets) ，通常称为 CSS 样式表或层叠样式表（级联样式表）

• 作用：

  • 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  • CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2. 引入 CSS 样式表（书写位置）

2.1 行内式（内联样式）

• 又称行内样式、行间样式。是通过标签的 style 属性来设置元素的样式

• 其基本语法格式如下：

<div style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</div>

实际上任何 HTML 标签都拥有 style 属性，用来设置行内式

• 案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

• 注意：
  • style 其实就是标签的属性
  • 样式属性和值中间是 :
  • 多组属性值之间用 ; 隔开
  • 只能控制当前的标签和以及嵌套在其中的子标签，造成代码冗余
• 缺点：
  • 没有实现样式和结构相分离

2.2 内部样式表（内嵌样式表）

• 又称内嵌式，是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义

• 其基本语法格式如下：

<style>
  div {
    color: red;
    font-size: 12px;
  }
</style>

• 注意：

  • style 标签一般位于 head 标签中
  • type=”text/css” 在 html5 中可以省略
  • 只能控制当前的页面

• 缺点：

  没有彻底分离

2.3 外部样式表（外链式）

• 又称链入式，是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中

• 其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>

• 注意：
  • link 是个单标签
  • link 标签需要放在 head 头部标签中，并且指定 link 标签的三个属性

2.4 三种样式表总结（位置）

3. CSS 样式规则

1. 选择器用于指定 CSS 样式作用的 HTML 标签，花括号内是对该对象设置的具体样式。
2. 属性和属性值以“键值对”的形式出现。
3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4. 属性和属性值之间用英文 : 连接。
5. 多个“键值对”之间用英文 ; 进行区分。

4. CSS 选择器（重点）

4.1 CSS 基础选择器

4.1.1 标签选择器

• 概念：

  标签选择器（元素选择器）是指用HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

• 语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

4.1.2 类选择器

类选择器使用 .（英文点号）进行标识，后面紧跟类名.

• 语法：

  • 类名选择器

  .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 标签

  <p class="类名"></p>

• 优点：

  • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

• 注意

  • 可以使用字母，数字，- ，_
  • 必须以字母开头，区分大小写，不要纯数字、中文等命名
  • 一个 class 可以出现多次，一个元素可以有多个 class，各个类名中间用空格隔开

4.1.3 id 选择器

id 选择器使用 # 进行标识，后面紧跟 id 名

• 其基本语法格式如下：

• id 选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

• 注意

  • 必须以字母开头
  • 区分大小写
  • 只可出现一次

4.1.4 通配符选择器

通配符选择器用 * 号表示，选择所有的标签。

• 其基本语法格式如下：

{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距。

* {
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

• 注意：

  会匹配页面所有的元素，降低页面响应速度，不建议随便使用

4.2 CSS 复合选择器

4.2.1 后代选择器（重点）

• 后代选择器又称为包含选择器（标签有直接或间接嵌套关系，可隔代选择）
• 中间用 空格 连接
• 语法：

父级 子级 {
  属性: 属性值;
  属性: 属性值;
}
.class h3 {
  color: red;
  font-size: 16px;
}

4.2.2 子元素(子代)选择器

• 子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素（直接嵌套，不能隔代）。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
• 语法：

.class > h3 {
  color: red;
  font-size: 14px;
}

白话：

比如:  .demo > h3 {color: red;}   说明 h3 一定是 demo 亲儿子  demo 元素包含着h3

4.2.3 交集选择器

• 由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

• 两个选择器之间 不能有空格，如 h3.special。

记忆技巧：

交集选择器 是 并且的意思。 即…又…的意思

比如: p.one 选择的是类名为 .one 的 p 标签;

用的相对来说比较少，不太建议使用。

4.2.4 并集选择器（重点）

• 并集选择器（CSS 选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

• 任何形式的选择器（包括标签选择器、class 类选择器 id 选择器等），都可以作为并集选择器的一部分。

比如  .one, p , #test {color: #F00;}
表示   .one 和 p 和 #test 这三个选择器都会执行颜色为红色
通常用于集体声明

4.2.5 伪类选择器

伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

#nav == [id=nav] 选择 id=nav 的所有元素

li:last-child 是选择 li 元素的父元素下的最后一个子元素，不一定是 li

li:last-of-type 是选择 li 元素的父元素的最后一个 li 元素

li:not(:last-of-type) 选择最后一个 li 之外其他所有 li

::before ::after 必须指定 content 属性，否则无效；生成的伪元素默认是行内样式；生成的伪元素无法被找到，更不能被 hover 等；一般用来清除浮动(只有::after 可以)或添加小图标

关于单冒号和双冒号问题：

关于:before与::before的区别
:before是css2中伪元素的写法，但是呢，在css3中严格规定，伪类采用单冒号，伪元素需要使用双冒号。为了兼容旧的代码，当浏览器碰到了:before之后，会自动的转换成::before。
如果需要兼容老的浏览器，比如IE678，推荐使用:before
如果不需要兼容老的浏览器，比如移动端，推荐使用::before

链接伪类注意

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
• 记忆法
  • love hate 爱上了讨厌
  • **lv **包包 非常 hao
• 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover
• 因为 a 链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
• 实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {
  /* a是标签选择器  所有的链接 */
  font-weight: 700;
  font-size: 16px;
  color: gray;
}
a:hover {
  /* :hover 是链接伪类选择器 鼠标经过 */
  color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

5. CSS 属性

5.1 font:字体

5.1.1 font-size:大小

• 作用：

  font-size 属性用于设置字号

p {
  font-size: 20px;
}

• 谷歌浏览器默认的文字大小为 16px，最小为 12px。
• em、百分比 相对父元素大小
• 设置 body 默认字体大小为 100%，其他文字大小以此为基础设置百分比值

5.1.2 font-family:字体

• 作用：

  font-family 属性用于设置哪一种字体。

p{ font-family:"微软雅黑";}

• 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
• 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
• 如果字体名中包含空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号，例如 font-family: “Times New Roman”;。
• 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

CSS Unicode 字体

• 为什么使用 Unicode 字体

• 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。

• xp 系统不支持 类似微软雅黑的中文。

解决：

• 方案一： 你可以使用英文来替代。 比如font-family:"Microsoft Yahei"。

• 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

  font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

5.1.3 font-weight:字体粗细

• 在 html 中如何将字体加粗我们可以用标签来实现
  • 使用 b 和 strong 标签是文本加粗。
• 可以使用 CSS 来实现，但是 CSS 是没有语义的。

5.1.4 font-style:字体风格

• 在 html 中如何将字体倾斜我们可以用标签来实现
  • 字体倾斜除了用 i 和 em 标签，
• 可以使用 CSS 来实现，但是 CSS 是没有语义的

font-style 属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

5.1.5 line-height:文字行高

• 作用：

  设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

  使用行高实现单行文字垂直居中

• 单位：

  • line-height 常用的属性值单位有三种，分别为像素 px，相对值 em 和百分比%，实际工作中使用最多的是像素 px

技巧：

• 一般情况下，行距比字号大 7.8 像素左右就可以了。line-height: 24px;
• 文字垂直居中就设置行高等于他外部元素的高度
• line-height 不要代替 height ，height 不写 line-height 会把盒子撑起来，不建议这样， height 该写也得写

行高测量

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上

300%、3em、3 之间区别

• 300% 先计算后继承
• 3 先继承后计算
• 3em

5.1.6 font: 综合设置字体样式 (重点)

font 属性用于对字体样式进行综合设置

• 基本语法格式如下：

font: [<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>(必不可少，否则无效)

font:italic bold 20px/2 arial,serif;
//表示font-style:italic  font-weight:bold    font-size:20px  line-height:2   font-family:arial,serif

• 注意：
  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
  • 其中不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。
  • line-height 值如果不写，浏览器会默认添加 normal

5.2 text 属性

5.2.1 color:文本颜色

• 作用：

  color 属性用于定义文本的颜色，

• 其取值方式有如下 3 种：

• 注意

  我们实际工作中， 用 16 进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色

5.2.2 text-align:文本水平对齐方式

• 作用：

  text-align 属性用于设置当前这个标签内部的 内容（可以是文字 、行内标签、行内块标签）的水平对齐方式

• 其可用属性值如下：

• 注意：

  是让盒子里面的 内容水平居中 ， 而不是让盒子居中对齐

5.2.3 text-indent:首行缩进

• 作用：

  text-indent 属性用于设置首行文本的缩进，

• 属性值

  • 其属性值可为不同单位的数值、em 字符宽度的倍数、或相对于父元素宽度的百分比%，允许使用负值（设置成很大的负值可以用来隐藏文字）
  • 建议使用 em 作为设置单位。
  • 可以继承

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

p {
  /*行间距*/
  line-height: 25px;
  /*首行缩进2个字  em  1个em 就是1个字的大小*/
  text-indent: 2em;
}

5.2.4 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

多个属性值写在同一个 text-decoration 里会叠加
多个属性值写在不同的 text-decoration 里，属性不会累加，优先级高的会完全取代优先级低的

5.2.5 CSS 外观属性总结

5.3 背景(background)属性

color

/* 背景颜色 */
background-color: 颜色值; /* 默认的值是transparent透明的inherit继承 */
/* 半透明背景 */
background: rgba(0, 0, 0, 0.3);
/* 只作用于盒子背景颜色，不会影响文本和背景图片 */
/* 最后一个参数是 alpha 透明度 取值范围 0~1 之间 */
/* 0.3 的 0 可以省略 */
/* C3 属性，低于 ie9 的版本不支持 */

opacity 属性 设置整个标签的透明度，取值范围 0~1之间

image

/* 背景图片 */
background-image: none(默认) url(图片地址) url('demo1.png'), url('demo2.png'); /* demo1 在 demo2 上层 */

• 在 background-color 上层

• 推荐背景图片 url 加引号

• 多个背景图片，使用逗号隔开

img 和背景图片的区别：

• img 直接可以显示在页面，不需要设置宽高，但是背景图片必须要给盒子设置宽高才能显示，背景图片撑不开容器
• img 上面写不了内容（除非后期使用定位），而背景图片完全可以
• 在实际工作中：img 一般用来做产品图片展示（经常更新），而背景图片一般用来做背景或者一些很少更新的小 icon

img {
  width: 200px; /* 插入图片更改大小 width 和 height */
  height: 200px;
  margin-top: 30px; /* 插入图片更改位置 可以用 margin 或 padding  盒模型 */
  margin-left: 50px; /* 插入的图片也是一个盒子 */
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid purple;
  background: #fff url('images/sun.jpg') no-repeat;
  background-position: 30px 50px; /* 背景图片更改位置用 */
}

repeat

/* 背景平铺 */
background-repeat: repeat：背景图像在纵向和横向上平铺（默认的） no-repeat：背景图像不平铺（常用） repeat-x：背景图像在横向上平铺 repeat-y：背景图像在纵向平铺 space：中间有空白，保证显示每个图片完整 round：通过缩放保证每个图片显示完整，有可能图片会被拉伸;

position

/* 背景位置 */
background-position: length：百分数 | 由浮点数字和单位标识符组成的长度值 position：top | center | bottom | left | center | right 方位名词;

注意：

• 必须先指定 background-image 属性
• x 轴向右为正方向，y 轴向下为正方向，z 轴向屏幕外是正方向
• 如果 position 后面是精确坐标， 那么第一个是 x ，第二的一定是 y
• 如果指定的两个值是精确单位和方位名字混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
• 如果指定两个值都是方位名字，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值默认居中对齐。如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
• 可设置像素值或百分比（百分比对应容器百分比位置，50% 50% 等价于 center center 即居中）
• right 10px top 20px 表示距离右边 10px 距离上边 20px

attachment

/* 背景附着就是解释背景是滚动的还是固定的 */
background-attachment: scroll：背景图像是随对象内容滚动 fixed：背景图像固定 inherit;

size

• 跟  width  或者  height  属性是一致的，其实就是设置背景图片的宽高
• 设置百分比则是相对于容器的百分比，而不是图片，50% 不是将图片缩小一半
• 特殊值：cover 和 contain 图片等比缩放恰好覆盖整个元素
  • cover 某一边正好 100%，另一边等于或者大于元素对应方向的长度
  • contain 某一边正好 100%，另一边等于或者小于元素对应方向的长度

origin

/* 设置背景零点参考的盒模型即设置（0.0）坐标位置 */
background-origin: padding-box（默认值） | border-box | content-box;

clip

/* 设置背景裁剪参考的盒模型 */
background-clip: border-box （默认值）背景区域：border + padding + content padding-box 背景区域：padding + content content-box 背景区域：content text (需要加 -webkit- 前缀) 背景区域 ：文字;

背景属性简写

!> background: bg-image || bg-position/bg-size || repeat-style || bg-attachment || bg-origin|| bg-clip(origin 和 clip 只设置一个值时则他俩为同一个值) || bg-color

多重背景：background 设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且颜色通常都是在最后面进行设置。

background 是一个合写的属性，如果在 background 之前设置了 background 相关的样式，会被覆盖掉

5.4 display 属性（重点）

属性值：
​ none  此元素不会被显示，不占空间，后续元素会补充上去（visibility：hidden    不显示，但空间保留）
​ block  显示为块级元素
​ inline  显示为内联元素
​ inline-block   显示为行内块

5.4.1 块级元素(block)

display: block;

常见的块元素有 <h1>~<h6> 、<p>、<div>、<ul>、<ol>、<li> 、dl、 dt 、dd、 header 、 footer 、aside、 nav 、 article 、 section …等，其中<div>标签是最典型的块元素。

• 块级元素的特点

（1）独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）继承父元素的宽度，高度不继承

（4）是一个容器及盒子，里面可以放行内或者块级元素。

• 注意：
  • 只有文字才能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放 div
  • 同理还有这些标签 h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

5.4.2 行内元素(inline)

display: inline;

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、lable 、<span> 等，其中 <span> 标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）不可设置竖直方向的 marging 和 padding,但是可以设置水平方向的 margin 和 padding

（5）行内元素只能容纳文本或则其他行内元素。

注意：

• <a> 不能直接嵌套 <a>
• 特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

5.4.3 行内块元素（inline-block）

display: inline-block;

在行内元素中有几个特殊的标签——<img>、<input>、<td>、textarea ，select ，button，可以对它们设置宽高和对齐属性，这些元素把它们称为行内块元素。

• 行内块元素的特点：

  （1）和相邻行内元素（行内块）在一行上。一行可以显示多个，超出范围会整块换行
  （2）默认宽度就是它本身内容的宽度。
  （3）高度，行高、外边距以及内边距都可以控制。
  （4）可以设置垂直居中  {vertical-align：middle；}

5.5 盒子阴影 box-shadow (CSS3)

• 语法:

box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；;

• 前两个属性是必须写的，其余的可以省略。
• 水平阴影、垂直阴影、阴影尺寸可为负值，模糊距离不能为负
• 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

div {
  width: 200px;
  height: 200px;
  border: 10px solid red;
  /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
  /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

颜色如果没设置则为 border 或文字颜色，阴影不占空间，内外阴影可以叠加，中间用逗号隔开

6. CSS 三大特性

目标：

• 理解
  • 能说出 css 样式冲突采取的原则
  • 能说出哪些常见的样式会有继承
• 应用
  • 能写出 CSS 优先级的算法
  • 能会计算常见选择器的叠加值

6.1 CSS 层叠性

• 概念：

  所谓层叠性是指多种 CSS 样式的叠加。

  是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

• 原则：

  • 样式冲突，遵循的原则是就近原则。
  • 同一标签同一属性，后面的会覆盖前面的
  • 样式不冲突，不会层叠

CSS层叠性最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

6.2 CSS 继承性

• 概念：

  子标签会继承父标签的某些样式，如文本颜色和字号。

  想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

• 注意：
  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
  • 子元素可以继承父元素的样式（text-，font-，line- 这些元素开头的可以继承，以及 color 属性）
  • a 标签不会继承 color， text-decoration none 属性值不会继承，其他属性值会继承
  • h 标签会继承的父元素的 font-size，但是具体的值是继承下来的 font-size 的值* 2

6.3 CSS 优先级（重点）

• 概念：

  定义 CSS 样式时，经常出现两个或更多规则应用在同一元素上，此时，

  • 选择器相同，则执行层叠性
  • 选择器不同，就会出现优先级的问题。

!important > style > id > 类/伪类 > 标签 > * > 继承

1). 权重计算公式

关于 CSS 权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

• 关于 CSS 权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

• div { color: pink!important; }

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

• div ul li ——> 0,0,0,3
• .nav ul li ——> 0,0,1,2
• a:hover —–—> 0,0,1,1
• .nav a ——> 0,0,1,1

注意：

1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在 10 个 div 能赶上一个类选择器的情况。

3). 继承的权重是 0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是 0，因为继承的权重为 0.（**!important 也无效**）

7. 盒子模型（CSS 重点）

css 学习三大重点： css 盒子模型 、 浮动 、 定位

主题思路：

目标：

• 理解：
  • 能说出盒子模型有哪四部分组成
  • 能说出内边距的作用以及对盒子的影响
  • 能说出 padding 设置不同数值个数分别代表的意思
  • 能说出块级盒子居中对齐需要的 2 个条件
  • 能说出外边距合并的解决方法
• 应用：
  • 能利用边框复合写法给元素添加边框
  • 能计算盒子的实际大小
  • 能利用盒子模型布局模块案例

7.1 盒子模型（Box Model）

• 所谓盒子模型：

  • 就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

总结:

• 盒子模型有元素的内容（）、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
• css 中设置的宽高默认是内容部分

7.2 盒子边框（border）​

• 语法：

border: border-width || border-style || border-color || none;

• 边框的样式：
  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

7.2.1 盒子边框写法总结表

很多情况下，我们不需要指定 4 个边框，我们是可以单独给 4 个边框分别指定的。

7.2.2 表格的细线边框

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为 0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过 css 属性：

  table{ border-collapse:collapse; }

  • collapse 单词是合并的意思
  • border-collapse:collapse; 表示相邻边框合并在一起。

<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

7.2.3 圆角边框(CSS3)

• 语法：

border-radius: length; /*圆角的半径*/

• 其中每一个值可以为数值或百分比的形式。

• 四个值的顺序是：左上、右上、右下、左下，依旧是顺时针旋转。每个角又有水平半径垂直半径，前四个代表水平，后四个代表垂直，中间用/隔开

• 技巧：

  border-radius: 50%; /*让一个正方形 变成圆圈 */ border-top-left-radius：10px; /*单独设置一个角*/

7.3 内边距（padding）

7.3.1 内边距

padding 属性用于设置内边距。 是指 边框与内容之间的距离。

当我们给盒子指定 padding 值之后， 发生了 2 件事情：

1. 内容和边框 有了距离，添加了内边距。
2. 盒子会变大。

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定 padding， 则不会撑开盒子。

注意： 后面跟几个数值表示的意思是不一样的。

7.3.2 内盒尺寸计算（元素实际大小）

• 宽度

  Element Height = content height + padding + border （Height 为内容高度）

• 高度

  Element Width = content width + padding + border （Width 为内容宽度）

• 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

  会撑大原来的盒子

box-sizing: content-box（为默认，宽高不包含padding和border）
box-sizing: border-box; 此时宽高包含border在内

7.4 外边距（margin）

7.4.1 外边距

margin 属性用于设置外边距。 margin 就是控制盒子和盒子之间的距离，可以为负值

margin 值的简写 （复合写法）代表意思 跟 padding 完全相同。

行内元素设置 margin-top/bottom 无效

7.4.2 块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：
  • 盒子必须指定了宽度（width）
  • 然后就给左右的外边距都设置为 auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header {
  width: 960px;
  margin: 0 auto;
}

常见的写法，以下下三种都可以。

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

7.4.3 文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子水平居中 左右 margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

7.4.4 外边距合并（塌陷）

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量只给一个盒子添加 margin 值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并（父元素会跟着下来），合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

7.4.5 清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* {
  padding: 0; /* 清除内边距 */
  margin: 0; /* 清除外边距 */
}

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

8. CSS 浮动(float)

目标

• 记忆
  • 能够说出 CSS 的布局的三种机制
• 理解
  • 能够说出普通流在布局中的特点
  • 能够说出我们为什么用浮动
  • 能够说出我们为什么要清除浮动
• 应用
  • 能够利用浮动完成导航栏案例
  • 能够清除浮动

8.1 浮动

8.1.1 CSS 布局的三种机制

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

1. 普通流（标准流）
   • 块级元素会独占一行，从上向下顺序排列；
     • 常用元素：div、hr、p、h1~h6、ul、ol、dl
   • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
     • 常用元素：span、a、i、em 等
2. 浮动
   • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3. 定位
   • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

8.1.2 为什么需要浮动？

思考题：

我们首先要思考以下 2 个布局中最常见的问题？

1. 如何让多个盒子(div)水平排列成一行？
2. 如何实现盒子的左右对齐？

虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：

1. 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
2. 它不能实现以上第二个问题，盒子左右对齐

pink 老师一句话总结他们

因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

8.1.3 什么是浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

1. 脱离标准普通流的控制
2. 移动到指定位置。

作用

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等..
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

语法

在 CSS 中，通过 float 属性定义浮动，语法如下：

选择器 { float: 属性值; }

特点

• float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下，遮挡起来了
• 原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。
• 元素不在受标准流显示模式的限制,块级元素不再继承父元素的宽度，行内元素可以直接设置宽高
• 浮动的元素互相贴靠一起的，中间没有空白，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定, 会以上一个盒子的底边线为基准线水平移动，如果在移动的过程里面被挡住了，那么就会卡在这里地方）
• 左浮从左往右排，右浮从右往左排
• 文字和 img 标签不会和浮动元素重叠
• margin 的 auto 值对于脱标元素没有作用

实际重要的导航栏中，我们不会直接用链接 a 而是用 li 包含链接(li+a)的做法。

1. li+a 语义更清晰，一看这就是有条理的列表型内容。
2. 如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

8.2 清除浮动

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
• 准确地说，所谓的清除浮动，是清除浮动后造成的影响
• 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

8.2.1 清除浮动的方法

在 CSS 中，clear 属性用于清除浮动

• 语法：

选择器{clear:属性值;}   clear 清除

但是我们实际工作中， 几乎只用 clear: both;

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style="”clear:both”"></div>

• 优点： 通俗易懂，书写方便
• 缺点： 添加许多无意义的标签，结构化较差。

2).父级添加 overflow 属性方法

可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。;

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用 after 伪元素清除浮动

::after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

.clearfix::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/*content: ""; display: block; clear: both; 这三个必须写*/
.clearfix {
  *zoom: 1;
} /* IE6、7 专有 */

• 优点： 符合闭合浮动思想 结构语义化正确
• 缺点： 由于 IE6-7 不支持:after，使用 zoom:1 触发 hasLayout。

8.2.2 清除浮动总结

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了。

9. 定位(position)

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

9.1 边偏移

通过 top、bottom、left 和 right 属性定义元素的边偏移：

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

9.2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 {
  position: 属性值;
}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

9.2.1 静态定位(static) - 了解

• 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的 none， 不要定位的时候用。
• 静态定位 按照标准流特性摆放位置，它没有边偏移。
• 静态定位在布局时我们几乎不用的

9.2.2 相对定位(relative) - 重要

• 相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

9.2.3 绝对定位(absolute) - 重要

• 依据最近的已经定位的父级元素（默认父元素的 padding 部分）来进行定位（拼爹型）
• 不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相—— 子级是绝对定位，父级要用相对定位。

子元素的 0 点为 margin-box 右上角，父元素的 0 点为 padding-box 右上角

9.2.4 固定定位(fixed) - 重要

1. 完全脱标 —— 完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
   • 跟父元素没有任何关系；单独使用的
   • 不随滚动条滚动。

9.3 定位(position)的扩展

9.3.1 绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照如下方法（垂直居中同理）：

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

居中还可以这样：{margin: auto; left: 0; right: 0; top: 0; bottom: 0;}

9.3.2 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。
4. 兄弟元素间相互比较（若 A 在 B 上面，B 的子元素不管怎么设置都不可能覆盖 A）

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

9.3.3 定位改变 display 属性

前面我们讲过，display 是显示模式， 可以改变显示模式有以下方式:

• 可以用 inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

同时注意：

浮动元素、绝对定位(固定定位）元素不再有外边距合并（塌陷）的问题。

9.4 定位小结

10. CSS 书写规范

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例：

.selector {
}

【强制】 属性名与之后的 : 之间不允许包含空格， : 与 属性值之间必须包含空格。

示例：

font-size: 12px;

选择器规范

【强制】 并集选择器，每个选择器声明必须独占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】 一般情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {
}
.comment .avatar {
}

/* bad */
.page .header .login input {
}
.comment div * {
}

属性规范

【强制】 属性定义必须另起一行。以分号结尾

示例：

/* good */
.selector {
  margin: 0;
  padding: 0;
}

/* bad */
.selector {
  margin: 0;
  padding: 0;
}

11. CSS 补充知识

11.1 元素的显示与隐藏

• 目的

  让一个元素在页面中消失或者显示出来

• 场景

  类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

11.1.1 display 显示（重点）

• display 设置或检索对象是否及如何显示。

display: none; /*隐藏对象*/
display: block; /*除了转换为块级元素之外，同时还有显示元素的意思。*/

• 特点： 隐藏之后，不再保留位置。

实际开发场景：

配合后面 js 做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

11.1.2 visibility 可见性 (了解)

• 设置或检索是否显示对象。

visibility: visible; 　/*对象可视*/
visibility: hidden; 　  /*对象隐藏*/

• 特点： 隐藏之后，继续保留原有位置。（停职留薪）

11.1.3 overflow 溢出(重点)

• 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

11.1.4 显示与隐藏总结

11.2 鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

11.3 轮廓线 outline

是绘制于元素周围的一条线，位于 border 的外围，不占空间，不影响元素布局，可起到突出元素的作用。如 input 输入框

outline: outline-color ||outline-style || outline-width;

四个边不能单独设置

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

<input type="text" style="outline: 0;" />

11.4 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea style="resize: none;"></textarea>

11.5 vertical-align (了解不推荐使用)

行内、行内块、表单元格 垂直方向的对齐方式: vertical-align

vertical-align: baseline | sub | super | top(对齐line) | text-top(对齐文字) | middle | bottom | text-bottom | <percentage>(参照line-height向上) | <length>(参照baseline向上);
baseline: 当前元素的基线和父元素的基线对齐;
middle: 当前元素的中线和父元素的基线加上x高度的一半对齐;

• 注意：

  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

  但是由于操作非常复杂,我们工作中基本不使用

去除图片底侧空白缝隙

• 原因：

  图片或者表单等行内块元素，他的基线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
  

• 解决方法：

  • 给 img vertical-align:middle 等等。 让图片不要和基线对齐。
  • 给 img 添加 display：block; 转换为块级元素就不会存在问题了。推荐使用

文字溢出省略号显示

white-space

设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:
  normal;  /* 默认处理方式 */
  nowrap;　/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 标签才换行 */

text-overflow

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow:
  clip; 不显示省略标记(...)，而是简单的裁切
  ellipsis; 当对象内文本溢出时显示省略标记(...)

注意：一定要首先强制一行内显示，再次和 overflow 属性搭配使用

总结

/* 强制一行内显示文本 */
white-space: nowrap;
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 强制最多三行显示文本 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;

换行方式

浏览器默认情况下，如果一个单词很长，导致一行中剩下的空间已经放不下时，浏览器会把这个单词挪到下一行去

word-wrap: break-word 标明是否允许浏览器在单词内进行断句，他会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

word-break 属性规定自动换行的处理方法

word-break: normal|break-all|keep-all
normal：使用浏览器默认的换行规则
break-all：允许在单词内换行，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
keep-all：只能在半角空格或连字符处换行

white-space：normal | pre | nowrap | pre-wrap | pre-line

normal：连续的空白符会被合并，换行符会被当作空白符来处理。填充 line 盒子时，必要的话会换行。

nowrap：和 normal 一样，连续的空白符会被合并。但换行符无效，除非手动添加换行标签
pre：所有空白符都会被保留。不会自动换行，原样输出
pre-wrap：保留空白符序列，但是正常地进行换行
pre-line：合并空白符序列，但是保留换行符

pre 标签换行

pre {
  white-space: pre-wrap;
}

11.7 CSS 精灵技术（sprite) 重点

CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），通过 background 属性精确定位到精灵图中的某个小图。

11.8 滑动门

各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 核心技术就是利用 CSS 精灵（主要是背景位置）和 盒子 padding 撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css 样式

* {
  padding: 0;
  margin: 0;
}
body {
  background: url(images/wx.jpg) repeat-x;
}

li {
  padding-left: 16px;
  height: 33px;
  float: left;
  line-height: 33px;
  margin: 0 10px;
  background: url(./images/to.png) no-repeat left;
}
a {
  padding-right: 16px;
  height: 33px;
  display: inline-block;
  color: #fff;
  background: url(./images/to.png) no-repeat right;
  text-decoration: none;
}
li:hover,
li:hover a {
  background-image: url(./images/ao.png);
}

总结：

1. a 设置 背景左侧，padding 撑开合适宽度。
2. span 设置背景右侧， padding 撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以 a 包含 span 就是因为 整个导航都是可以点击的。

12. CSS 三角形

div {
  width: 0; /*宽度高度为0*/
  height: 0;
  line-height: 0; /*照顾兼容性 低版本的浏览器，加上 font-size: 0;  line-height: 0;*/
  font-size: 0;
  border-top: 10px solid red;
  border-right: 10px solid green;
  border-bottom: 10px solid blue;
  border-left: 10px solid #000;
}

取整(不四舍五入)

~~2.33 === 2
2.33 | 0 === 2
2.33 >> 0 === 2
Math.floor(2.33)

浮点数精度丢失问题

// 在进行浮点数运算的时候，可能会出现精度丢失的问题
// 尽量少用浮点数进行运算，不要让浮点数进行比较
0.1 + 0.2 = 0.30000000000000004

// 解决办法 : 根据小数点后面的位数量 乘以对应的整数
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3

js 中的隐式转换

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] === 'sb'

Hexo 文档

配置环境

安装 Node

作用：用来生成静态页面的 到Node.js 官网下载相应平台的最新版本，一路安装即可。

安装 Git

作用：把本地的 hexo 内容提交到 github 上去。Git 官网下载

申请 GitHub

作用：是用来做博客的远程创库、域名、服务器之类的。 github 账号注册，github 配置

安装 HEXO

执行如下命令安装 hexo：

npm install hexo-cli -g

初始化命令：

hexo init

文件夹的目录如下：

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml 网站配置文件

其中，description 主要用于 SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者

生成静态页面

将 md 文件放到 source/_posts 文件夹下执行命令：

hexo g/generate # 生成静态页面至 public 目录
# -w/--watch 参数监视文件变动

安装本地服务

npm install hexo-server --save

启动本地服务，进行文章预览调试，命令：

hexo server # 开启预览访问端口(默认端口4000，'ctrl + c'关闭server)
# --debug 参数开启调试模式 -p/--port 参数重设端口

浏览器输入http://localhost:4000 预览

自定义 IP

服务器默认运行在 0.0.0.0，您可以覆盖默认的 IP 设置，如下：

hexo server -i 192.168.1.1

配置 Github

建立 Repository

建立与你用户名对应的仓库，仓库名必须为your_user_name.github.io，固定写法

建立关联

打开站点配置文件_config.yml 翻到最下面，改成我这样子的，注意 : 后面要有空格

deploy:
   type: git
   repository: ssh://git@github.com/cuilongjin/cuilongjin.github.io.git
   branch: master

为了便于以后管理，可以创建备份分支，$ git checkout -b hexo创建 hexo 分支用于备份原始文件 所有的修改添加均在此分支下进行，并 push 到远程 hexo 分支

执行如下命令

npm install hexo-deployer-git --save

然后，执行配置命令：

hexo deploy # 将 .deploy 目录部署到 GitHub

然后再浏览器中输入http://your_user_name.github.io/就行了

部署步骤

每次部署的步骤，可按以下三步来进行。

hexo clean
hexo generate
hexo deploy

写作

执行下列命令来创建一篇新文章

hexo new [layout] <title>

在文章中插入指定大小的图片

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

Bootstrap Callout

使用方式

{% note class_name %} Content (md partial supported) {% endnote %}

其中，class_name 可以是以下列表中的一个值：

default、primary、success、info、warning、danger

主题

NexT v5.1.x NexT v6.0.0 next 主题个性化配置

下载 NexT 主题

cd your-hexo-site
git submodule add git@github.com:cuilongjin/hexo-theme-next.git themes/next

启用主题

打开站点配置文件 _config.yml ， 找到 theme 字段，并将其值更改为 next

NexT 主题的目录架构

├── .github                #github信息
├── languages              #多语言
|   ├── _en.yml            #默认语言
|   └── zh-CN.yml          #简体中文
|   └── zh-TW.yml          #繁体中文
├── layout                 #布局，根目录下的*.swig文件是对主页，分页，存档等的控制
|   ├── _custom            #可以自定义的模板，覆盖原有模板
|   |   ├── head.swig      #文首样式
|   |   ├── header.swig    #头部样式
|   |   ├── sidebar.swig   #侧边栏样式
|   ├── _macro             #可以自定义的模板，覆盖原有模板
|   |   ├── post.swig      #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial           #局部的布局
|   |   ├── head           #头部模板
|   |   ├── search         #搜索模板
|   |   ├── share          #分享模板
|   ├── _script            #局部的布局
|   ├── _third-party       #第三方模板
|   ├── _layout.swig       #主页面模板
|   ├── index.swig         #主页面模板
|   ├── page               #页面模板
|   └── tag.swig           #tag模板
├── scripts                #script源码
|   ├── tags               #tags的script源码
|   ├── marge.js           #页面模板
├── source                 #源码
|   ├── css                #css源码
|   |   ├── _common        #*.styl基础css
|   |   ├── _custom        #*.styl自定义局部css
|   |   └── _mixins        #mixins的css
|   ├── fonts              #字体
|   ├── images             #图片
|   ├── js                 #javascript源代码
|   └── lib                #引用库
├── _config.yml            #主题配置文件
└── README.md              #说明文件

在菜单上添加页面

以添加 about 页面为例，在 hexo 目录下执行：

hexo new page "about"

然后你会发现 source 里面多了个目录 about，里面有个 index.md。其实你也可以手动建立。 然后在主题配置文件 _config.yml 中找到 menu 一项，添加一行 About: /about

设置「阅读全文」

在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

1. 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐
2. 在文章的 front-matter 中添加 description，并提供文章摘录
3. 自动形成摘要，在主题配置文件 _config.yml ，启用auto_excerpt

auto_excerpt:
  enable: true
length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

建议使用 <!-- more -->（即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

添加 RSS

在博客根目录下执行：

npm install --save hexo-generator-feed

打开站点配置文件 _config.yml ，添加：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

打开主题配置文件 _config.yml ，添加：

rss: /atom.yml

添加本地搜索

安装 hexo-generator-search，执行以下命令：

npm install hexo-generator-search --save

打开主题配置文件 _config.yml ，添加：

local_search:
  enable: true

自定义样式

themes\next\source\css\_custom\custom.styl 文件中添加自定义样式

修改头像样式

.site-author-image {
  border-radius: 50%;
}

更改主题背景

// 背景图片相关
body {
  background-image: url(../images/background.jpg);
  height: 100%;
  width: 100%;
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: cover;
}

图片放入 themes\next\source\images 中即可

改变背景色和透明度，添加：

.main-inner {
  background: #fff;
  opacity: 0.9;
}
// 文章内容的透明度
.content-wrap {
  opacity: 0.85;
}
// 侧边框的透明度设置
.sidebar {
  opacity: 0.85;
}
// 菜单栏的透明度设置
.header-inner {
  background: rgba(255, 255, 255, 0.85);
}
// 搜索框的透明度设置
.popup {
  opacity: 0.9;
}