当容器元素填充内联元素时,浏览器如何决定开始新行还是扩展容器？
假设我有一个容器元素,其行几乎用inline或inline-block元素填充,并且不能保持另一个内联元素,而不调整大小.
浏览器应该如何决定是否可以调整容器大小,扩展它并将新inline元素放入同一行,或者是否应该破坏该行并将新inline元素放在现有元素下面？
如果为容器元素或其父元素设置了一个width或多个max-width属性,那么它非常简单,但是如果这两个元素都没有设置呢？
此外,我对一个特殊情况感兴趣:如果容器元素是bodyor 的直接后代,或者HTML容器元素何时溢出HTML元素的大小并导致浏览器绘制滚动条:
如果我不采取任何特殊措施,通常不会发生超出浏览器视口的溢出; 相反,浏览器插入换行符.我不知道为什么,以及如何强制浏览器在添加内联元素来增加我的容器元素的宽度,但没有明确规定width,min-width等等.
小智 7
请看下面的截图:
.container{display: inline-block; width: auto}为您提供灵活的容器宽度,以适应所有元素.这里的容器被视为<span>
.container{display: block;width: auto} 为您提供全宽容器作为默认行为.
.container{display: block; width: 250px}为您提供密闭容器.任何不适合的东西都会自动换行.
.container{display: block; width: 250px; white-space: nowrap}的white-space: nowrap是CSS属性,允许容器不添加\n的元素.
.container{display: block; width: 250px; overflow-x: auto; white-space: nowrap}最后,overflow-x: auto让您有机会拥有一个原生滚动条.通常,overflow: auto在大多数浏览器中都应该足够了.
一些注意事项:-Zooming不影响容器的行为,因为当页面被缩放时,容器和元素都将被缩放,因此它们被缩放在一起并且不会添加/移除额外的空间.- 堆栈search container溢出具有固定的边距和位置.这不会影响容器内元素的行为方式.无论有多少空间,他们都被告知留在那里.要解决这个问题,可以使用@media screencss属性重新排列堆栈溢出标头中元素的位置.
如果未指定width,则其实际默认值为auto.基本上这意味着元素将占用其父元素的所有可用空间(对于块元素)或其内容的宽度(对于内联块).
天气与否,容器是身体的后代或html并没有真正有所作为.这些元素的默认宽度均为auto.因为html在技术上没有父元素,所以它占用了它可以的所有空间......这恰好是浏览器的窗口.因此,仅当元素的宽度明确定义为宽于其父元素时,才会出现水平滚动条.(尽管您可以使用该overflow属性控制此行为.
我的解释可能不完全正确,但我希望它对你有所帮助.