css三个盒子宽度自适应

CSS中的布局是网页设计中非常重要的一部分，以前主要使用表格来实现页面布局，但随着CSS的发展，使用盒子（Box）进行布局的方式越来越受欢迎，它最大的优点是可以使页面布局更加灵活和自适应。在这里，我们将介绍CSS三个盒子（Box）及其宽度自适应的实现方法。

CSS中的盒子包括内容盒子（Content Box）、内边距盒子（Padding Box）、边框盒子（Border Box）和外边距盒子（Margin Box）。在这里，我们只介绍前三种盒子的宽度自适应的实现方法。

1. 内容盒子宽度自适应

.box{
  width:auto;
} 

上述CSS代码将内容盒子宽度设置为自适应，这样，当内容盒子中的内容超出了盒子宽度时，内容会自动换行。

2. 内容盒子和内边距盒子宽度自适应

.box{
  box-sizing:border-box;
  width:100%;
  padding:20px;
} 

上述CSS代码将盒子的box-sizing属性设置为border-box，这样，当设置盒子的宽度为100%时，内边距盒子会自动占据盒子的宽度，而不会超出盒子。

3. 内容盒子、内边距盒子和边框盒子宽度自适应

.box{
  box-sizing:border-box;
  width:100%;
  padding:20px;
  border:1px solid #000;
} 

上述CSS代码将盒子的border属性设置为1px，这样，边框盒子会自动占据盒子的宽度，而不会超出盒子。同时，内边距盒子也会自动占据盒子的宽度，所以，当设置盒子的宽度为100%时，内边距盒子和边框盒子都不会超出盒子。

总之，使用CSS的三个盒子（Box）进行网页布局可以使页面更加灵活和自适应，对于响应式设计更是不可或缺的一个工具。