<!--红色XX的水平线/竖直线和蓝色XX的水平线/竖直线围成em元素的包含块--> <p style="border:1px solid red; width:200px; padding:20px; float:left;"> T <span style="background-color:#C0C0C0; position:relative;"> 这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p> <!--边界无法围成一个区域,在这种情况下,包含块的宽度是负的。--> <p style="border:1px solid red; width:200px; padding:20px; float:left;margin-left:10px;"> TEXT TEXT TEXT <span style="background-color:#C0C0C0; position:relative;"> 这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p> <!--红色XX的水平线/竖直线和蓝色XX的水平线/竖直线围成em元素的包含块--> <p style="border:1px solid red; width:200px; padding:20px; direction:rtl;float:left;margin-left:10px;"> T <span style="background-color:#C0C0C0; position:relative;"> 这段文字从右向左排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们…… <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p>