宽高自适应
定义：网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或者元素自动调整，这就是PC高度自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同的设备、窗口以及分辨率下显示。
一、相对窗口和父元素自适应
宽度：当块状元素不写宽度的时候，默认的宽度就是100%，是父元素宽度的100%；width：100%；
高度：当让元素的高度相对浏览器窗口显示百分比值的时候，一定要给html和body设置高度100%。
1、相对窗口自适应，html，body｛height：100%；｝，全屏显示的页面必须给html和body设置高度100%。
2、相对元素或内容的自适应
如何实现元素高度自适应？
a：如果想实现元素高度自适应，高度能不能设置成固定的值？
b：如果高度不能固定，那怎么设置？
第一种情况
非浮动元素的父元素高度自适应
实现方法：1、不设置宽高或者宽度设置成：height：auto；
2、通过最小高度实现高度自适应：min-height：300px；height：300px；
3、给需要高度自适应的元素添加这些属性：min-height：value；height：auto ！important；height：value；
第二种情况
浮动元素的父元素高度自适应
说明：当父元素不设置高度的时候，第一级元素浮动后，父元素高度塌陷。
解决方法：只要解决高度的显示问题，父元素就能实现高度自适应。
1、给固定高度去解决高度塌陷问题。
弊端：不能让元素实现高度自适应了！
2、overflow：hidden；解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）
3、在浮动元素的下方添加一个空元素，并且给它设置一个属性：clear：both；height：0；overflow：hidden；
弊端：会添加很多空标记，增加结构负担，产生代码冗余。4、display：table；给父元素添加display：table；让父元素转换类型跟表格的特性一样。
弊端：会改变当前元素的元素类型。
5、万能清除法：：after｛content: ‘’‘’;clear：both；display：block；height：0；overflow：hidden；visibility：hidden；｝
来源：CSDN
作者：不愿人间见白头
链接：https://blog.csdn.net/m0_46398200/article/details/104617275