千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记
我不会设置仅粉丝可见，不需要你关注我，仅仅希望我的踩坑经验能帮到你。如果有帮助，麻烦点个 👍 吧，这会让我创作动力+1 😁
文章目录
千峰HTML5+CSS3学习笔记写在前面1. 前言2. HTML3. CSS3.1 选择器3.2 CSS属性
4. 盒子模型4.1 溢出属性4.2 元素显示类型4.3 定位4.4 精灵图4.5 宽高自适应4.6 窗口自适应
5. 表单进阶6. HTML5新特性7. CSS3基础7.1 CSS3选择器7.2 伪类选择器7.3 阴影7.4 圆角边框7.5 字体引入7.6 怪异盒模型7.7 弹性盒
8. 移动端布局9. 多列布局10. 响应式布局11. 布局单位12. 渐变13. 动画14. 网格布局15. 杀青
写在前面
学习链接：千锋HTML5前端开发教程1000集：[1集: 183集]，共183集感想 | 摘抄
查询标签在各大浏览器中的兼容问题：caniuse费曼学习技巧：以教促学行内元素转块元素的方法：
display: block;position: absolute;float: left; 浮动和绝对定位的区别：
float：半脱离，文字环绕absolute：全脱离，不会出现文字环绕效果 伪类和伪元素的区别（:和::的区别）Animate.css动画演示 学习时遇到的问题
1. 前言
居中：
HTML结构：W3C制定了机构HTML的语法、标准CSS表现：W3C制定了表现CSS的语法、标准JS行为：W3C、ECMA制定了行为标准（W3C DOM，ECMAScript）
2. HTML
标记
常规标记，双标记空标记，单标记 ：特殊切固定的文档声明标签
hr：水平线
特殊符号
div标签
没有具体含义，用来划分页面的区域，独占一行。输入div*3 可以直接键入三行div span标签
没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。 li标签
li里面可以随意放标签，但是ol里面只能放置li数字是自动生成的params：
type：1，a，A，i，Istart：取值只能是一个数字 ul标签
快捷创建：ul>li{aaa}*3ul里面只能放li，li里面可以放其他标签默认是黑色的实心圆params：
type：disc、circle、square、none（用得最多） dl标签
自定义列表主要用于图文混排dl > dt+dd 图片标签
同级目录
相对路径
code.gif./code.gif 绝对路径 返回上一级后查找路径
../code.gif 图片标签的属性
宽高设置
只设置一个属性：等比例缩放设置两个属性：按设置缩放 超链接标签
能够实现不同页面的跳转
target="_self"：默认值，当前窗口打开
target="_blank"：新窗口打开
表格：
表格创建快捷键：table>tr*3>td*3
表格属性：
行tr的属性，table row
单元格td属性：table data
如果一个单元格的设置宽度，影响的是这一整列的宽度如果一个单元格的设置宽度，影响的是这一整行的高度 表格合并
合并列：Colspan = 所要合并的单元格的列数 必须给td合并行：Rowspan = 所要合并的单元格的行数 必须给td 表单标签
form中method的post和get的区别
3. CSS
cascading style sheets，层叠样式表
作用：修饰网页信息的显式样式
CSS语法：
内部样式表、外部样式表、行内样式表
外部样式的创建
外部css导入
行内
就近原则：!important >行内>内部>外部
3.1 选择器
为什么要用选择器：
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
元素选择器/类型选择器（element选择器），如：div{width:100px; height: 100px; background:red;}
class选择器/类选择器
优先级也是就近原则，这里就近只的是style定义的顺序，而不是class的继承顺序 id选择器
不能给一个标签用上多个id * 通配符/通配符选择器
群组选择器：提出公共代码，节约代码量
div, p, h1, box1 {
background-color: yellow;
}
后代选择器
div p {
background-color: aqua;
}
底层查找逻辑：从右到左，先找子类，再找父类 伪类选择器
需要遵循顺序编写
link-visited-hover-active
选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲 选择器的权重
包含选择器：子类选择器（嵌套的）的权重要大于普通元素的选择器
3.2 CSS属性
文本属性
100：细体，lighter400：正常，normal700：加粗，bold900：更粗，bolder 文本间距
词间距，word-spacing：针对英文的词之间的间距字符间距，letter-spacing：字符与字符之间，文字与文字之间 首行缩进，text-indent
只对首行生效2em，指当前字体大小的2个字符 文字装饰：
下划线、上划线、删除线
如果想要多条线
text-decoration: line-through underline overline;
文本转换：text-transform，大写、小写，首字母大写
font：
.p_font {
font: italic bold 20px/1em 微软雅黑;
}
列表属性
设置图片的话，需要对每一个li定义类，每个类设置不同的图片list-style：合并写法 背景属性
背景图片小于盒子大小：默认平铺效果
背景图片大于盒子大小：裁剪显示左上角的部分
background-repeat：
repeat：默认平铺repeat-x：x轴平铺repeat-y：y轴平铺no-repeat：不平铺 background-size：
100px 100px100% 100%cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，有一部分会被裁掉contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，有一部分背景无法铺满 background-attachment：
默认是scroll设置fixed可以制作视差效果 背景属性的符合写法：
用空格隔开
顺序可以换
可以只取一个值，放在后面能覆盖前面的值
background-size属性只能单独用
顺序可以随便换
位置的顺序要贴着写，不能随便换
div {
width: 600px;
height: 600px;
/* background-color: yellow;
background-image: url(pics/马卡龙.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url(pics/马卡龙.png) no-repeat center fixed;
}
浮动属性
作用：
让竖着的东西横着来定义网页中的其他文本如何绕着该元素显示 浮动是见缝插针的，能往下排就往下排，其次才会换行
清浮动
写固定高度
清浮动的clear用法
当前浮动元素后面补一个盒子，不设置宽高，clear:both
overflow: hidden
通过隐藏的bfc让浮动的元素计算高度
4. 盒子模型
什么是盒子模型
padding：内边距
一个值，四个方向都一样两个值，上下，左右三个值，上 左右 下四个值，上右下做单独设置某一个方向的padding：padding-left，类似的，top、bottom、left、rightpadding不支持负数 border：边框
样式：
soliddoubledasheddotted 背景色也能蔓延到边框，即boder压在bg-color上的boder属性拆分：
border-widthborder-styleborder-color margin：外边距
支持多个方向一起写：margin: 10px 20px 30px 40px;也支持属性拆分：
margin-topmargin-left… 很多标签自带margin值，所以有时候会需要将margin设置为0外边距支持设置负值，盒子往反方向移动最快屏幕居中方案：margin: 0 auto;，上下为0，左右自动；上下auto是没有意义的外边距的特性：
兄弟关系，两个盒子垂直外边距与水平外边距的问题
垂直方向上，外边距取最大值。水平方向上，外边距合并处理。 父子关系，给子加外边距，但作用于父身上了，怎么解决
方案1：子margin-top ==> 父的padding-top，注意高度计算方案2：给父盒子设置边框，transparent：透明方案3：加浮动，子和父都可以方案4：overflow:hidden，BFC
4.1 溢出属性
溢出属性（容器的）
空余空间
nowrap：不换行pre：显示空格、回车，不换行pre-wrap：显示空格，回车，换行pre-line：显示回车，不显示空格，换行 省略号显示
4.2 元素显示类型
元素显示类型
块元素：
display: blockdisplay: list-item独占一行显示p标签放文本可以，不能放块级元素 行内：
display: inline不能设置长宽padding和margin只有左右有用，上下没用 行内块:
既能设置宽高，又能跟其他标签一起分享空间display: inline-blockimg、input 元素类型互相转换：设置display属性
display: none，隐藏属性空格：子代选择器，.item li：子代中有li的都选中> ：亲代选择器，.item>li：只选择自己的亲儿子 安利首页设计
版心通栏留白
4.3 定位
定位 position
粘性定位：导航栏粘住顶部固定定位：广告永远显示在右下角相对定位：自己的位置进行偏移，但是不改变原位置的占位绝对定位：常用于基于父类的定位，一般box为相对定位，子类pic为绝对定位。绝对定位属性的设置会使得行内元素改为块元素。 层级
z-index：层级z-index越大，层级越大，越靠顶层显示（负值也可）需要配合定位使用绝对定位在层级上的表示
父子关系：设置子盒子的z-index为负值，可以让父盒子顶层显示兄弟关系：如果都是绝对定位，根据z-index的值显示谁在顶层 锚点
锚点作用：页面不同区域的跳转，使用a链接
4.4 精灵图
CSS Sprites
图片整合的优势：
通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。通过整合图片来减少图片的体积。
4.5 宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
width不设置或者auto就是自适应
使用场景：
导航栏通栏布局 高度自适应：
元素高度的默认值：{height: auto;}设置最小高度：min-height 浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷方法1：给父元素添加声明 overflow:hidden（缺点：会隐藏溢出的元素）方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both; height:0;overflow:hidden; （缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）方法3：万能清除浮动法
选择符：after{content:" "; clear:both; display:block; height:0; visibility:hidden;/overflow:hidden;} 伪元素
隐藏的区别：
display:none：不占位的隐藏visibility:hidden：占位的隐藏
4.6 窗口自适应
盒子根据窗口的大小进行改变
设置方法：html, body{height:100%;}
calc() 函数的使用
cal() 函数：用于动态计算长度值；需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用 calc() 函数进行计算；calc() 函数支持加减乘除的运算；calc() 函数使用标准的数学运算优先级规则； 多栏复杂布局
5. 表单进阶
单选框
name：表示单选框所在的组，该组下所有的radio都要设置同样的nameinput.id + label.for：使文字部分可以点击选中 复选框
基本跟单选框一样，就是 type="checkbox" 上传文件
图片按钮-代替提交按钮
隐藏按钮
禁用和只读属性
下拉菜单
格式
select支持的属性
size：下拉菜单显示的个数，多的话就增加滚动条multiple：支持多项选择 option支持的属性
value：提供给后端需要用的value值selected：默认选中 文本域
一般通过css来控制宽和高placeholder： 预置文本，提示文字textarea默认的value值是写在双标签内部的，注意空格问题，所以写的时候，不要进行换行啊啥的通过在css中设置resize：重新设置大小
vertical：垂直方向horizontal：水平方向both：两个方向none：两个方向都不能resize 字段集
fieldset
6. HTML5新特性
HTML5发展史
HTML5的浏览器兼容
HTML5语法
HTML5新增语义化标签
新增的语义化标签没有实际性的作用，跟div没啥区别，就说做一个名字的参考，使用的时候还是要结合css使用
比如制作一个盒子模型的界面
- 111
- 111
- 111
- 111
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus repellat perspiciatis ea nobis
dolore cupiditate tempore quidem eius, modi eveniet fuga enim beatae quibusdam earum fugit in, iure aut.
Quaerat?
效果：
video和audio的应用
之前的霸主flash，由于安全性、计算资源使用效率低，被抛弃了audio：video：
增强表单
数据列表
提供选项列表支持模糊搜索查询 增强表单属性
7. CSS3基础
7.1 CSS3选择器
优雅降级和渐进增强
层级选择器
+ 的意思是：当前元素的后面第一个兄弟
.child+li {
background: yellow;
}
~ 的意思是：当前元素的后面所有的亲兄弟
.child~li {
background: yellow;
}
属性选择器
实践：
p111
p222
p333
用户名：
密码：
年龄：
邮箱：
7.2 伪类选择器
结构伪类选择器
通过 nth-child(n)实现奇数和偶数的css设置：
奇数：n改为2n-1，或者odd偶数：n改为2n，或者even 目标伪类选择器
E:targe 选择匹配E的所有元素，且匹配元素被相关URL指向通常跟锚点结合使用手风琴：每次只打开一个，折叠面板 UI状态伪类选择器
E:focus：焦点，会匹配此伪类选择器checkbox有自己的默认样式，如果没有清除该默认样式的化，不收伪类选择器的样式控制。清除样式：appearance: none; 否定伪类选择器
动态伪类选择器
7.3 阴影
文本阴影
盒子阴影
7.4 圆角边框
border-radius
接收 px和% 单位
接收一个值：四个角是一样的
接收两个值：左上右下，左下右上一致
三个值：左上，左下右上，右下
四个值：从左上开始，顺时针方向
单个角的设置：border-bottom-left-radius: 20px;
border-radius: 30px/60px;：每个角，水平方向走30，垂直方向走60
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;：从左上角开始，顺时针方向水平的四个走向/垂直的四个走向
正方形变成⚪：border-radius的值设置为盒子长宽的一半，要考虑border和padding
设置成50%，可以直接设置成⚪，不需要考虑border和padding
半圆：
扇形：
7.5 字体引入
7.6 怪异盒模型
怪异盒模型
box-sizing: border-box
怪异盒模型以宽高为基础，padding和border只会挤压内部空间，而不是像平常出现的外扩情况。margin是一样的。
使用场景：排列时，子组件不会因为加了padding而换行
7.7 弹性盒
display:flex
影响
子元素默认横向排列如果子元素是行内元素，则子元素会变成块级元素只有一个元素的时候，父元素增加margin:auto 会使得子元素实现水平和垂直居中 默认情况下，水平方向是主轴，垂直方向是侧轴，子元素按照 主轴 排列。
设置主轴方向：flex-direction: column
调整主轴对齐方向：
justify-content: space-between;flex-startflex-endcenterspace-between：两端对齐space-around：距离环绕 调整侧轴对齐方向：align-items: center;
折行：flex-wrap:wrap
调整折行之后的行间距：
flex-startflex-endcenterspace-aroundspace-between 加了display:flex属性的盒子叫做 容器，里面的子盒子叫做 项目
项目的对齐：align-self: stretch
项目调整顺序：order: 1
order不设置时，为0order越大，越往后面排order可以取负值，越小越往前排如果父容器设置了 flex-direction:row-reverse，那么也是按照reverse之后的顺序进行排序，取负值则往前排，取正值则往后排 项目剩余宽高：flex: 1
占满剩余空间
如果有多个项目都设置了flex，则各自占用的空间按照flex的比例进行平分
纵轴作主轴时同理
三栏布局样例
8. 移动端布局
模拟器上显示的分辨率：CSS像素，设备的独立像素
物理分辨率：设备像素
设备像素比（dpr）=物理像素/CSS像素
iphone6 1css的像素 == 2物理像素；s5 1css像素 == 3物理像素
设计稿：
物理分辨率为了清晰的页面只需要提供一份需要用到的布局有
百分比布局弹性盒布局rem布局 重要代码：
移动端布局
：用户不允许缩放
内部控件拥有自己的滚动条：overflow:auto
隐藏滚动条：
::-webkit-scrollbar{
display: none;
}
调整行间距从上面开始显示：align-content: flex-start;
文字居中显示：text-align: center;
flex横向排列不运行被挤压：flex-shrink: 0;
9. 多列布局
目的：实现蘑菇街、小红书这种的，瀑布流布局
多列布局
多列布局案例
赵钱孙礼
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptatibus, obcaecati molestiae deleniti porro tenetur earum doloribus, quibusdam ipsa corporis, officiis assumenda natus inventore amet ducimus quisquam commodi molestias dolor?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat adipisci, ad voluptates modi recusandae at enim illo maiores sint quidem rerum soluta similique, nisi consectetur cumque suscipit sed porro exercitationem!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit vero eos facilis recusandae omnis dolore exercitationem debitis temporibus, illo magni quidem mollitia nesciunt fugiat sequi, non eveniet ex nihil accusantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, minima unde expedita molestias sint eos eligendi asperiores itaque consequuntur magni, consequatur delectus cupiditate sapiente! Ipsa nam provident pariatur illo sint?
10. 响应式布局
常见的布局方案
模块中的内容：挤压-拉（布局不变）
模块中的内容：换行-平铺（布局不变）
模块中的内容：删减-增加（布局不变）
模块位置变换（布局改变）
模块展示方式改变：隐藏-展开（布局改变）
响应式布局特点
设计特点：
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题 缺点：
兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这也是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 媒体查询的含义：
媒体查询可以让我们根据设备显示器的特性（比如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略
媒体查询结构
@media all and (min-width:320px){
body {background-color:blue;}
}
设备类型（默认为all）
screen是媒体类型中的一种，CSS2.1定义了10种媒体类型
and被称为关键字，其他关键字还包括not（排除某种设备），only（限定某种设备）
(min-width:400px)就是媒体特性，其被放置在一对括号中
常用设置
11. 布局单位
px, em, rem 之争
px: 500pxem: 相对单位，相对于父元素的字体大小rem: 相对单位，相对于根元素的字体大小 px转rem插件推荐
js中fontsize计算：fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
vh与vw
vh：view-heightvw：view-width100vh == 视口的高度100vw == 视口的宽度100vw和100%的区别
没有滚动条的时候，可以看作两者等价在有滚动条的时候，100vw包含滚动条，窗口大小占满；而100%是刨除滚动条剩余的空间占满
12. 渐变
CSS3 渐变
CSS3 渐变（gradient）可以让你在两个或者多个指定的颜色之间显示平稳过渡。以前，你必须使用图像来实现这些效果，现在通过使用CSS3的渐变即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。 线性渐变
支持多颜色渐变支持方向：to left、to right bottom…支持任意方向：30deg… 径向渐变
如果效果无法正常显示，需要在radial-gradient函数前加上：-webkit-，火狐浏览器需要加 -moz- 重复渐变：重复线性渐变
太极绘制：
13. 动画
动画过渡属性
注意：display: none /block 无法支持动画过渡
针对该情况的动画制作，可以使用 height:0 的改变来实现，并设置 overflow:hidden
动画过渡类型
样例
动画过渡单一属性
transition-property
现在就可以监控多个属性了比如 transition-property: height background transition-durationtransition-delaytransition-timing-function 2d属性-transform
translate()
使用transform的优点
设置left-合成图层
设置translate-独立图层
scale()
如果设置的是负值，则为倒着的放大或者缩小支持X轴、Y轴单独放大从左上角放大：transform-origin: left top;
改变中心点的位置center、left top、left center… rotate()
正值：顺时针
负值：逆时针
rotateX和rotateY会在三维空间中旋转
rotate = rotateZ 等价
绕着左上角的点旋转：transform-origin: left top;
折扇效果：
- 好运
- 快乐
- 健康
- 顺意
- 平安
- 喜乐
- 暴富
- 升职
- 加薪
- 可爱
- 美丽
- 成功
- 发财
transform的顺序问题：
很尴尬：这里补了一下图片，因为原图片违规了。。。这。。。https://img-blog.csdnimg.cn/d9399dfd5f814eb9bfa5d6538630b133.png
多个属性要写在一个transform中，多个transform会被覆盖属性的顺序需要按照逻辑顺序排列，比如先位移再旋转和缩放 倾斜
skewX：拽着右小角，往右拉动，使得偏离垂直倾斜一定的夹角 关键帧动画
animation和transition的区别
infinite：动画循环执行无限次
animation符合属性，检索或者设置对象所应用的动画特效
transform中的 100% 是相对于自身的100%，所以类似 transform: translateX(-100%); 的写法特别好用
动画只不过是镜花雪月，动画跑完之后就会回到初始的状态。通过设置 animation-fill-mode: forwards 来使动画保留到最后一帧的状态；如果是 backwords，就是保留初始一帧的状态
通过设置 animation: run 1s linear reverse; reverse来实现模块的弹出动画和收回动画
轮播案例
为了实现无缝轮播，通常会把第一张图复制一份放到最后
案例代码：
逐帧动画案例
animation: run 5s steps(1, end);：
steps中的1代表过程是否进行插帧，如果是1的话，不插帧，直接进行跳跃；该值越大，则过渡的帧越多，动画过渡越细腻。end：保留的当前帧，看不到最后一帧，动画结束start：保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧 技巧，使用strep-start（保留第一帧），最后多搞一个空白帧
假设有4个动作，那么需要制作5个帧，每个帧涵盖范围是0-100%，帧间隔则为100/4=25%。类似的背景偏移从0出发，向着负值偏移，累计增加。
样例：
Animate动画库
Animate.css动画演示caniuse.com：查询浏览器版本是否支持的网站 3D场景
transform-style: preserve-3d;：flat是2d舞台；preserve-3d是3d舞台 景深
设置景深是为了实现观察，近大远小的情况
3D位移
3D旋转：transform: rotate3d(0.11, 1, 1, 30deg);
x轴旋转比例y轴旋转比例z轴旋转比例上述比例要乘上的度数 3D缩放
scaleX，scaleY，scaleZ，scale3d使用时需要加上旋转和景深使用
transform-style:preserve-3d; perspective:800px;transform:scaleZ(10) rotateX(45deg); 立方体样例
欢迎涛总莅临检查
14. 网格布局
网格布局的概念和flex布局的区别
容器和项目
行和列
单元格
网格线
网格布局中的属性
含义：网格布局中的属性和flex中的布局属性类似，分为了两类，一类容器属性；一类是项目属性
容器属性
行列划分
功能函数：repeat()
auto-fill关键字（自动填充）配合功能函数使用
grid-template-columns:repeat(auto-fill, 33.33%)
fr关键字（列宽片段）
实践
.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/* 1. 固定值 */
/* grid-template-rows: 200px 200px 200px; */
/* grid-template-columns: 200px 200px 200px; */
/* 2. 百分比方式 */
/* grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%; */
/* 3. repeat */
/* grid-template-rows: repeat(3, 33.3%); */
/* grid-template-columns: repeat(3, 33.3%); */
/* 4. repeat autofill */
/* grid-template-rows: repeat(auto-fill, 300px);
grid-template-columns: repeat(auto-fill, 33.3%); */
/* 5. fr 片段 */
/* grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px; */
/* 6. minmax */
/* grid-template-rows: minmax(100px, 200px) 200px 400px;
grid-template-columns: 200px 200px 200px; */
/* 7. auto */
grid-template-rows: 100px auto 200px;
grid-template-columns: 100px 200px auto;
}
列间距
指定区域
指定区域代码实践：
项目排列顺序
单元格内容对齐（重点：复合属性）
单元格项目对齐（重点：复合属性）
place-content: justify-content align-content 直接配置两个属性place-items: justify-items align-items 同理 项目属性
网格线合并（单一属性）
从项目（items）的角度实现网格的合并（每个跨线的多少）
实践重构
15. 杀青
这里借用kerwin老师的结束语杀青啦：「青青误我，我误青青。书说至此，有始有终。」
只能说感恩、感激千锋教育、感谢kerwin老师分享的课程，受益良多。
天道酬勤、厚积薄发，愿所有的努力都不被辜负。
终于可以开始学js啦，期待已久~
☁️ 我的CSDN：https://blog.csdn.net/qq_21579045❄️ 我的博客园：https://www.cnblogs.com/lyjun/☀️ 我的Github：https://github.com/TinyHandsome🌈 我的bilibili：https://space.bilibili.com/8182822🥑 我的思否：https://segmentfault.com/u/liyj🍅 我的知乎：https://www.zhihu.com/people/lyjun_🐧 粉丝交流群：1060163543，神秘暗号：为干饭而来
碌碌谋生，谋其所爱。🌊 @李英俊小朋友