CSS 宽度100% 包括 overflow

在本文中，我们将介绍CSS中宽度设置为100%时，如何处理包含overflow的情况，以及相关示例说明。

阅读更多：CSS 教程

宽度设置为100%的基本原理

在CSS中，可以使用width属性来设置元素的宽度。当设置为百分比值时，宽度将相对于其父元素的宽度进行计算。而100%则表示元素的宽度将与父元素的宽度相等。

处理含有overflow的情况

当元素的宽度设置为100%时，如果父元素的宽度包含了padding和border，那么元素的实际宽度将超出父元素的宽度。此时，如果设置了overflow: hidden;属性，元素的超出部分将被隐藏，不会对其他元素造成影响。这在一些导航菜单或者图片列表等场景中非常实用。

.parent {
  width: 300px;
  overflow: hidden;
}

.child {
  width: 100%;
  height: 100px;
  padding: 20px;
  border: 1px solid #000;
}

上面的示例中，父元素的宽度为300px。子元素的宽度设置为100%，加上padding和border，实际宽度为342px。但由于父元素设置了overflow: hidden;，子元素的超出部分将被隐藏。

使用box-sizing属性解决宽度超出问题

除了使用overflow: hidden;隐藏超出部分外，我们还可以使用box-sizing属性来解决宽度超出问题。box-sizing属性有两个常用的取值：content-box和border-box。其中，content-box表示元素的宽度仅包含内容，不包括padding和border；而border-box表示元素的宽度包括内容、padding和border。设置为border-box后，无论元素的宽度如何设置，都不会超出父元素的宽度。

.parent {
  width: 300px;
  overflow: hidden;
}

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

在上面的示例中，父元素的宽度依然为300px。子元素的宽度设置为100%，但由于box-sizing属性被设置为border-box，实际宽度仍然为300px，不会超出父元素的宽度。

使用calc()函数调整宽度

在一些场景中，我们希望元素的宽度设置为100%，但又需要在一定程度上调整宽度。这时可以使用calc()函数来动态计算宽度。

.parent {
  width: 300px;
  overflow: hidden;
}

.child {
  width: calc(100% - 40px);
  height: 100px;
  padding: 20px;
  border: 1px solid #000;
}

在上面的示例中，子元素的宽度使用了calc(100% - 40px)，表示减去了40px的宽度，实际宽度为260px。

总结

CSS中宽度设置为100%时，如果包含了overflow，我们可以通过设置overflow: hidden;属性来隐藏超出部分。另外，可以使用box-sizing: border-box;来使元素的宽度不会超出父元素的宽度。此外，还可以使用calc()函数来动态计算元素的宽度。这些方法都可以帮助我们在设置元素宽度为100%时处理overflow的情况，实现所需的布局效果。