什么是网格布局 网格布局能够将网页划分成一个个网格，亦可以组合任意不同的网格。 grid布局是二维布局，而flex布局则是一维布局。grid将容器划分为行和列，产生单元格，通过指定项目所在的单元格。 定义网格布局 定义网格布局很简答，通过display即可设置。 不过与flex布局不同的是，单纯的设置后是无效果的，需要同样为其设置网格布局属性才可以看到效果 gridinline-grid容器内部设置为网格布局，容器为块级元素 div{ display: grid; }容器内部设置为网格布局，容器为行内元素 div{ display: inline-grid; } 网格布局属性 列宽和行高 定义列宽grid-template-columns和行高grid-template-rows用于规定单元格的大小。（类似于width和height） .container { /* 定义网格布局 */ display: grid; /* 定义三列网格，宽度为200px */ grid-template-columns ...

什么是flex布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具体可查看C ...

音频 HTML5中提供的音频API标签为<audio></audio>，使用示例如： <audio src="野狼disco.m4a" controls></audio> 兼容写法 <audio controls> <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'> 您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a> </audio> 当浏览器不支持或者当前音乐地址失效时会分别访问source提供的路径，如果全部失效则提示最下边的文本。 音乐属性 属性名 说 ...