Contaning Block

来源：互联网发布：单片机控制12v继电器编辑：程序博客网时间：2024/06/14 21:06

元素的定位和尺寸，与其包含块有关，而元素会为它的子孙元素创建包含块，所以包含块的意义很重要，包括宽度高度自动值的计算，浮动元素的定位，绝对元素的定位，不了解包含块，就掌握不好后面的理论。

下面特定写了一点例子来演示，当元素的position为absolute，而其包含块是一个行内元素的时候，如何确定其包含块的位置，html和css如下：

<p style="border:1px solid red; width:200px; padding:20px;">    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;">    Teeevrrrrrrrrrrrrrr    <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>

效果：

0 0