由布局学习CSS——从两列布局来看position：absolute的用法

在两列布局中，常常会拥有这样一个需求：左边的一列固定的宽度和高度，右边一列的高度和宽度都不确定，要求自适应。

砍材不误磨刀，在谈position：absolute之前，有几个概念是需要我们理解的，对于部分概念，在前面的文章已经提到过，直接给链接。

包含块：http://www.w3help.org/zh-cn/kb/008/

绝对定位：绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。绝对定位元素完全脱离了常规流（对后继的兄弟节点没有影响）。常规流中的框，都在同一个层上，浮动框是处于常规流之上的一个特殊层，它可能会对常规流中的框的定位产生影响。但绝对定位的框不会， 每个绝对定位的框都可以看做一个单独的图层，不会对其他层框的定位产生影响。

当position：absolute时，未设置left等值和设置left等值为0的区别:这个问题在前段时间困扰了自己很久，最后发现一个问题，在W3c上有关于这个的讲解。当left和top没有设置时，它们的值默认为auto。而对于auto值的计算，在w3c的“10.3.7 Absolutely positioned, non-replaced elements”（http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width）有讲解到。大家看了可能会晕，不过总的来说，个人觉得可以一句话概之： if all four sides of an AP element are auto, then this AP element is pasted onto the spot where it would go had it been non-AP, while remaining on its own layer.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css" rel="stylesheet">
        
        </style>
    </head>
    <body>
        <div style=" width:300px; height:300px; background:#000; margin-left:200px;">
            <div style="position:absolute;  margin-left:100px; background:#F00; width:50px; height:50px;"></div>
        </div>
        <div style=" width:300px; height:300px; background:green; margin-left:200px;">
            
            <div style="position:absolute;  background:yellow; width:50px; height:50px; margin-left:20px;"></div>
            <div style="position:absolute;  margin-left:10px; background:#F00; width:50px; height:50px; left:20px; top:auto;"></div>
        </div>
    </body>
</html>

分析：在上面的代码中可以看见绿色大包含块中拥有黄色和红色的两个小方框，红色和黄色的小方框的top和bottom都没有设置值，这是它们的默认值就是auto，根据上面的结论，两个小方框在垂直方向上就像是一个没有绝对定位的元素，所以它们垂直方向上的位置就是在黑色方框的下方。但是其中的红色方框设置了left：20px，这时红色方框在水平方向上就要去找它的包含框，根据包含框的查找算法，红色的小方框的包含框应该是初始包含块，这里就是html，所以我们可以看见红色小块的位置是在页面左边30px的位置。

应用

（1）两列的自适应布局

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css" rel="stylesheet">
        .image img{width:50px; height:50px; position:absolute;}
        .content{ margin-left:70px;}
        </style>
    </head>
    <body>
        <div style=" width:600px; height:200px; border:1px solid #000; margin-left:200px;">
            <div class="image"> <img src="test.jpg" alt="testPic" title="testPic"/></div>
            <div class="content">
                <dl>
                    <dt>Name:</dt>
                    <dd>Doudou</dd>
                    <dt>Sex:</dt>
                    <dd>Boy</dd>
                    <dt>Habit:</dt>
                    <dd>Footabll,Piano</dd>
                </dl>
            <div/>
        </div>
    </body>
</html>



 



posted @ 2012-03-28 22:00  shawnXiao  Views(1652)  Comments(0)  Edit  收藏  举报