包含块-行内元素

by cyning sun

HTML

<!--红色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>