从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：OPPO商城轮播图 — 今天你学习了吗？（CSS：Day23）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
- 前言
- 第二十四节课：grid布局和音频
- - 一、grid网格布局
  - 二、gird容器属性
  - 三、grid容器属性值
  - 四、grid属性设置单元格距离
  - 五、grid布局容器属性
  - 六、grid容器属性
  - 八、grid项目属性
  - 九、音频

前言

不要问我为什么没有23，因为被我吞了，嗷呜~ ，虎虎生威~

第二十四节课：grid布局和音频

一、grid网格布局

网格布局（Grid）是最强大的CSS布局方案。

它将网页划分成一个个网络，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了。
Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，他们也存在重大区别。
Flex布局时轴线布局，只能指定“项目”针对轴线的位置，可以看作时一维布局。Grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”单元格，可以看作时二维布局。Grid布局远比Flex布局强大。

容器和项目

采用网格布局的区域，成为“容器”。容器内部采用网格定位的子元素，称为“项目”。
这一个点和flex布局很像，就是当我把父元素设置成了flex布局/grid布局，那么里面的直接子元素就会自动变成flex/grid元素，也就是说，父元素就似乎是“容器”，直接子元素就是“项目”。

行和列

如图所示区域，行和列很像表格里面的行和列。

二、gird容器属性

Grid布局的属性分成两类。一类定义在容器上面，称为容器属性：另一类定义在项目上面，称为项目属性。

定义grid布局容器，就是给所需要的元素display：grid/inline-grid
这一个点和flex布局很像。
grid属性值：就是定义此容器为块级元素（常用）
inline-grid属性值：就是定义此容器为行内块元素（不常用）

注意：设为网格布局以后，容器子元素（项目）的float，display：inline-block；display:table-cell，vertical-align和column-*等摄制都将失效。

grid-template-columns属性：grid-template-columns属性定义每一列的宽；
grid-template-rows属性：grid-template-rows属性定义每一行的高。

.container{display:grid;grid-templaye-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}

效果：画了一个3 * 3的表格，每一个单元格的宽高为100 * 100

三、grid容器属性值

除了grid-template-columns/rows的具体属性值之外还有其他属性值：

具体数值grid-template-columns/rows：100px 100px 100px
使用百分比grid-template-columns/rows: 30% 30% 30%;
repeat()：可以解决写重复的代码：repe(列数/行数，单元格大小)
repeat()重复某种模式也是可以的。grid-template-columns:repeat(2,100px 20px 80px);这里就是表示的先100px 20px 80px 后面再重复这个。
auto-fill关键字：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。`grid-template-columns/rows:repeat(auto-fill,100px)
auto关键字，关键字表示由浏览器自己决定长度。grid-template-columns：50px auto 50px;表示：第一列的宽度和最后一列的宽度是50px，中间由浏览器决定。
fr单位，根据容器的宽度浏览器来计算的宽度。
minmax()函数：产生一个长度范围，表示长度就在这个范围之中。他接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(100px,1fr);表示minmax（100px,1fr）表示列宽不小于100px，不大于1fr。

四、grid属性设置单元格距离

grid-column-gap属性：属性设置列与列的间隔（列间隔）
grid-row-gap属性：设置行与行的间距（行间距）
grid-gap属性是grid-column-gap和grid-row-gep的合并简写形式。

语法：

grid-gap: <grid-column-gap> <grid-row-gap>;

注意：
根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap，grid-gap写成gap。

五、grid布局容器属性

grid-template-areas属性：网格布局允许指定区域。
注意：如果某些区域不需要利用，则使用“点”（.）表示。

.container{display:grid;grid-template-columns:100px 100px 100px;grid-template-rows:100px 100px 100px;grid-template-areas:     'a b c''d e f''g h i';
}

六、grid容器属性

grid-auto-flow属性划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的防止顺序是“先行后列”，即先填满第一行，再开始放入第二行。

这个顺序由grid-auto-flow属性决定，默认值是row，即“先列后行”。

除了row和column这两个属性还有一个dense：表示尽可能的紧密填满，不出现空格。

justify-items属性：设置单元格内容的水平位置（左中右）start | end | center | stretch；
align-items属性：设置单元格内容的垂直位置（上下） start | end | center |stretch ；
place-items：align-items属性和justify-items 属性的合并简写形式。place-items：<align-items> <justify-items>;
justify-content属性：内容区域在容器里面的水平位置（左中右）
start | end | center | stretch | space-around | space-between | space-evenly;
align-content属性：内容区域在容器里面的垂直位置（上中下）
start | end | center | stretch |space-around | space-between | space-evenly;
place-content 属性：align-content属性和justify-content属性的合并简写形式。
place-content：<align-content><justify-content>

八、grid项目属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格
grid-row-end属性：下边框所在的水平网格线

.item{grid-column-start: 1;grid-column-end: 3;grid-row-start:2;grid-row-end:4;
}

除了数字之外，还可以使用span关键字，表示“跨越”的意思，跨越了几个，grid-column-start:span 2;

grid-column属性：是grid-column-start和grid-column-end的合并简写形式。
grid-row属性：是grid-row-start和grid-row-end的合并简写形式。

item{grid-column: <start-line>/<end-line>;grid-row: <start-line>/<end-line>;
}

grid-area属性：指定项目放在哪一个区域，也就是之前我们指定的区域。
grid-area属性还可用作grid-row-start，grid-column-start，grid-row-end，grid-column-end的合并简写形式，直接指定项目的位置。

.item{grid-area:<row-start>/<column-start>/<row-end>/<column-end>;
}

justify-self属性：跟justify-items属性用法完全一致，但只作用于单个项目，作为覆盖。
align-self属性：跟align-items属性的用法完全一致，也是只作用于单个项目，作为覆盖。
place-self属性：place-self属性是align-self属性和justify-self属性的合并简写形式。语法：placs-self：<align-self> <justify-self>;

九、音频

HTML5音频标签和视频标签
在HTML5之前，要在页面嵌入音频和视频，只能使用<object>和<embed>元素，这种嵌入方式不仅给Web前端开发带来了一定的困难，同时，用户在进行音频视频播放的时候，碧玺要安装浏览器插件才能播放音频，这样就不方便用户的使用。

座椅在HTML5中，新增了两个元素：audio元素和video元素，其中audio元素专门用来播放网络上的音频数据，而video元素专门用来播放网络上的视频或电影。使用这两个元素，就不需要使用其他的插件了，只要支持HTML5的浏览器即可。同时，在开发的时候，也不在需要object元素和embed元素编写复杂的代码了。

audio元素定义

浏览器能够支持的编译器不一致，为了确保一个视频能够同时被所有支持HTML5的浏览器支持，可以通过source元素来为同一个视频指定多个源。

<body><audio src="./music/大柯 - 喜欢.mp3" controls></audio><audio controls><source src="./music/大柯 - 喜欢.mp3"></audio><video src="./music/IU-strawberry moon(标清).mp4" controls></video><video controls><source src="./music/IU-strawberry moon(标清).mp4" type="audio/mp4"></video>
</body>

audio和video元素的常用属性

属性	值	描述
autoplay	true/false	设置或返回音频、视频是否在加载后立即播放
controls	controls	指定是否为音频、视频添加浏览器自带的播放控制条
loop	loop	指定是否循环播放、默认为不循环
preload	none/metadata/auto	表示音频视频是否进行预加载。none表示不进行加载；metadata表示只加载媒体的元数据；auto（默认）表示加载全部音频或视频
src	URL	指定音频或者视频文件的URL
width、hight	像素	为video元素的独有属性，用来指定视频的宽度和高度。

预习：从零开始学前端：标签渐变和媒体查询 — 今天你学习了吗？（CSS：Day25）

------叠叶与高节，俱从毫末生。

从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）相关推荐

从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
从零开始学前端：链接跳转 --- 今天你学习了吗？（CSS：Day03）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:HTML的一些文本格式化标签.快捷键.和特殊符号 - 今天你学习了吗?(CSS:Day02) 文章目录从 ...
从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录从零开始学 ...
从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：表格制作 --- 今天你学习了吗？（CSS：Day04）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:链接跳转 - 今天你学习了吗?(CSS:Day03) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...

从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）