本课我们学习如何让容器中元素的宽高自适应。什么是宽高适配？页面中有两个div，一开始宽度为800px。当我们将浏览器窗口的宽度拖动到800px以下时，我们发现上层div的宽度是固定的，有一部分隐藏在了屏幕之外；较低的div宽度会自动适应缩小的屏幕宽度变化。我们把这个元素的宽度或高度随屏幕的宽度和高度变化的能力称为宽高适配。接下来，我们将通过代码实现元素的自适应宽高。创建文件adaptive.html文件和adaptive-style.css文件。在html中构建基本代码，导入外部样式。在css文件中定义通用选择器，声明样式box-sizing:border-box,margin:0,padding:0，定义所有元素的盒模型为border-box，去掉浏览器默认的内边距和外边距.CSS*{框大小调整：边框框；保证金：0；padding:0;}重新定义选择器：html、body，声明样式：height:100%。这是我们之前熟悉的样式定义，目的是让body的高度填满整个屏幕。为了让效果更明显，我们给body加了一个border。CSShtml,body{height:100%;}body{border:3pxsolid#ccc;}在浏览器中打开页面，当我们上下缩放浏览器窗口时，发现body的高度适应了窗户。又如：回到html，添加元素div，定义class属性框。回到css，定义选择器.box，声明样式width:800px,height:50px,margin:auto,border:6pxsolid#73AD21。CSS.box{宽度：800px;高度：50px；保证金：自动；border:6pxsolid#73AD21;}回到浏览器，我们可以看到容器水平居中，这是因为margin:auto样式会让外边距平分水平方向的剩余空间，这个知识我们有以前学过。当我们水平拖动浏览器窗口时，发现容器一直在页面中间。但是当浏览器窗口的宽度小于容器的宽度时，容器就会超出body，出现水平滚动条。回到css，将框的宽度更改为50%。CSS.box{width:50%;}再看效果，不管我们怎么拖动窗口，容器的宽度始终是body宽度的一半，宽度是自适应的。可以看出，将width和height的值设置为%（以百分比形式读取）可以实现元素的自适应宽高。回到css，我们换个方法实现自适应宽高。将框的宽度修改为100%，将高度修改为100%。此时，容器会覆盖整个主体，并随着窗口的缩放而缩放。能不能把容器的宽高缩放到固定大小，然后就不再缩放了？回到css，给方框添加样式max-width:800px。max-width，顾名思义，最大宽度为800px。也就是说，即使您为容器定义了100%的宽度值，其最大缩放宽度也不能超过800px。效果显示容器不再横向覆盖整个屏幕。减少容器的宽度。当低于800px时，容器仍然可以自适应宽度。同样，你也可以添加一个max-height:800px来定义最大拉伸高度。这样，当缩放窗口时，容器只会在800x800空间内缩放。当然你也可以通过min-width和min-height来定义容器缩放的最小值。例如，两者都设置为600px。让我们看看当窗口缩小到600x600时容器不再缩小。CSS.box{max-width:800px;最大高度：800px；最小宽度：600px；min-height:600px;}可见，通过max-width、max-height、min-width、min-height可以设置元素Threshold进行宽高适配。本文配套教程链接：https://www.bilibili.com/video...
