css盒子自适应宽度

在网页中，元素的布局和排版是很重要的。而CSS盒子模型就是用来控制元素在页面上的布局和排版的。

在CSS盒子模型中，每个元素都被看成是一个盒子，而这个盒子可以有不同的尺寸，边框，内边距和外边距，这些属性的组合决定了元素在页面中的大小和位置。

.box {
  
  width: auto;
  
  max-width: 100%;
  
  border: 2px solid black;
  
  padding: 10px;
  
  margin-bottom: 20px;
}
 

其中，width: auto;表示盒子的宽度自适应其内容的宽度。如果盒子的内容很少，那么盒子也会很小，而如果盒子的内容很多，那么盒子也会很大。

而max-width: 100%;则表示盒子的最大宽度不能超过其父元素的宽度，这可以保证盒子不会超出页面的宽度，同时也让它自适应于不同设备屏幕的宽度。

通过这些属性的设置，我们可以让盒子自适应宽度，并在不同设备上具有良好的显示效果。