关于前端:零基础教你学前端85高度自适应

这节课，咱们学习如何让元素的宽度和高度在容器里自适应。

什么是宽高自适应呢？

页面里有两个 div，开始的时候宽度都是 800px，当咱们将浏览器窗口的宽度拖动到小于 800px 的时候，咱们发现：下面的 div 宽度固定，一部分被暗藏在屏幕外；上面 div 的宽度会主动适应 屏幕宽度放大 的变动。

咱们把这种元素的宽或高，可能随着屏幕的宽高变动而变动的能力，叫做宽高自适应。

上面，咱们就通过代码来实现元素的宽高自适应。

创立文件 adaptive.html 文件和 adaptive-style.css 文件。在 html 里构建根本代码，引入内部款式。

在 css 文件里定义通用选择器，申明款式 box-sizing: border-box，margin: 0，padding: 0，定义所有元素的盒模型为 border-box，并去除浏览器默认的内填充和外边距。

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

再定义选择器：html, body，申明款式：height: 100%。这是咱们以前熟知的款式定义，目标是让 body 的高度撑满整个屏幕。为了使成果更显著，咱们给 body 增加一个边框。

CSS
html, body {height: 100%;}

body {border: 3px solid #ccc;}

在浏览器里关上页面，当咱们高低缩放浏览器窗口时，发现 body 的高度自适应窗口高度的变动。再举个例子：

回到 html，增加元素 div，定义类属性 box。回到 css，定义选择器 .box，申明款式 width: 800px，height: 50px，margin: auto，border: 6px solid #73AD21。

CSS
.box {
  width: 800px;
  height: 50px;
  margin: auto;
  border: 6px solid #73AD21;
}

回到浏览器，咱们看，容器程度居中，这是因为 margin: auto 款式会使外边距均分程度方向残余的空间，这个常识咱们后面曾经学过了。

当咱们程度拖拽浏览器窗口时，发现容器始终位于页面两头。可当浏览器窗口宽度小于容器宽度时，容器超出了 body，呈现了程度滚动条。

回到 css，将 box 的 width 批改为 50%。

CSS
.box {width: 50%;}

再看一下成果，无论咱们怎么拖拽窗口，容器的宽度始终是 body 宽度的一半，做到了宽度自适应。

可见，将 width 和 height 的值设置为 %（读作百分比），能够实现元素的宽高自适应。

回到 css，咱们再换个办法实现宽高自适应。批改 box 的 width 为 100%，height 也为 100%。

此时，容器会铺满整个 body，随着窗口的缩放而缩放。能不能使容器宽高缩放到一个固定的大小，就不再缩放了呢？

回到 css，给 box 增加款式 max-width: 800px。max-width，顾名思义，最大宽度为 800px。意思是，即便给容器定义了 100% 的宽度值，它最大的缩放宽度也不能超过 800px。

成果显示，容器横向不再铺满整个屏幕了。放大容器宽度，当低于 800px 时，容器依然能够自适应宽度。

同理，也能够增加一个 max-height: 800px，定义最大伸缩高度。

这样，缩放窗口时，容器就只在 800 x 800 的空间内缩放了。

当然，也能够通过 min-width 和 min-height 来定义容器缩放的最小值。比方都设置为 600px。

咱们看，容器随着窗口放大到 600 x 600，就不再放大了。

CSS
.box {
  max-width: 800px;
  max-height: 800px;
  min-width: 600px;
  min-height: 600px;
}

可见，通过 max-width，max-height，min-width，min-height 能够设置元素宽高自适应的临界值。

本篇文章配套教程链接：https://www.bilibili.com/vide…