什么是宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整
元素宽高自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不
同分辨率下显示。
相对窗口和父元素的自适应写法
宽度：
当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；
width：100%；
优点：宽度自适应可以让下面这种篇幅很大的图片很好的呈现在可视窗口内，因为宽度没有写出固定的数值在很大的程度上增加了代码的容错率。在初学者中最容易让人崩溃的一种情况就是原本分好的区域，因为一两个像素的差距导致折行，极度的破坏了画面的完整性，并且这个错误的本身非常细小不易察觉，宽度自适应放出了多余的空间给这两个像素添加了容身之所不仅完美的呈现画面同时，还保住因为查找错误而丢失的浓密秀发
书写方式：
标题 高度： html,body{height:100%;}
当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML
和body设置高度100%；
优点：所有的元素例如图片，文字，基础代码，都有着自己的本身默认的高度数值。
例如下图内容区分为了左右两块，左右两块的高度所占区域差别非常大，
右边内容区的文字居多并且分出了很多的段落而且每一块段落的高度数值都不同，
通常为了更高度的还原设计稿，需要每一段文字都加上精确测量的高度数值，这样
在无形中浪费了很多的时间增加了很多不必要的工作量。
高度自适应最大的好处就是无论标签内部有多少内容，呈现画面的时候都会
以内容所需的最低高度显示这样不仅呈现了最完美的画面，同时还放出了最
大的空间方便后期维护。
**书写方式
总结：所以宽高自适应对于页面布局非常重要，可以极大地缩短工作量同时也可以为后期添加内容和维护提供极大的便利
来源：CSDN
作者：weixin_46446341
链接：https://blog.csdn.net/weixin_46446341/article/details/104597605