宽高自适应

1、在前端编程中，最常用的是宽度自适应，只需要body,html{width:100%}，元素宽度使用时都用百分比表示即可，padding,margin,left,right的参照对象都是其父级宽度。

2、充满屏幕可使用特定的单位，宽度 100vw，高度 100vh，使用vw和vh即可按照屏幕自适应，

也可以body,html{height:100%}

3、高度自适应，父级position:relative，元素position:absoulte;top:0;bottom:0;即高度充满父级容器。 position:absoulte;height:60%;  百分数的参照也父级高度。

4、其实对比高度自适应，更常用的是参照其父级宽度，实现宽高同比变换的自适应；此时可以使用position:relative;width:100%;padding-bottom:50%;来制作宽高自适应的容器,使用padding来代替高度，其子元素需要使用position:absoulte;with:100%;height:100%;top:0;left:0; 来进行绝对定位（因为使用padding充当高度，所以是实心容器，要使用绝对定位）