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

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

文章目录

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

前言

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

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

一、grid网格布局

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

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

2. 容器和项目

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

3. 行和列

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

二、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的具体属性值之外还有其他属性值：

1. 具体数值grid-template-columns/rows：100px 100px 100px
2. 使用百分比grid-template-columns/rows: 30% 30% 30%;
3. repeat()：可以解决写重复的代码：repe(列数/行数，单元格大小)
4. repeat()重复某种模式也是可以的。grid-template-columns:repeat(2,100px 20px 80px);这里就是表示的先100px 20px 80px 后面再重复这个。
5. auto-fill关键字：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。`grid-template-columns/rows:repeat(auto-fill,100px)
6. auto关键字，关键字表示由浏览器自己决定长度。grid-template-columns：50px auto 50px;表示：第一列的宽度和最后一列的宽度是50px，中间由浏览器决定。
7. fr单位，根据容器的宽度浏览器来计算的宽度。
8. 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-前缀已经删除，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： ;
• 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：

八、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: /;grid-row: /;}

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

.item{grid-area:///;}

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

九、音频

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

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

2. 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>

3. audio和video元素的常用属性

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

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