6.9响应式布局和居中显示

响应式布局主要由 ：
弹性布局
弹性图片
媒体和媒体查询
媒体类型的引入方式：
@media 方式
@media 媒体类型 {
                    选择器{
最大宽度和最小宽度
max-width
min-width
当宽度不设置的时候，宽度会自动适应屏幕尺寸
注意：
当设置盒子最大宽度（max-width）时，屏幕的尺寸到达盒子的最大宽度时，盒子的宽度便不会再变大；
当盒子设置了最小宽度（min-width）时，屏幕的尺寸缩小到盒子的最小宽度时，将出现水平滚动条，宽度不再随着屏幕缩小；
一般给html 一个最小的宽度，以保证用户将页面的X轴方向缩小的时候，页面不会出现异常，缩小到设置的最小宽度的的时候X轴方向出现滚动条。
页面的整体宽度和高度：
盒子的宽度不设置的时候，它会自适应屏幕的宽度
而高度如果不设置，那么高度将不显示，
如果需要显示:
必须设置它的所以父元素的高度(当父盒子没有设置固定高度的时候)都设置成100%
vh （viewheight）
100vh 是指100%viewheight ，是指可视范围的100%高度。
90vh=90%viewheight.
当父级盒子的高度设置固定值时候，并且父级盒子的高度大于屏幕的高度时，此时给子盒子设置height:100vh ，子盒子的高度= 屏幕可视高度，父盒子超出屏幕的部分高