css宽高盒子自适应

CSS中的宽高盒子自适应是指盒子的宽和高会根据浏览器的大小而自动调整，使页面布局更加灵活。下面是一些常见的实现方法：

/* 设置宽高比例 */
.container {
  width: 100%; /* 盒子宽度占满整个父级容器 */
  padding-bottom: 50%; /* 盒子高度为宽度的50% */
  position: relative; /* 用于绝对定位子元素 */
}

/* 绝对定位子元素 */
.Box {
  width: 100%; /* 占满整个父级容器 */
  height: 100%; /* 占满整个父级容器 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 与父级容器上边缘对齐 */
  left: 0; /* 与父级容器左边缘对齐 */
}

/* 利用vw和vh单位 */
.container2 {
  width: 100vw; /* 盒子宽度占满可视区域 */
  height: 50vh; /* 盒子高度为可视区域的50% */
}

/* 设置max-width或max-height */
.container3 {
  max-width: 100%; /* 盒子宽度最大不超过父级容器 */
  max-height: 50%; /* 盒子高度最大不超过父级容器的50% */
}

总结一下，宽高盒子自适应主要是通过设置盒子宽高比例、利用vw和vh单位、设置max-width或max-height来实现。这些方法能够很好地适应不同大小的浏览器，提高页面的兼容性，是CSS布局中比较重要的技巧。