链接：https://b23.tv/WCVjdBf
视频中提到的助学网页：
https://www.w3.org/
https://caniuse.com/?search=center

VSCODE快捷键

标签*数字：能产生n个标签
标签{内容}：能快速生成
嵌套标签1>嵌套标签2：快速生成嵌套关系的两层标签
嵌套标签1>嵌套标签2*n：嵌套标签2会出现n个
嵌套标签1>嵌套标签2.1{}+嵌套标签2.2{}：标签1内嵌套两个标签

HTML初始代码

（一）初始代码快捷键`!键+Tab键`

（二）初始代码解析

<!DOCTYPE html>-------------文档声明：告诉浏览器这是一个html文件。
<html lang="en">----------------html文件的最外层标签：包裹着所有html标签代码（“lang=en表示这是一个英文网站”，“lang=zh-CN表示一个中文网站”）
<head><meta charset="UTF-8">------------元信息：编写网页的赋值信息，高速浏览器要用什么标准解析代码。（"UTF=8"是国际编码，让网页不出现乱码情况）<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>-----设置网页的标题。
</head>
<body>----------显示网页内容的区域
</body>
</html>

三、HTML的基本标签

单标签``<标签>``

双标签<标签></标签>
也可以为标签添加属性
单标签<标签属性=“属性值” 属性=“属性值”...>
双标签<标签属性=“属性值” 属性=“属性值”...></标签>

四、HTML语义化

指根据网页中的内容结构，选择合适的html标签进行编写（每个标签都会有自己的职责）

（一）好处

在没有css的情况下，页面也能呈现出很好的内容结构
有利于seo查询，让搜索引擎爬虫更好的理解网页
方便其他设备解析（如屏幕阅读器，盲人阅读器等）
便于团队开发与维护

（二）HTML的常用标签

标题标签h

<h1>一级标题</h1>//h1标签只能有一个...
<h1>六级标题</h1>

效果：文本标题标签自带加粗，有自己的文本大小，独占一行，默认间距

段落标签p

<p>段落文本<p>
效果：段落之间会有间距
注：里面不能嵌套块
换行标签br
<br/>
水平线标签hr
<hr/>
hr标签的属性:color,width,align（对齐方式），noshade（删除线中阴影）
下划线标签u
<u></u>
下标标签sub
<sub>内容注释【】</sub>
下标标签sup
<sup></sup>
加粗标签strong 和b
<strong>加粗内容</strong>
<b>加粗并强调内容</b>
倾斜标签em和i
<del>倾斜强调文本</del>
<em>倾斜文本</em>
删除线标签del和s
<del>删除线并强调</del>
<s>删除线</s>
特殊符号：
编写一些文本时，有输入法无法输入的字符串

五、div标签和span标签

div标签没有具体含义，只用来划分页面区域，独占一行
span标签没有具体意义，可以独立修饰文本，内容有多宽就占多宽的空间距离

六、列表

无序列表

1、注意:

ul标签内只能放li标签，li标签内可以随便放。
用type改变前面的序号样式：disc,circle,square,none（用的最多）

2、语法：

<ul type=" "><li>无序列表</li><li>无序列表</li>
</ul>

有序列表

1、注意：

ol标签内只能放li标签，li标签内可以随便放。
可以用type和start属性改变列表前面的序号样式。
type属性值只能是1,a,A,i,I。
start属性值只能是数字（表示该类型的序号从第几个开始）

2、语法：

<ol type=" " start=" ">//type 表属性；start表开始<li>有序列表</li><li>有序列表</li>
</ol>

自定义列标签

语法:

<dl><dt>可以文字可以图</dt><dd>相关文字</dd>
</dl>

七、图片标签img

1、语法：

<img src=" " alt="” title=“” width=" "...>

2、属性：

src:图片路径
title:鼠标移上去时出现的提示信息
alt:加载失败的提示信息
width:如果只加width属性，不用height属性，图片会等比例缩放（单位：PX）

图片路径分为绝对路径和相对路径

绝对路径：文件在硬盘上真正存在的路径。不推荐
相对路径：相对于自己的目标文件位置
其中，①同文件夹下的图片在路径前面加./
②要跳出此文件夹去到另外的文件夹寻找图片要在路径前面加…/

八、超链接标签a

1、语法：

<a href=" " tirle=“ ” target=" " >内容</a>

2、属性：

href：路径
title：鼠标悬上去之后的提示信息
target：规定在何处打开文档

① _self：默认值
②_blank：在新窗口打开

九、表格标签table

1、语法：

<table >//创建表格<tr>//表示行<td></td>//表示单元格<td></td></tr><tr><td></td><td></td></tr>
</table>

2、表格table属性：

width：整个的表格宽。
单位支持PX与%（相对于父元素的百分比） height：整个的表格高。单位支持PX与%（相对于父元素的百分比,网页的高度是由内容撑开的。）
border：边框尺寸。
bordercolor:边框颜色。
bgcolor：表格背景颜色。
cellspacing：单元格之间的间距。
cellpadding：单元格与内容之间的距离。
align:表格水平对齐方式

3、行tr属性：

宽度已经由table限制了，不用width属性
height：高度
bgcolor:背景颜色
align:文字水平对齐方式
valign:文字垂直对齐方式

4、单元格td属性：

width：宽度,如果一个单元格设置了宽度，会影响整一列的单元格的宽度
height：高度，如果一个单元格设置了高度，会影响整一行的单元格的高度
bgcolor:背景颜色
align:文字水平对齐方式
valign:文字垂直对齐方式

5、表格合并

给td加标签：

Colspan="所要合并的单元格列数”
Rowspan="所要合并的单元格行数”

十、表单标签

语法：

<form action=" " method=“ ”><input type=“ ” placeholder=“ ” value=“ ” name=“ ” >
</form>

属性

input属性
type属性值
① text：普通文本输入框
②password:密码输入框
③submit：按钮,点击后会将信息提交到action中的链接和<botton type=“submit”></bottom>等价
④reset：重置按钮和<botton type="reset"></botton>等价
⑤image：图片按钮，后面要用src引入图片目录。
⑥file：上传文件
disabled:禁选，框项都可以加，直接在input标签加这个单词
readonly:只读
placeholder属性：输入框内的文字提示信息
value属性:按钮内文本
name属性：必须设置，否则用户信息不会发送到服务器，不同input可设置不同name属性值
method属性：
method属性值
①get :默认值，安全性低
②post：安全性低
outline属性：
输入框功能时点击后出现的边框线，可以设置none消除
单选选项功能
语法：

   <input type="radio" //决定单选选项功能name="xxx1"//为同一组设置一个classid="xxx2"//为了点击文字时也能选中选项，和label中的for配对checked="checked"//默认选择项><label for="xxx2">选项内容</label>

多选选项功能

   <input type="checkbox" //决定多选选项功能name="xxx1"//为同一组设置一个classid="xxx2"//为了点击文字时也能选中选项，和label中的for配对checked="checked"//默认选择项><label for="xxx2">选项内容</label>

十一、CSS样式

（一）内部样式

每个css样式由两部分组成，即选择符和声明，声明包括属性和属性值
<style> 选择器{属性：属性值；属性：属性值；} </style>

（二）外部样式

1、步骤：
独立创建一个.css文件，在文件里面写css样式。
然后再在原文件内的head部分加一个
<link rel="stylesheet" type="text/css" href="css文件目录"/>
或加一个(
<style>@import url(css文件目录)</style>
2、link与@import区别

link属于XHTML标签，页面加载时，link引用的CSS会同时加载
@import是CSS提供的方式，页面加载完毕后才会加载css

（三）行内样式

语法：
<标签 style="属性：属性值；属性：属性值；"></标签>

（四）样式优先级

同一属性下：行内>内部>外部
在属性值后添加！important浏览器会优先考虑此样式

十二、选择器

实现CSS对HTML一对一，一对多或多对一的样式控制

类选择器/class选择器：

1、一对一：
.名字{样式}————class=“名字”
2、多对一：
.名字1{样式1}；.名字2{样式2}————class="名字1 名字2"
这样子的html有了两个样式,当两个样式中有重复属性，会优先执行写在后面的css样式

id选择器：

具有唯一性，一个标签只能有一个id，不能一对多或多对一。
#名字{样式}————id="名字"

通配选择器

对所有元素添加样式
*{属性：属性值}
主要用于清除所有元素的默认边距值和填充值*{margin：0；padding：0}

群组选择器

常用于对不同类型的标签进行添加一样的样式。
标签1,标签2,class名称1,class名称2{样式}
①标签下的字标签也会被添加样式
②可以为标签添加class选择器后再用class名称添加样式。

后代选择器

使用此选择器后只有在标签下的后代标签才会被添加样式
标签后代标签{样式}

层级选择器

为亲儿子加样式，可以用
标签>亲儿子标签:{属性：属性值；}
为后面的第一个亲兄弟加样式
标签+第一个亲兄弟标签:{属性：属性值；}
为后面的所有亲兄弟加样式
标签~亲兄弟标签:{属性：属性值；}

伪类选择器

语法：
标签：类型{属性：属性值；}
或
标签：类型后代标签{属性：属性}

link 访问前的样式（只能加给a标签）
visited 访问后的样式（只能加给a标签）
hover鼠标移入时的样式（适用于所有标签）
active鼠标按下时的样式（适用于所有标签）

注：要按照一定顺序书写：LVHA

结构伪类选择器

语法：
标签：结构伪类选择器{
}
选择器：
first-child：选择第一个孩子
last-child：选择最后的孩子
nth-child(even/odd/数字)：选择第n个孩子
only-child:选择只有一个孩子的
emty:选择空盒子
root：选择根元素，永远是HTML

否定伪类选择器

语法：
标签：not（：选择符）{
}

目标伪类选择器

当点击某标签时，该标签具某种属性
语法：
标签：target{属性：属性值}

UI状态伪类选择器

input:enable{}
input:disabled{}
input:focus{}
input:checked{}
要先给标签去掉默认样式
appearance：none

属性选择器

不常用，不写了

选择器权重

在这里插入图片描述
注：包含选择符的权重是几个选择器的权重加和所得

十三、CSS文本属性

front-size:文本大小（px）
front-family：字体
多个字体之间用逗号连接，从第一种字体开始解析取能解析的字体。
color：字体颜色
属性值：
①颜色英文单词
②rgb(x,x,x)(0<=x<=250)
rgba(x,x,x,x)第四个数字控制透明度，数字越大透明度越高
③#六位十六进制数字
font-weight:加粗
属性值：
①数字：取值位于100~900的整百值（常取100，400,700,900）
②英文单词：lighter，normal，bolder
font-style:倾斜
属性：italic倾斜，normal。
text-align：文本水平对齐
属性值：left，center，right，justify（两端对齐，用于多行文本）
line-height：行高
（由上边距，字体大小，下边距组成。）
line-spacing：字符间距（用于中文）
word-spacing:词间距（用于英文）
text-indent：字符缩进
（取值可正可负，只对首行起作用）
属性值：
①px：有无法根据字体大小改变而自行修改缩进距离的缺点
②em:可以根据字符大小缩进em单位个的距离
text-decoration：文本修饰
属性值
①underline：下划线
②line-throught:中划线
③overline：上划线
④none：常用于a链接标签（可以删除a链接文本中默认的下划线）
注：当想要多种文本修饰时，用空格空开
text-transform:转换大小写
属性值
①capitalize：将每个词的首字母转换为大写
②lowercase:将所有字母转换为小写
③uppercase：将所有字母转换为大写
font：实现文本样式的复合
是text-decoration，font-weight，front-size，line-height，front-family的缩写，属性值也必须按这个顺序写
注：必须同时指定front-size和front-family，否则其他属性不会显示

十四、列表属性

list-style-type:
属性值
①disc:实心圆
②circle:空心圆
③square:实心正方形
④none
list-style-image：url(图片路径）
可以用它做用图片列表前面的小圆点
list-style-position：
原点的位置上是在框内还是框外（设置了框的属性才卡呢饿出来）
属性值：inside
list-style：实现标签属性的复合效果，用空格隔开多个属性值。

十五、背景属性

background-color：背景颜色
transparent值表示透明
background-image:url(图片路径);
当图片小于容器时，会默认平铺多张图片铺满容器。
background-repeat：决定图片展现效果
属性值：
① repeat：默认平铺
②repeat-x：x轴平铺
③repeat-y：y轴平铺
④no-repeat：不平铺
background-position:x x图片相对于容器的摆放位置
属性值
①px :可以取负值
②%
③left ,center, right, top, center, bottom.
background-size：图片大小
属性值
①px px;
②% %；
③cover：把背景图像扩大至完全覆盖住背景区域
④contain：把图像扩展至最大尺寸，使其宽度和高度完全适应内容区。可能铺不满盒子，出现留白。
background-attachment:背景图片的固定
属性值
①fixed：固定
固定之后就固定在浏览器窗口，相对于浏览器窗口了。如果此时盒子和图片位置不重合，那么图片就无法展示
可以利用这个属性实现视觉差
②scroll：滚动
background：实现背景样式的复合
注:①background-size属性只能单独使用
②写了blackground属性后不能不填属性值，否则会默认空白属性，即使前面单独设置了属性值，也会覆盖掉。
另外：
opacity：透明度 可以取0~1值

十六、浮动属性float

作用：

①定义网页中其他文本如何环绕该元素显示，就是不浮动的容器内的元素不会被浮动的容器遮住，会被挤到浮动元素周围。
②让原本占一行的标签可以在一行内排序

注：如果三个从大到小的盒子并排放，第三个放不下后，如果第二个下面够位置，他会浮到第二个下面，而不是在第一个下面另起一行

清除浮动方案

①为浮动元素的父元素设置高度，缺点是固定死了高度
②为父元素添加
overflow:hidden;
原理是为父标签设置了隐藏的动态高度，缺点是当第一个快出现下拉列表是，下面的块会移动，此时我们给下拉菜单假定位脱离文档流的话，这时我们的overflow：hidden又会使下面的块遮住我们下拉菜单。
③清浮动
clear：none/right/left/both;
加在被影响的块身上
④伪元素里面清浮动
给父元素的加一个after的伪元素并设置以下属性

 content：“”；clear：both；display：block；//伪元素内的内容默认为行内元素width：：0；height：0；visibility：hidden;//占位隐藏伪元素内的内容

十七、盒子模型

内边距padding

会另外增加盒子大小
不可以取负值

边框border

背景色也会蔓延到边框
语法：border：大小值样式值颜色值；

外边距margin

背景色不会蔓延
可以去负值
横向居中使可以用auto值，但上下居中只能量尺寸，auto值不管用
兄弟关系：
垂直方向两盒子外边距会取最大值
横向方向会合并取和
父子关系
现象：为子盒子加上外边距的话，子盒子会连着父盒子一起移动上边距距离。
为父盒子加上内边距来实现子盒子和父盒子出现距离的效果，但这样子内边距会增大盒子大小。
为父盒子加上边框，子盒子就知道了父盒子的边界在哪里，这时为子盒子加上外边距就能实现，但这样子边框会增大盒子大小。
给其中一个盒子加上浮动。
给父盒子加上overflow：hidden

十八、溢出属性overflow

属性值

visible:默认溢出内容显示在元素
hidden：溢出内容隐藏
scroll：溢出内容以滚动方式显示，没有溢出内容也会有静态滚动条
auto：有溢出内容就加滚动条，没有就正常
inherit：继承父元素overflow属性的值

注：可以对x，y轴进行单独属性值设置
overflow-x:X轴溢出
overflow-y：Y轴溢出

十九、空余空间属性white-space

知识补充：
pre标签：格式化文本，会保留文本原本的样子，空格，回车，Tab

属性

normal：默认换行
nowrap：文本不换行
pre：文本不换行并且显示空格，回车
pre-wrap：文本换行并且显示空格，回车
pre-line：文本换行并且显示回车

文本溢出显示省略号

为文本加以下三个属性

width：属性值；
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；

（text-overflow默认属性值是clip：不显示省略号，直接裁断）

二十、元素显示类型display

属性值
block：自上而下排，可以定义宽高。
inline：横着排,不可以定义宽高，
inline-block：横着排，可以设置宽高
none：隐藏元素（不占位置）
注：行内元素无法实现上下边距设置，即使背景颜色显示到了上下边距位置，但边距位置是不占文档流位置的。如果在他下面加上一个元素，元素会占据边距未知。
但可以实现左右边距。

二十一、定位position

属性值：

static：静止定位
relative：相对定位
参照物是自己的初始位置
移动之后，原本位置依然占着位置，占着文档流。
absolute：绝对定位
有父元素且父元素有定位则参照物是父元素，没有父元素，参照物是浏览器窗口的第一屏。
移动后原本位置不占据文档流
fixed：固定定位
参照物是浏览器窗口
sticky：粘性定位
要写固定在哪里，不然没效果

设置定位后，可以用top，bottom，left，right属性改变元素位置，可以取负值。

定位层级

在设置了定位后！
盒子交叠情况下css写在后面的盒子会盖住前面的盒子，
设置z-index属性，属性值越大，层级越大，越往上显示，可以设置负值

绝对定位深入探讨

如果两个盒子都设置了绝对定位，在上面说到的定位层级中，其中父子关系的盒子交叠只能通过设置子盒子为负数实现父盒子往上显示
给span标签加绝对定位可以让其设置宽高属性
总结：如何给span标签设置宽高：
①display②absolute③float

三角形案例

原理：利用边框交叠部分出现的斜线，设置块的宽高为零，只设置边框大小为想要的三角形大小的1/2被倍，然后给另外三条边框设置颜色透明即可
需要设置的属性
width，height，border-top、left、right、bottom，

如果我们直接把这个三角形块加到下拉菜单上，因为上边框三角形直接变成下边框三角形，位置会变得很突兀，这时我们可以用相对定位relative，将三角形都往他们中间挪挪

实现垂直方向居中

在屏幕居中，给元素设置了绝对定位后，top与left设置50%，使其移动到中间偏下位置，再把margin-top，margin-left设置成自身宽高一半并取负
在父元素居中，只需给父元素加相对定位

定位和浮动区别

利用定位浮动起来的盒子会遮挡住下面盒子的内容
float：半脱离，文字环绕
absolute：全脱离，不会出现文字环绕效果

二十二、锚点

作用：
同一页面不同区域的跳转可以利用a标签实现
语法:

<a href="#锚点名字"></a>
<div id="锚点名字"></div>

二十三、精灵图/雪碧图

将多个小图标合并成一张图片，利用background-position实现功能。

二十四、自适应

（一）宽高自适应

不写宽高或将宽高写为auto，就是宽高自适应
宽度自适应一般用在通栏，防止出现横向滚动条
可以设置min-height,max-height,min-width,max-width.
不设置高度时，盒子会出现高度塌陷

注：ul标签不占文档流，即占宽不占高

（二）窗口自适应：盒子大小会根据窗口大小改变而改变

为html和body标签的高加上100%后，再为盒子加上高100%

（三）两栏布局

一个纵向栏目宽度固定，另外的一个宽度自适应

宽度自适应方案

为固定的栏目浮动
宽度自适应的栏目不加宽度

calc（）函数方案

为固定的栏目浮动
宽度自适应的栏目加宽度
width：calc（100% - 固定栏宽度）；
注：符号两边一定要空一个空格

（四）三栏布局

两边的纵向栏目固定，中间的宽度自适应

自适应方案

html部分必须先写两边的固定栏目，再写中间的，否则中间的块，会影响右浮动栏目的位置。

calc（）函数方案

和两栏布局一样

二十五、伪元素

为标签内加上假的元素，其中元素内的内容默认是行内属性
语法
为标签：：伪元素{属性：属性值；}北二外
伪元素包括：before,after

二十六、下拉菜单select

语法：

<select>
<option></option>
<option></option>
<option></option>
<option></option>
</select>

属性:

size:显示的项数
multiple:多选，无属性值，直接写单词
selected：默认选项，无属性值，直接写单词
value：提供给后端时用于辨识选项，必须设置（和文本框或按钮时的value写的是本来就在上面的文字）

二十七、文本域textarea

placeholder：预置文本

注：默认内容写在双标签间，注意标签内写的内容会保留空格，回车，所以此标签尽量不要换行分开

二十八、字段集fieldset

语法：

<fieldset><legend>框的缺口</legend>框内内容
</fieldset>

二十九

音频

语法：

<audio src="" controls loop//自动循环播放 
autoplay//自动播放属性
muted//静音属性></audio>

视频

语法：

<video src="" controls loop autoplay muted
poster=""//画面海报属性
width、height=“”//宽高属性></video>

增强表单

color：取色器
email:邮箱文本框，如果不是邮箱格式不会提交给后台
url：网址文本框
tel:电话号码框，用于手机端，点击会触发数字键盘
range：滑块
可以用min和max属性设置最大最小值，
用value值设置初始位置，
用step设置步长
number：数字类型
同时可以设置最大最小值，初始值，步长
search：搜索框，比普通文本框多一个一键清除功能
date：日期选择
month：月份选择
week：周数选择
datetime-local：时间选择

要求文本框内容的属性

autofocus：刷新获取输入焦点
required：必填项，不能为空
multiple：支持多个地址，用逗号隔开
pattern：属性值是正则表达式

选项列表datalist

语法：

<input type="text" list="关联名称">
<datalist id="关联名称">
<optin value="选项内容"></option>
<optin value="选项内容"></option>
<optin value="选项内容"></option>
</datalist>

文本阴影

语法：
text-shadow：水平方向位移垂直方向位移模糊程度，阴影颜色
注：支持多个阴影，用逗号隔开再写一次四个属性就行

盒子阴影

box-shadow：水平方向位移垂直方向位移模糊程度阴影颜色
注：加上inset属性值可以变成内阴影

圆角border-radius

只对一个角可以设置border-垂直方向-水平放下-radius

字体引入

@font-family{
font-family:字体名字；
src:url(字体地址目录）}
标签{
font-family：字体名字;
}

怪异盒模型border-box

作用：当固定住盒子大小后，即使改变盒子内边距和边框也不会改变盒子整体大小，只会将内容物压缩。
如何激发：
box-sizing： border-box

弹性盒子flex

作用

子元素默认横向排列
行内元素可以设置宽高
只有一个元素时，设置属性margin：auto可以居中

如何激发
display：flex;
（一）添加给父元素的属性

1、修改主轴方向flex-decoration

row:主轴在横向，并且从开始位置显示
row-reverse：主轴在横向，并且从反方向位置显示
column：轴在纵向，并且从开始位置显示
column：轴在纵向，并且从反方向位置显示

2、调整主轴上的项目对齐方式与间距justify-content

flex-start：主轴的开始位置显示
flex-end：主轴的结束位置显示
center：主轴的居中位置显示
space-around：项目与项目之间的距离是首尾项目与边框距离的两倍
space-between：主轴的两端对齐
space-evenly：主轴的间距平分

3.1、调整侧轴上的项目对齐方式与间距align–items

flex-start：侧轴的开始位置显示
flex-end：侧轴的结束位置显示
center：侧轴的居中位置显示
baseline：侧轴的基线位置显示，效果和flex-start一样
stretch：项目不设置高度的前提下，默认的拉伸效果

3.2调整侧轴上的项目对齐方式与间距align–content* ！需与flex-wrap：wrap属性配合使用

flex-start：侧轴的开始位置显示
flex-end：侧轴的结束位置显示
center：侧轴的居中位置显示
space-around：项目与项目之间的距离是首尾项目与边框距离的两倍
space-between：侧轴的两端对齐
space-evenly：侧轴的间距平分

4、折行显示flex-wrap
弹性盒子中的子元素默认横向排列，不会折行，元素太多时会被挤压，失去设置的宽高。

nowrap
wrap

（二）项目属性
1、占主轴剩余空间的所有flex：1
如果所有项目都加flex：1属性，实现效果是均分空间

2、单独调整项目侧轴上的项目对齐方式与间距align-flex

flex-start：侧轴的开始位置显示
flex-end：侧轴的结束位置显示
center：侧轴的居中位置显示
baseline：侧轴的基线位置显示，效果和flex-start一样
stretch：项目不设置高度的前提下，默认的拉伸效果

3、调整项目在主轴上的显示顺序order
取值为单独的数字，可正可负，取值越大，显示顺序越往后

网格布局grid

作用
可以对父元素进行行列划分，是一个二维布局
如何激发
display：grid；

以下属性全部为父元素属性
如何划分？
行属性grid-template-rows
列属性grid-template-columns

取值

数值px：代表的是划分的网格的宽度与高度
百分比%：代表的是划分的网格宽与高占总宽高的百分比
重复函数repeat（n,x）：代表数值x需重复次数n
自动填充行列数auto-fill
例子：grid-template-columns：repeat（auto-fill，30%）；
这里的自动填充是指将列数按总宽的30%自动划分，放不下30%的话则不再划分列数
自动填充宽高auto：设置auto值的项目会自动填充剩余空间
片段划分fr：
例子：grid-template-rows：1fr 2fr 3fr
这里将行高分成六份，的一行占1份，第二行占2份，第3行占3份
取值范围minmax：
例子：grid-template-rows：100px 100px minmax(100px,200px);
这里指第三列项目的取值范围是100px~200px，即如果剩余宽度少于100px则不再划分，如果大于200px，则取列宽为200px

调整间距grid-gap
填两个值，第一个取之代表行间距，第二个取值代表列间距

调整显示方式grid-auto-flow
默认情况下，会横着拍完一行网格再排第二行。

row:横向显示
column：纵向显示

调整项目在单元格中的对齐方式place-items
取两个值，第一个位取值代表垂直方向，第二个代表水平方向
项目添加宽高后默认在单元格左上角显示

stare：开始位置显示
center：中间位置
end：末尾显示
stretch：拉伸效果
另外也有取值space-around间距环绕，space-between两端对齐，space-evenly间距平分

调整网格在父元素中的对齐方式place-content
取两个值，第一个位取值代表垂直方向，第二个代表水平方向
项目添加宽高后默认在单元格左上角显示

stare：开始位置显示
center：中间位置
end：末尾显示
stretch：拉伸效果
另外也有取值space-around间距环绕，space-between两端对齐，space-evenly间距平分

合并单元格grid-row与grid-column
取值为两个值，用斜线/隔开，第一个取值代表开始合并的网格线，第二个代表结束合并的网格线。需要注意盒子最外面也是有网格线包着的
如图
在这里插入图片描述

多列布局

父容器属性
column-count:数字：代表平均分为几列
column-gap:px：列间距
column-rule:列边框
column-fill:数值：统一列高度，如果值为auto 即为占满父容器高度，但这可能没办法分成理想中的列数
column-width:px：列宽，可能没办法分成理想中的列数
元素属性
column-span:all横跨所有列
break-inside:avoid防止元素内部折行