为HTML页面添加视频、音频的方法-零基础自学网页制作

频、视频的格式

开始学习之前，我们要下载些素材用来测试使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

提取码：td80

其中包括两个视频一个音频和一个安装程序。

学习如何在页面中添加音频、视频之前应该了解一点基础知识。

我们应该都有在互联网上下载电影、视频、音乐的经历，大家会注意到，有的视频文件名的后缀是.avi，有的视频是.mp4，还有.mov的，据不完全统计，常见的各种视频格式有十几种之多。

常见的音频的格式比起视频来会显得少一些，一般是.wav和.mp3格式。

为什么存储相同的内容可以有这么多不同的格式呢？

格式产生的核心在于对音频、视频等多媒体文件进行的不同编码方式。

那什么是编码呢？

简单来说我们可以把"编码"这个词分成两个部分，第一个是"编"，也就是"整理、组织"的意思，第二个是"码"，也就是我们平时所说的"数码"。

首先说"码"，我们的计算机中的数据最终都是通过二进制的数字（0和1）来存储或计算的，这些0或1就是数码。无论代码、程序、图片、音乐、视频、文字等的存储与计算都不例外。不管多么复杂或简单的文件，在计算机看来，都是一大堆0和1。

一个0或1被称为1比特，图片或视频中的一个黑白像素通常是8比特（八位），如果一张1080乘720个像素的图片所占内存的大小就是1080*720*8=6220800字节，约等于0,74mb。如果一个视频每秒中有25帧，也就是一秒钟在我们眼前闪过25张图片（视频播放实际上就是在我们眼前快速的更替图片，这些图片在大脑中会被自动连成动作，这也是小的时候在课本的角上画好一套走路的小人的不同动作后，快速翻动书页，画面中的小人会走路的原因，大家可以自行百度"视觉暂留原理"）。

一秒钟25张1080乘720的图片的视频，一秒钟就会占0.74*25=18.5mb的内存。如果是一分钟呢，18.5*60=1110mb约等于1.08gb。这样的数据量是不是很吓人。

但事实上我们下载的1080*720的一小时三十分钟左右的视频的体积往往也没有超过1gb，这又是为什么呢？

这就是"编"的功劳！对数码进行整理和组织的主要目的是压缩体积，压缩数据体积既能节省磁盘又能方便传播与携带，是信息技术的关键技术之一，压缩的方法一般有两类，一类叫做无损压缩，也就是通过对这一大堆数码进行一个特殊的组合使其占有更小的空间，一类叫做有损压缩，是在无损压缩的基础上剔除掉人眼睛识别不到的冗余信息。具体的压缩过程涉及到很多数学知识，这里大家简单了解一下即可。

压缩后的视频或音频文件最终通过播放器对该文件的压缩算法进行逆向运算后，还原成计算机可以解读的画面和声音再呈现给观众，这个过程叫做"解码"。

通过"编"的方式压缩文件体积，通过"解"的方式再还原出文件内容成了处理大规模数据的通用手法。

不同的编码和解码方式催生出不同的文件格式，这种情况下，浏览器在播放视频的时候就要有应对不同格式的不同解码方式，在15年以前，浏览器为了能够播放不同格式的视频，就要调用电脑中不同的播放器，这个过程的写法非常麻烦。随着技术不断地整合，时至今日，在页面中播放视频不需要这么复杂的写法了，但是因为每个浏览器都不是包打一切，因此，虽然不用指定播放器，但是也要预设不同格式的视频来应对不同的浏览器。

因此，我们在这一部分的学习中除了讲解如何向页面添加不同格式的音视频外还会告诉大家如何为音视频转换格式。

为页面添加音频、视频

添加音频使用<audio></audio>标签，这个标签被所有浏览器支持，是html5推荐的音频导入标签，但是遗憾的是在html4标准中是不被支持的或者说是非法的。

这里给大家简要介绍一下html5和html4的区别。

简单来说呢，一个html文件的第一条语句是<!DOCTYPE HTML>，它就是HTML5标准的文件。如果是html4，它的第一条声明语句有三种写法，像这样

一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

二：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

三：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

原文链接：https://blog.csdn.net/yh1061632045/article/details/81518141

这让我想到了孔乙己的"茴"字的多种写法

是不是很麻烦，其实html5比html4更简单，功能更强大，而且我们一直以html5的标准进行学习，所以大家不必纠结。

下面我们导入一个音频试试吧。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>音视频导入</title>
  </head> 
  <body>
  <audio controls="controls"> 
    <source src="audio/千年的祈祷.mp3" type="audio/mp3" />
  </audio>
  </body> 
  </html>

页面效果如下：

其中controls属性就是用来显示播放控制界面的，就是这个：（偷懒的话可以写成"controls"就ok，不必加"="以及后面的内容了。）

如果以后您使用自己编写的控制界面，就可以不添加这个属性。

删掉这个属性后就是这样：这样为自定义的播放控制界面留出了位置。

<audio></audio>标签夹着<source>标签，一个<audio></audio>标签中可以添加多个<source>用以支持不同的格式要求。示例代码如下：（这段代码来自w3school）

<audio controls="controls"> 
  <source src="song.ogg" type="audio/ogg" /> 
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.<!--你的浏览器不支持这个音频元素-->
</audio>

type属性是告诉浏览器音乐文件的类型。

不同格式的文件的生成需要我们自己去做，这就涉及到如何给一个音频文件进行格式转化的问题。这个问题我们明天再说，今天先学习为页面添加音频和视频。

下面我们来看一下视频的导入方法，示例代码如下：

<video controls> 
  <source src="video/阿塔丽.mp4" type="video/mp4" />
</video>

页面效果如下:

我们可以通过设置height和width属性来控制视频的面积。实例代码如下：

<video controls width="850" height="500" > 
  <source src="video/阿塔丽.mp4" type="video/mp4" />
</video>

页面效果如下：

视频画面变小了，和视频并排的是我们之前添加的音频文件，由此可知，这两个元素都是内联元素。

今天的内容结束了，明天我们继续学习格式转换和为不同浏览器预设不同音视频格式的方法。

如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

lt;div>块元素基础属性讲解

<div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。

在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。

那时，大街小巷上有好多网吧。

那时，马云刚刚辞去工作准备创业。

那时，发送邮件的操作都会出现在计算机课程中。

那时，对页面还没有现在的跨平台要求。

那时，flashplayer大行其道。

那时，dreamwaver、flash、fireworks被称为网页三剑客！

那时，制作网页可以不用懂的html的写法！

第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。

那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。

因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的！

也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。

直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现（这类适应多平台的页面布局叫做响应式布局），<table>表格制作的页面在响应式布局大行其道的今天，用它布局的页面开始出现代码冗余，维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。

从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。

dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。

这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想告诉大家，学习任何计算机技术，我们可以从简单易学的方式入手，但要有透过这种方式向下挖掘核心知识的决心和勇气！对于自己从事的工作我们不能满足于会做，还要尽量透析它的原理，这样才能在技术换代中不会被轻易淘汰。

在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。

从此我开始学习数学。因为老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。

向下挖掘虽然很难，但是有必要！与各位共勉！

下面开始今天的内容。

首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。

如图：

下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：

<body><div></div></body>

我们看看效果：

啦啦啦，什么都没有！

为了让大家可以看出来不同，我们为<div>添加边框属性！

我们使用style属性为<div>添加边框，style属性里的代码就是以后在CSS中使用的代码！实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程，这里不再赘述。

示例代码如下：（通过style = "border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！）

<div style = "border-style: solid;">

效果如图：

因为里面没有内容，所以<div>的宽度是0，因此显示的就是一条直线。下面我们向<div>中添加内容。

为了看起来花哨些，加张图片吧！

示例图片

示例代码如下：

<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%；"></div>

大家请按照<img>中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2（路径详解）——零基础自学网页制作》

效果如下：

其中，我们也是使用了style的方式为<img>设置的宽度，这个设置方法在<div>中一样使用！

代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！

<div style = "border-style: solid; width:50%;">
  <img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
    </div>

效果如图：

整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。

为了方便观看，我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示，我们在新的<div>中添加一段文字！

示例代码如下：

<div style = "border-style: solid;">
  <img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
    <div>
    <p>学习网页制作非常有趣！</p>
</div>
</div>

效果如下：

如果为了美观，我们让文字到图片右边的空间中怎么做呢？

示例代码如下：

<div style = "float:right;"><p>学习网页制作非常有趣！</p></div>

我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。

页面效果如图：

大家思考一下如何让图片与文字都靠在左边呢？

是不是为图片style添加float:left;同时把新<div>的float改为left？

我们试试看！

示例代码如下：

<div style = "border-style: solid;">
  <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>学习网页制作非常有趣！</p>
</div>
</div>

页面效果：

效果完全不对，图片和文字跑到外边来了。

这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。

示例代码如下：

<div style = "border-style: solid;">
  <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>学习网页制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>

页面效果如下：

值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。

代码如下：

<body>
  <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
    <p style = "float:left;">学习网页制作非常有趣！</p>
</body>

页面显示效果如下：

大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！

现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。

疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。

在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。

width 属性

首先要讨论的是与宽度相关的属性。我们有min-width和max-width，它们中的每一个都很重要，都有自己的用例。

Min Width

设置min-width的值时，其好处在于防止width属性使用的值变得小于min-width的指定值。请注意，min-width的默认值是auto，它解析为0。

让我们举一个基本的例子来说明这一点。

我们有一个按钮，里面有一个变化的文本。文本的范围可能从一个单词到多个单词。为了确保即使只有一个单词，它也有最小宽度，应该使用min-width。

最小宽度为100px，这样即使按钮的内容很短，比如Done，或者只有一个图标，它仍然足够大，可以被注意到。在使用阿拉伯语等多语言网站时，这一点非常重要。考虑以下来自Twitter的示例：

在以前的情况下，按钮上带有单词“تم”，表示完成。按钮的宽度太小，因此在后面的案例中，我增加了它的最小宽度。

min-width 和 padding

在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。

Max Width

在设置max-width值时，它的好处在于防止width属性使用的值超过max-width的指定值。max-width的默认值是none。

max-width的常见且简单的用例是将其与图像一起使用。考虑以下示例：

图像比它的父元素大。通过使用max-width: 100%，图像的宽度不会超过其父图像的宽度。如果图像比父图像小，则max-width: 100%不会对图像产生实际影响，因为它比父图像小。

使用最小宽度和最大宽度

当min-width和max-width都用于一个元素时，它们中的哪一个将覆盖另一个?换句话说，哪个优先级更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值为100px，并在其上加上min-width和max-width值。结果是元素宽度未超过其包含的块/父元素的50％。

height 属性

除了最小和最大宽度属性外，我们还具有与高度相同的属性。

min-height

设置min-height的值时，其好处在于防止使用的height属性值变得小于min-height的指定值。请注意，最小高度的默认值为auto，它解析为0。

我们用一个简单的例子来演示一下。

我们有一个带有描述文本的部分。目标是为section设置一个最小高度，这样它就可以处理短或长内容。考虑下面的基本情况

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度为100px，使用flexbox时，内容水平和垂直居中。如果内容更长，会发生什么？例如一段？

是的，你猜对了!section的高度将展开以包含新内容。有了它，我们就可以构建灵活的组件，并对其内容做出响应。

事例源码:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

max-height

在设置max-height值时，它的好处在于防止height属性使用的值超过max-height的指定值。注意，max-height的默认值是none。

考虑下面的示例，其中我为内容设置了max-height。但是，因为它大于指定的空间，所以会发生溢出。因此，文本超出了其父边界。

最小和最大属性的用例

我们将介绍min-width，min-height，max-width和max-height的一些常见和不常见的用例。

标签列表

当有一个标签列表时，建议限制一个标签的最小宽度，这样如果它的内容很短，它的外观就不会受到影响。

通过具有这种灵活性，无论内容有多短，标签都将看起来不错。但是，如果内容作者输入了一个非常长的标签名称，而他使用的内容管理系统没有标签的最大字符长度，将会发生什么情况呢？我们也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通过使用max-width，标签宽度将被限制为特定值。但是，这还不够，标签名称应被截断。

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按钮

对于按钮的最小值和最大值有不同的用例，因为按钮组件有多种变体。考虑下面的图：

请注意，按钮的“Get”宽度太小。如果不设置最小宽度，则由于任何原因而没有文本时，情况可能会变得更糟。在这种情况下，设置最小宽度很重要。

使用 flexbox 将最小宽度设置为零

min-width的默认值是auto，它被计算为0。当一个元素是一个flex项时，min-width的值不会计算为零。flex 项目的最小大小等于其内容的大小。

根据CSSWG：

默认情况下，flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。要更改此设置，请设置min-width或 min-height属性。

考虑下面的例子

这个人的名字有一个很长的单词，这导致了溢出和水平滚动。尽管如此，我还是在标题中添加了下面的CSS来截断它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于title是flex项目，因此解决方案是重置min-width并将其强制为零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修复后的样子

根据CSSWG：

在弹性项目的主轴上可见溢出的项目上，当在弹性项目的主轴min-size属性中指定时，指定自动最小尺寸。

意味着，将overflow设置为visible值以外的值会导致min-width被计算为0，这解决了我们不设置min-width: 0的问题。

事例源码：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

使用 flexbox 将最小高度设置为零

虽然与min-width相比，这是一个不太常见的问题，但是它可能发生。只是为了确认，问题与不能少于其内容的弹性项目有关。结果min-height值被设置为与内容一样长。

考虑以下示例：

用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通过向面板主体添加min-height: 0，这将重置该属性，并且现在应该可以正常工作。

事例源码：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

混合最小宽度和最大宽度

在某些情况下，我们有一个最小宽度的元素，但同时，它没有最大宽度。这可能会导致组件太宽，而我们并不想这样做。考虑以下示例

由于宽度是以像素为单位定义的，因此不能保证上面的方法适用于移动视口。为了解决这个问题，我们可以使用百分比来代替像素作为最小和最大属性。考虑下面这个具有article主体的示例。

我为图像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源码:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　页面包装器/容器

最常用的｀max-width｀用例之一是页面包装器或容器。通过向页面添加最大宽度，我们可以确保内容对用户来说是可读的、易于浏览的。

下面是一个包装器的例子，它是居中的，左右两边有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大宽度和ch单位

ch 是一个相对于数字0的大小，1ch 就是数字 0 的宽度。如定义一个3ch的宽度，那么就只能装下 3个0。

<!-- HTML代码 -->

<div>0000</div>

/* CSS代码 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，我们可以利用ch单元，因为它是一个article 主体。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

对高度未知的元素进行动画处理

在某些情况下，我们面临着使手风琴或移动菜单具有意想不到的内容高度的挑战。在这种情况下，max-height可能是一个很好的解决方案。

请考虑以下示例：

单击菜单按钮后，菜单应随动画从上到下滑动。如果没有固定的高度（不建议这样做），除非使用JavaScript，否则这是不可能的。但是，对于max-height，这是可能的。想法是为高度添加一个较大的值，例如max-height：20rem，可能无法达到，然后我们可以使用动画从max-height: 0变换到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

点击菜单按钮可以看到动画的运行。

事例源码：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一般来说，我不喜欢给元素添加固定的高度。我觉得这样做，会破坏流式布局的结构。但有些情况设置固定高度却很有用。

考虑下面的例子，在这里我们有一个设置了固定高度的hero部分。

是，当内容较长时，它会溢出并离开hero包装器，这可不太好。

为了预先解决这个问题，我们可以使用min-height来代替height。我们可以用这种方式先解决问题，尽管这可能会导致页面看起来很奇怪，但是我认为应该首先防止内容管理系统(CMS)中发生这样的事情。这样，问题就解决了，看起来也不错。

内容溢出的问题不仅在于内容是否大于固定的hero 高度。它可以发生在屏幕大小调整作为文本换行的结果。

如果改用min-height，则上述情况根本不会发生。

模态组件

对于模态组件，它需要最小和最大宽度，以便可以适应移动设备到PC的屏幕上的适应。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

对于我来说，我更喜欢第二个思路，因为我只需要定义max-width: 600px。modal是一个<div>元素，因此它已经具有其父元素的100％宽度，对吗？

考虑下面为模态设计简化的测试案例。请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。

事例源码：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

最小高度和粘性页脚

当一个网站的内容不够长，它希望看到页脚粘到底部。让我们用一个可视化的例子来更好地展示这一点。

请注意，页脚未粘贴在浏览器窗口的末尾。那是因为内容不足以达到浏览器窗口高度的长度。修复后，其外观应如下所示：

首先，将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％。

事例源码：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

最大宽度/高度和视口单位的流体比率

为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。

我们有一个尺寸为644 * 1000像素的图像。为了使其流畅，我们需要以下内容：

纵横比：高度/宽度
容器的宽度：可以是固定数字，也可以是动态数字（100％）
设置height为视口宽度的100％乘以纵横比
设置max-heigh，该高度是容器的宽度乘以纵横比
max-width设置为等于容器宽度

人才们的【三连】就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

作者：Ahmad shaded 译者：前端小智来源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

在线咨询

上一篇：HTML5(九)-超强的 SVG 动画
下一篇：HTML头部 <head>

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

为HTML页面添加视频、音频的方法-零基础自学网页制作

HTML完整学习目录

lt;div>块元素基础属性讲解

HTML完整学习目录

width 属性

Min Width

min-width 和 padding

Max Width

使用最小宽度和最大宽度

height 属性

min-height

max-height

最小和最大属性的用例

标签列表

按钮

使用 flexbox 将最小宽度设置为零

使用 flexbox 将最小高度设置为零

混合最小宽度和最大宽度

最大宽度和ch单位

对高度未知的元素进行动画处理

Hero 元素的最小高度

模态组件

最小高度和粘性页脚

最大宽度/高度和视口单位的流体比率

您的项目需求