零基础教你学前端——85、高度自适应

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

什么是宽高自适应呢?

页面里有两个 div,开始的时候宽度都是 800px,当我们将浏览器窗口的宽度拖动到小于 800px 的时候,我们发现:上面的 div 宽度固定,一部分被隐藏在屏幕外;下面 div 的宽度会自动适应 屏幕宽度缩小 的变化。

我们把这种元素的宽或高,能够随着屏幕的宽高变化而变化的能力,叫做宽高自适应。

零基础教你学前端——85、高度自适应_第1张图片
下面,我们就通过代码来实现元素的宽高自适应。

创建文件 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 的高度自适应窗口高度的变化。再举个例子:
零基础教你学前端——85、高度自适应_第2张图片
回到 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,出现了水平滚动条。
零基础教你学前端——85、高度自适应_第3张图片
回到 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...

你可能感兴趣的:(前端html)