嵌套元素的宽度

Question

1. 默认情况下，CSS Width属性设置为值“Auto”。当Width设置为“Auto”时，元素上使用了什么宽度值？

2. 如果我们在div元素中嵌入一个文本框（<input type="text" />），其宽度小于文本框的宽度，那么文本框的一部分会显示在div元素之外（我认为它被称为溢出，但我不确定）

<div style="width:120px; background-color:Aqua;">
    <input type="text" style="width:1000px;" />
</div>

我意识到处理这个问题的一种方法是嵌套元素将其CSS宽度属性设置为某个百分比值V（0％＆lt; V＆lt; 100％），但是还有一种更优雅的强制嵌套方式元素自动调整其宽度为父元素的宽度，以便它们不会溢出？

Answer 1

  

1）默认情况下，CSS Width属性设置为值“Auto”。当Width设置为“Auto”时，元素上使用了什么宽度值？

这取决于元素。通常，元素将展开以显示其整个内容，除非该扩展会超出现有约束，在这种情况下，约束是其宽度。

  

是否还有一种更优雅的方法可以强制嵌套元素自动将其宽度调整为父元素的宽度，以便它们不会溢出？

你刚刚描述过它。设置width: 100%是让元素填充其父元素的方法。如果要进一步约束嵌套元素的宽度，可以使用max-width和min-width属性，这些属性允许您对具有可变宽度的元素强制执行最大和最小大小。