关于未设置父元素宽度的block子元素显示-优快云博客

本文详细解析了块级元素在不同设置下如何响应父元素的宽度变化，包括内容自动换行、子元素设置宽度后的填充行为等。通过具体示例展示了在不同条件下的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果block父元素设置了宽度，而block子元素又没有设置宽度（我的理解是默认为一个单词/汉字的宽度），那么，假如子元素的内容+padding + margin 超过了父元素的宽度，则，子元素的内容将会自动换行，每一行的最小内容为一个单词(汉字)，然后计算该行的内容 + padding + margin，超过父元素的宽度，重复换行操作，直到所有内容显示。这个时候，假如父元素没有设置高度，那么所有的内容都能够正常显示，假如父元素设置了高度，并且高度已经不足于包含内容，所有内容也会显示，但可能会受到周围元素的覆盖。


.sample{
display:block; visibility:visible;
padding:20px 120px;
margin:0 100px;
/*width:100px;*/
border-top: 5px solid gray;
border-bottom:5px solid black;
border-left: 5px solid gray;
border-right: 5px solid black;
background-color:gold; 
}
<div style="width:500px;"><div class="sample">
这是中文这是中文这是中文这是中文这是中文这是中文哦</div></div>

显示结果：

[img]http://dl.iteye.com/upload/attachment/297529/5cb38e4e-f518-359c-8e8f-c42123657542.bmp[/img]

在Firebug里面的显示：（120*2 + 5*2 + 100*2 + 50 = 500）

[img]http://dl.iteye.com/upload/attachment/297533/3b6334c6-bd15-3206-b1bd-390ad166a627.bmp[/img]

内容为英文的情况：

[img]http://dl.iteye.com/upload/attachment/297540/79af5406-b186-3294-893c-66f1bad4a934.bmp[/img]

从结果里面可以看出，block元素里面的内容，都在同一个"box"里面，并且整体就是一个box(只有一条border-top和border-bottom),每一行的内容都应用了padding属性。

另外，假如子元素设置了宽度，那么子元素的内容将填充该宽度:

[img]http://dl.iteye.com/upload/attachment/297538/150c98d6-f3a9-3e68-bb48-b3889ebfdf92.bmp[/img]

我以为inline元素的显示可能会有一些相似的地方，但结果让我找不到规律，疑问查看：
[url]http://mutongwu.iteye.com/admin/blogs/745206[/url]