css中流体布局是什么意思

流体布局是指网页的布局会随着浏览器窗口大小的变化而自动调整，从而实现页面在不同设备上的适应性。CSS中，流体布局通常通过百分比、em、rem等相对单位来实现，从而将网页中各元素的尺寸和位置与浏览器窗口大小相对应。

/*使用百分比实现流体布局*/
.container{
  width: 90%; /*容器宽度为浏览器窗口宽度的90%*/
  margin: 0 auto; /*居中显示*/
}

.box{
  width: 30%; /*盒子宽度为容器宽度的30%*/
  height: 50px;
  float: left;
  margin-right: 5%; /*右侧间距为盒子宽度的5%*/
}

/*使用em实现流体布局*/
body{
  font-size: 16px; /*设置body基础字体大小*/
}

.box1{
  width: 10em; /*盒子宽度为body字体大小的10倍*/
  height: 3em;
}

.box2{
  width: 20em; /*盒子宽度为body字体大小的20倍*/
  height: 6em;
}

/*使用rem实现流体布局*/
html{
  font-size: 16px; /*设置html基础字体大小*/
}

.box3{
  width: 20rem; /*盒子宽度为html字体大小的20倍*/
  height: 5rem;
}

.box4{
  width: 30rem; /*盒子宽度为html字体大小的30倍*/
  height: 7.5rem;
} 

通过使用流体布局，可以使网页在不同的屏幕尺寸和分辨率下具有良好的显示效果，适应不同的设备和用户需求，提升网页的用户体验和可访问性。