Question

请看下面的代码段。如何用10px 增加红色容器的宽度？

有没有办法增加CSS中元素的宽度，仍影响父容器？或者我是否必须使用伪元素占位符来实现此目的？

<div style="
     background:blue;
     display:inline-block;
     height:50px">
 <div style="
     font-size:30px;
     width:calc(100% + 20px);
     background:red">
     Inner container</div>
</div>

在上面的代码段中，蓝色容器不受影响，红色溢出。

Answer 1

有没有办法将元素的宽度增加一定量，其中元素本身的宽度直到运行时才知道？

你只能用填充来可靠地做到这一点;但是，填充会影响元素内容的布局，这可能不是您想要的。在您的示例中，填充子元素将影响其中文本的布局;内容宽度从未真正增加。

如果事先不知道元素的内容宽度，则无法将元素的内容宽度更改一定量，并且取决于外部因素，例如实际拥有的内容量，这通常是浮点数，绝对定位元素和内联块。你可以得到的最接近的是一个自动宽度，这对于他们的父母，而不是他们的孩子，只对流入的区块框（不属于上述情况）产生有意义的影响。

事实上，您使用calc(100% + 20px)看到的行为是not governed by the spec，尽管浏览器通常不会陷入循环依赖陷阱：

<强>＆LT;百分比＆GT;
指定百分比宽度。百分比是根据生成的包含块的宽度计算的。如果包含块的宽度取决于此元素的宽度，则CSS 2.1中的结果布局未定义。

（calc()是CSS3，但是盒子模型在CSS2.1中没有太大变化。）

Answer 2

如果我理解正确，您希望增加孩子的初始宽度并添加另一个10px。

但是当你设置这个属性时： width: 100%始终相对于其父级，因此如果您添加与10px相关的其他100%，则始终将10px更大比它的父母。

您可能只想设置min-width和max-width，而不是明确设置其width，以便子项位于某些指定范围内，但要将宽度增加{ {1}}从使用 JUST CSS 开始，不可能。

注意： 请谨慎使用10px ，您必须添加相应的calc，即：

browser-engine property extension

-webkit-calc()
-moz-calc()
calc()

希望这在某种程度上有所帮助，gl。

使用calc（）增加CSS的宽度不会影响父容器

2 个答案: