css中怎么让模块自适应

在网页开发中，有些模块需要自适应其父级容器的大小。比如图片、文本框等元素，它们需要根据其所在的容器大小调整自己的大小及位置。这就需要使用CSS中的自适应布局技术。

CSS中自适应布局主要是通过盒子模型和弹性盒子两种技术来实现。

/* 盒子模型 */
.box {
  width: 100%;
  height: auto;
} 

盒子模型是一种传统的自适应布局技术，它是基于CSS的盒子模型来实现的。在盒子模型中，元素的大小和位置是由其父级容器的宽度和高度来决定的。如果设置元素宽度为100%，就可以让元素自适应其父级容器的宽度。而如果设置元素高度为auto，则可以让元素自适应其内容的高度。

/* 弹性盒子 */
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1;
} 

弹性盒子是一种新型的自适应布局技术，它是基于CSS3中新增的flex属性来实现的。在弹性盒子中，元素的大小和位置是由其所在的弹性容器的排列方式来决定的。如果设置弹性容器为水平排列，就可以让元素按照一定的比例分配其宽度；如果设置弹性容器为垂直排列，则可以让元素按照一定的比例分配其高度。

总结来说，CSS中的自适应布局技术可以让网页开发者更加灵活地进行网页布局，使得页面在不同尺寸的屏幕上都可以呈现出良好的效果。