注意：为了让页面能跟随页面的縮放而跟着一起缩放我用了百分比来设置宽高，但此处的高（height）用百分比是不行的而要用padding-bottom，为什么呢

 ↓↓↓↓↓原因↓↓↓↓↓

高喥height的百分比相对于父元素的高度，父元素默认是没有高度的如果不给父元素一个高度，子元素也不会有高度在普通文档流中，块级元素的宽度默认是浏览器的宽度因此百分比有效。也就是为什么子元素有宽度而没有高度padding-bottom和padding-top的百分比是相对于父元素的宽度，而不是高喥因此设置了padding-top或者padding-bottom百分比的子元素，其高度就不再依赖于父元素高度了由于padding-bottom和padding-top的百分比是相对于父元素的宽度，当屏幕大小出现变化時元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。