这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

CSS

html和css的关系

css是用来修饰html样式的。
html本身是有一些默认样式，如果想改变html标签的样式，就需要借助css。
html+css构成了网页的基本页面结构和样式。

css样式的结构

选择器 {
    属性: 值;
}

选择器(选择符)

指明网页中要应用样式规则的元素。
声明

在英文大括号 { } 中的的就是声明，属性和值之间用英文冒号 : 分隔。当有多条声明时，中间可以英文分号 ;
注释代码 /*注释语句*/

css样式的类型

内联式

直接写在html中，写在元素的开始标签里的的style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
嵌入式

把css样式代码写在<style type="text/css"></style>标签之间，一般情况下嵌入式css样式写在<head></head>之间。
外联式（外部式）

把css代码写一个单独的外部文件中，这个css样式文件以'.css'为扩展名，在<head>内（不是在<style>标签内）使用<link/>标签将css样式文件链接到HTML文件内。

<link href="英文字母名.css" rel="stylesheet" type="text/css" />
三种方式的优先级：内联式 > 嵌入式 > 外部式

嵌入式>外部式的前提：<link href="style.css"/>代码在<style type="text/css"></style>代码的前面

总结：就近原则（离被设置元素越近，优先级别越高）

CSS的工作步骤

浏览器载入HTML文件。
将HTML文件转化成一个DOM，DOM是文件在计算机内存中的表现形式。一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。
浏览器拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。
渲染树：浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则）应用在对应的 DOM 的节点中，并添加节点依赖的样式。
渲染树依照规则中应该出现的结构进行布局。
着色：网页展示在屏幕上。

css选择器

声明的形式

选择器 {
    样式;
}

通用选择器 *

* { 样式; }

匹配html中所有标签元素。
标签选择器

标签 { 样式; }
标签属性选择器
1. 根据某个标签的属性的存在来选择：标签[属性]{ 样式; }
2. 根据一个有特定值的标签属性是否存在来选择：标签[属性=属性值]{ 样式; }
3. 带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀开头：[attr|=value]
4. 带有以 attr 命名的属性，且属性值是以 value 开头的元素：[attr^=value]
5. 带有以 attr 命名的属性，且属性值是以 value 结尾的元素：[attr$=value]
6. 带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素：[attr*=value]
类选择器 .

.类选器名称 { 样式; }

先在开始标签中设置一个类：class="类选择器名称"
id 选择器 #

#id名称 { 样式; }

先在开始标签中设置一个id属性：id = "id名称"
类和 id 选择器的区别 · 相同点：可以应用于任何元素。 · 不同点：ID选择器只能在文档中使用一次；类选择器词列表方法可以为一个元素同时设置多个样式。
分组选择器 ,

选择器1, 选择器2, ... , 选择器n { 样式; }

使用分组选择符 , 为html中多个标签元素设置同一个样式。
子选择器 >

父>子 { 样式; }

用于选择指定标签元素的第一代子元素。
后代选择器（空格）

前辈后辈 { 样式; }

用于选择指定标签元素下的后辈元素。

子选择器和后代选择器的区别：> 作用于元素的第一代后代，空格作用于元素的所有后代。
通用兄弟选择器 ~

兄 ~ 目标元素 { 样式; }

两元素只须有相同的父级元素，匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素。
紧邻兄弟选择器 +

兄 + 弟 { 样式; }

当第二个元素紧跟在第一个元素之后，并且两个元素都属于同一个父元素的子元素，则第二个元素（弟弟）将被选中。
:nth-child() 选择器

父:nth-child(n) { 样式; }

用于选择第n个子元素，不论元素的类型
:nth-of-type(n)选择器

父:nth-of-type(n) { 样式; }

匹配属于父元素的特定类型的第n个子元素的每个元素
伪类选择器 :
1. 给元素的某种状态设置样式。
2. 语法
```
标签名:伪类名{
    属性: 属性值;
}
```
1. :hover（鼠标滑过的状态）
  
  :hover可以放在任意的标签上，但是兼容性不好的，所以现在比较常用的还是 a:hover 的组合。
2. :link（尚未访问的链接）
3. :visited（已访问过的链接）
4. :active（被用户激活的元素）
  
  当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
  
  为避免样式被覆盖，设置伪类规则的顺序为： :link —> :visited—> :hover —> :active
5. :checked
  
  匹配任意被勾选/选中的radio(单选按钮)，checkbox(复选框)，option(select中的一项)
伪元素选择器 ::
1. 选择一个元素的某个部分而不是元素自己。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
2. ::first-line（选择元素中的第一行）
3. ::after（创建一个伪元素，作为已选中元素的最后一个子元素。常会配合content属性来为该元素添加装饰内容，这个虚拟元素默认是行内元素）
4. ::before（创建一个伪元素，作为选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰内容，此元素默认为行内元素）

层叠 & 继承 & 优先级 & 重要性

层叠

CSS代表层叠样式表（Cascading Style Sheets）
样式表层叠

定义了如何合并来自多个源的属性值的算法
CSS声明的源

用户代理样式（浏览器默认样式）、网页的作者定义的样式（主题）、浏览器的用户
层叠顺序
1. 首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则（后面的规则会覆盖前面的规则）。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则的一部分。
2. 其次，依据重要性对这些规则进行排序。层叠是按升序排列的，这意味着来着用户自定义样式表的 !important 值比用户代理样式表的普通值优先级高。
3. 假如层叠顺序相等，则使用哪个值取决于优先级。

样式的继承

一些设置在父元素上的CSS属性是可以被子元素继承的，有些则不能。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。
继承属性：主要是与字体、文本有关的属性（font、color等）
非继承属性：主要是与盒子模型有关的属性（display、height、margin等）

控制继承

CSS为控制继承提供了五个特殊的通用属性值。每个CSS属性都接收这些值。

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial

将应用于选定元素的属性值设置为该属性的初始值。
revert (en-US)

将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于unset。
revert-layer (en-US)

将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset

将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则和initial一样。
重设所有属性值：撤销对样式所做的更改

all: inherit / initial / unset / revert;

优先级

如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

权值计算

为同一个元素设置了不同的css样式代码时，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
标签的权值为1，类选择符的权值为10，ID选择符的权值为100，内联样式权值为1000。后代选择器（空格）权值为父子权值之和。
继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
最高层级 !important：为某些样式设置具有最高权值。
```
选择器 {
    属性: 值 !important;
    其他样式;
}
```
样式优先级

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

特例：!important优先级样式的权值高于用户自己设置的样式。

字体样式

字体 font-family

font-family: " ";

如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。
字体大小 font-size

font-size: px;（默认16px）
字体粗细 font-weight

normal：默认值，与400等值。

bold：加粗，与700等值。

lighter：比从父元素继承来的值更细(处在字体可行的粗细值范围内)。

bolder：比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

number：一个介于1~1000 (包含) 之间的 number 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。
字体样式 font-style

normal：默认值。

italic：斜体，用于字体本身就有倾斜的样式。

oblique：倾斜的字体，强制将字体倾斜。
字体颜色 color

英文命令颜色，比如red

RGB颜色 rgb( , , )

RGBA（在rgb的基础上增加了不透明度a，a的值越小越透明）

十六进制颜色

HSL颜色（H色调，S饱和度，L高度）
font样式的简写方式

font: size family;

至少要指定 font-size 和 font-family 属性

在缩写时 font-size 与 line-height 中间要加入'/'斜扛。

文本样式

text-decoration：样式;

text-decoration: none; 默认值，定义标准的文本

text-decoration: underline; 文本下有一条线

text-decoration: overline; 文本上有一条线

text-decoration: line-through; 穿过文本中间的一条线，一般用于商品折扣价
首行缩进 text-indent: 值;
行间距 line-height: 值;
文字间隔 letter/word-spacing: 值;

文字间隔或者字母间隔： letter-spacing （使用在英文单词时，是设置字母与字母之间的间距）

英文单词之间的间距： word-spacing
文本对齐方式 text-align

text-align: center; 居中

text-align: left; 左对齐

text-align: right; 右对齐
长度值

像素：一般使用px

百分比：相对于其父元素属性的百分比

em：相对于元素的字体大小来计算（1em = 1*font-size）

rem：相对于根元素（HTML）的字体大小来计算

函数

calc()函数

在css的属性值中进行简单的计算

例：width: calc(90% - 30px);
transform函数
var()函数

只能作为属性的值使用，返回所引用自定义属性对应的值，并被应用到相应的CSS属性上。

css自定义属性

在一个css选择器内部进行定义，使用两个短横连接线 -- 作为开头命名的名称

常用来实现UI主题切换

/* 定义 */
选择器(自定义属性的作用域) {
    --自定义属性名: 自定义属性值;
}
/* 使用 */
选择器 {
    属性名: var(--自定义属性名);
}

@规则

@import

@import 'css文件';

将额外的样式表导入主CSS样式表
@media

使用媒体查询来应用 CSS，仅当某些条件成立 (例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
```
@media (min-width: 30em) {
    body {
        background-color: blue;
    }
}
```

css3盒子模型

宽度和高度

在css内定义的盒模型宽度（width）和高度（height），指的是填充以里的内容范围。
元素实际宽度（盒子的宽度）= 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距
外边距margin、边框border、内边距padding

box-sizing 属性

box-sizing属性定义了应该如何计算一个元素的总宽度和总高度。

content-box ：默认值，width / height 的属性值 = 元素的内容宽度，任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box ：告诉浏览器你想要设置的边框和内边距的值是包含在 width 内的，内容区的实际宽度是 width - (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

注意：border-box不包含margin

元素分类

块级元素

设置 display:block; 就是将元素显示为块级元素。

特点：
```
 一个块级元素独占一行；

 元素的高度、宽度、行高以及顶和底边距都可设置；

 元素宽度在不设置的情况下，和父元素的宽度一致。
```
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

常见块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

内联元素（行内元素）

设置 display:inline; 将元素设置为内联元素。

特点：

 和其他元素都在一行上；

 元素的高度、宽度及顶部和底部边距不可设置；

 元素的宽度就是它包含的文字或图片的宽度，不可改变。

 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

常见内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行内块元素

设置 display:inline-block; 就是将元素设置为内联块状元素。

特点：
```
 和其他元素都在一行上；

 元素的高度、宽度、行高以及顶和底边距都可设置。
```
常见行内块元素：<img>、<input>
display属性

none：此元素不会被显示。

block：此元素将显示为块级元素，此元素前后会带有换行符。

inline：默认值。此元素会被显示为内联元素，元素前后没有换行符。

inline-block：行内块元素。

内边距 padding ：元素内容与边框之间的距离

内边距分为上padding-top、右padding-right、下padding-bottom、左padding-left。

简写

padding: 上值右值下值左值; （顺时针）

padding: 上右下左值;

padding: 上下值左右值;

外边距 margin ：元素与其它元素之间的距离

外边距分为上margin-top、右margin-right、下margin-bottom、左margin-left。
简写

margin: 上值右值下值左值; （顺时针）

margin: 上右下左值;

margin: 上下值左右值;

margin: 上值左右值下值;
margin塌陷
- 兄弟垂直塌陷
  
  取两盒子的邻外边距的最大值，即 MAX(margin-top, margin-bottom)
- 父子塌陷
  
  无论给子元素设不设置margin-top值，其都不发生作用，最终会作用于父元素身上。
  
  解决方法：
  
  （1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合
  
  （2）为父盒子设定padding值，抵消掉子元素设置的margin值
  
  （3）为父盒子添加 overflow：hidden;
  
  （4）为父盒子添加 position：fixed;
  
  （5）为父盒子添加 display：table;
  
  （6）利用伪元素给子元素的前面添加一个空元素

边框 border

粗细 border-width

样式 border-style 属性值：dashed（虚线）、dotted（点线）、solid（实线）

颜色 border-color

简写 border: 宽度样式颜色;

设置圆角 border-radius

圆角可分为左上border-top-left-radius、右上border-top-right-radius、右下border-bottom-right-radius、左下border-bottom-left-radius。

简写：

border-radius: 左上值右上值右下值左下值;

border-radius: 上下左右值;

轮廓 outline

outline: 大小样式颜色;

轮廓和边框的区别：轮廓是在边框里面的，不会影响可见框的大小。

不透明度 opacity：一个元素后面的背景的被覆盖程度

opacity: 0; 元素完全透明 (即元素不可见)

opacity: 0.0~1.0; 元素半透明 (即元素后面的背景可见)

opacity: 1; 元素完全不透明(即元素后面的背景不可见)

背景样式

背景颜色

background-color: 颜色值;
背景图片

background-image: url(图片路径);

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。
控制背景图片平铺 background-repeat

no-repeat：不重复

repeat-x：水平重复

repeat-y：垂直重复

repeat：在两个方向重复
调整背景图片的大小 background-size

cover：使图像完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外。

contain：使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
背景图像定位 background-position

该属性允许选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。默认的背景位置值是 (0,0)。

background-position: 水平值垂直值;

水平值/垂直值可以使用top / right / center 等关键字、长度值、百分比来设置。

控制元素溢出 overflow

overflow: hidden; 隐藏掉溢出
overflow: scroll; 有内容溢出时在水平方向和垂直方向都加上滚动条
overflow-y: scroll; 仅在y轴方向滚动
overflow-x: scroll; 仅在x轴方向滚动

可以用overflow属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。第一个对overflow-x生效而第二个对overflow-y生效。
overflow: auto; 只让滚动条在有比盒子所能装下更多的内容的时候才显示
块级排版上下文BFC

BFC决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用。当涉及到可视化布局时，BFC提供了一个环境，HTML在这个环境中按照一定的规则进行布局。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC特性/功能：使用BFC包住浮动元素、与浮动元素产生边界，可用来解决浮动产生的高度塌陷问题。

css3布局模型

流动模型 Flow

默认的网页布局模式
特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型 float

可选值

none: 默认，元素不浮动

left: 元素向左浮动

right: 元素向右浮动

inherit：继承父元素的浮动属性
文档流

网页是一个多层的结构，通过CSS可以分别为每一层设置样式，但是用户只能看到最上面一层，最下面一层称为文档流。

默认所有元素都是在文档流中 自上而下、自左而右 排列。

元素主要有两个状态：1. 在文档流中； 2. 脱离文档流。
浮动的特点

浮动元素会完全脱离文档流，不再占用文档流中的位置

浮动可以使一个元素向其父元素的左侧或右侧移动

浮动元素默认不会从父元素中移出

浮动元素向左/右移动时，不会超前它前边的其他浮动元素
高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，子元素会脱离文档流，导致父元素高度塌陷。

解决高度塌陷问题的方法：BFC

开启BFC的方法（在父元素中）

（1）将overflow设置为一个非visible的值

（2）设置浮动 float

（3）position: absolute;

（4）display: inline-block;

注意：所有开启BFC的方法都有副作用，其中 overflow: hidden; 副作用最小。
清除浮动的方法

（1）给父元素设置高度

（2）父级定义 overflow: hidden或auto;

（3）在浮动元素后加一个空标签 {clear:both; height:0; overflow:hidden;}
由于float会造成高度塌陷的问题，现多使用flex、grid等方式进行布局，而float仅用于文字环绕图片的效果。

层模型 Layer

定位position，默认值为static(元素没有开启定位)

偏移量（开启定位后，通过偏移量来设置元素的位置）

top: 定位元素和定位位置上边的距离。值越大，越往下移动。
buttom: 定位元素和定位位置下边的距离。值越大，越往上移动。
left: 定位元素和定位位置左边的距离。值越大，越往右移动。
right: 定位元素和定位位置右边的距离。值越大，越往左移动。

1. 相对定位 `position: relative;`

元素开启相对定位以后，如果不设置偏移量，元素不会发生任何改变。

相对定位是以元素在文档流中的位置，（开启定位前的位置）为参照的。

相对定位会提升元素的层级。

相对定位不会使元素脱离文档流，即不会改变元素的性质（行内还是行内，块还是块）。

总结：不脱离文档流，相对于自身定位。

2. 绝对定位 `position: absolute;`

元素开启绝对定位以后，如果不设置偏移量，元素的位置不会发生任何改变。

绝对定位是以包含块为参照的。

包含块：

正常情况下是离当前元素最近的祖先块元素
绝对定位的包含块是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则相对于根元素<html>进行定位

绝对定位会提升元素的层级。

绝对定位会使元素从文档流中脱离，即会改变元素的性质（行内变成块，块的宽度被内容撑开）。

总结：脱离文档流，相对于父级定位。

3. 固定定位 `position: fixed;`

与绝对定位类型类似，但它是以视口（屏幕内的网页窗口）为参照的。由于视口本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

总结：脱离文档流，相对于浏览器窗口定位。

4. 粘滞定位 `position: sticky;`

兼容性不好

flex弹性盒模型

使元素具有弹性，可以跟随页面的大小而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器
通过display来设置弹性容器

display: flex; 设置为块级弹性容器

display: inline-flex; 设置为行内的弹性容器
flex-direction属性：指定容器中的弹性元素的排列方式

主轴：弹性元素的排列方向；侧轴：与主轴垂直的轴。

row：默认值，主轴自左向右。

row-reverse：主轴自右向左。

column：主轴自上向下。

column-reverse：主轴自下向上。

弹性元素（弹性项）

弹性容器的子元素称为弹性元素
弹性元素可以同时是弹性容器
属性
1. flex 设置子元素相对于父元素的占比。
  
  flex属性的值只能是正整数,表示占比多少。
  
  给子元素设置了flex之后,其宽度属性会失效。
2. flex-grow 伸展系数（值为1时不会伸展）
  
  当父元素有剩余空间时，子元素会按照比例分配剩余空间。
3. flex-shrink 收缩系数（值为0时不会收缩）
  
  当父元素有空间不足时，子元素会按照比例分配进行收缩。
4. flex-wrap 设置弹性元素是否在弹性容器中自动换行
  
  nowrap：默认值，元素不会换行。
  
  wrap：元素沿着侧轴方向自动换行。
  
  wrap-reverse：元素沿着侧轴反向自动换行。
5. justify-content 设置主轴空白空间的分布方式
  
  flex-start：元素沿着主轴起边排列。
  
  flex-end：元素沿着主轴终边排列。
  
  center：元素居中排列。
  
  space-between：空白均匀分布到元素间。
  
  space-around：空白均匀分布到元素两侧。
  
  space-evenly：空白分布到元素的单侧。
6. align-items 设置侧轴排列方式
  
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  
  flex-start：元素不会拉伸，沿着侧轴起边对齐。
  
  flex-end：沿着侧轴终边对齐
  
  center：居中对齐
  
  baseline：基线对齐。
7. align-content 侧轴空白空间的分布，属性值与justify-content的类似。

grid布局（基于网格的二维布局系统）

启用grid容器

网格容器：采用网格布局的节点区域就叫做容器
display: grid; 定义一个块级的网格容器
display: inline-grid; 定义一个内联的网格容器
display: subgrid; 定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。
注意

一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。

column、float、clear 和 vertical-align 对网格容器没有效果。

网格容器的属性

grid-template-columns 和 grid-template-rows

grid-template-columns属性：规定网格布局中的列数和列宽（几列就写几个值）

grid-template-rows属性：规定网格布局中的行数和行高（几行就写几个值）
- 属性值
  1. 绝对单位（如px,vh等）
  2. 百分比%
  3. auto 关键字：由浏览器自己决定长度，剩余空间进行自动分配
  4. fr 关键字：按fr比例分配宽度/高度
  5. repeat 方法：repeat(重复的次数 , 重复值/重复模式);
  6. minmax() 方法：minmax(最小值的长度 , 最大值的长度)，剩余空间进行自动分配
  7. 网格线的名称：使用方括号括住每一根网格线的名字，几对括号之间写列宽/行高。4列就需要是5条分割线，分割线的名称可以重复。
grid-gap（设置行/列间距）
1. grid-row-gap: 行间距的值;
2. grid-column-gap: 列间距的值;
3. 简写 grid-gap：行间距的值列间距的值;
grid-template-areas（定义区域）
1. 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
2. 将单元格写成相同的名字就可以合并区域
3. 如果某些区域不需要利用，则使用点 . 表示。
grid-auto-flow（决定容器的子元素的放置顺序）
1. 划分网格以后，容器的子元素(项目）会按照顺序，自动放置在每一个网格。
2. grid-auto-flow: row; 默认值，先行后列
3. grid-auto-flow: column; 先列后行
place-items（设置单元格内内容排列布局）
1. place-items: 水平布局垂直布局;
  
  place-items: center center; 等价于 <==> justify-items: center; align-items: center;
2. 属性值
  
  center：单元格内部居中。
  
  start：对齐单元格的起始边缘。
  
  end：对齐单元格的结束边缘。
  
  stretch：拉伸，项目大小没有指定时-占满单元格的整个宽度（默认值）。
place-content（设置整个内容区域在容器里的位置）
1. place-content: 属性值;
  
  等价于 <==> justify-content（水平方向）、align-content （垂直方向）
2. 属性值
  
  center：容器内部居中。
  
  start：对齐容器的起始边框。
  
  end：对齐容器的结束边框。
  
  stretch：项目大小没有指定时，拉伸占据整个网格容器。
  
  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
  
  space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。
  
  space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
grid-auto-columns/grid-auto-rows（设置超出原有网格的单元格的大小）
1. grid-auto-rows: 值; 设置超出部分的行高
2. grid-auto-columns: 值; 设置超出部分的列宽

项目属性

grid-column/grid-row（设置项目在容器中的位置）

grid-column：grid-column-start（左边框所在的垂直网格线）、grid-column-end（右边框所在的垂直网格线）的缩写。

grid-row： grid-row-start（上边框所在的水平网格线）、grid-row-end（下边框所在的水平网格线）的缩写。

属性值

（1）通过数字指定第几根线

（2）通过grid-template-columns设置的网格线的名字

（3）使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
grid-area（设置项目在容器中的区域位置）
place-self（设置项目在单元格内的位置）

与place-items用法一致，但只作用于单个项目，能覆盖place-items的值。是justify-self（设置单元格内容的水平位置左中右）、align-self（设置单元格内容的垂直位置上中下）的缩写。

单元格合并

基于网格线

垂直方向：grid-column: 第一条线的序号 / 最后一条线的序号;

水平方向：grid-row: 第一条线的序号 / 最后一条线的序号;
使用关键词span

垂直方向：grid-column: 第一条线的序号 / 跨越竖向单元格的数量;

水平方向：grid-row: 第一条线的序号 / 跨越横向单元格的数量;

居中设置

水平居中设置

行内元素

text-align:center;

块状元素

定宽块状元素（width为固定值）

方法一：

目标元素 {
    margin-left:auto;
    margin-right:auto;
}

方法二：

目标元素 {
    position: absolute;
    margin-left: 该元素宽度的一半;
}

方法三：

目标元素 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

不定宽块状元素（width的值没有设置）