1. 程式人生 > >格式化寬度高度和的理解

格式化寬度高度和的理解

格式化寬度僅出現在"絕對定位模型"中,也就是出現在position屬性值為absolute和fixed的元素中,在預設情況下絕對定位元素的寬度表現是"包裹性","寬度由內部尺寸決定",但是有一中情況下我由外部尺寸決定

對於非替換元素,當left/right;top/bottom對立方位的屬性值同時存在的時候,元素的寬度表現為"格式化寬度",其寬度大小相對具有定位特性的祖先元素計算

div{position:absolute;left:20px ; right:20px}

假設該父級div的寬度為1000px,則這個<div> 的元素的寬度為960px(即1000-20-20);

此外,和上面的普通的流一樣,"格式化寬度"具有完全的流動性,也就是content,margin,padding,border在同時自動的分配水平

使用的例項

如何使塊元素垂直居中

先說為什麼可以水平居中因為當width為auto的時候寬度有對應方向的自動填充的特性;而height方向上沒有當height:auto的時候水平方向沒有高度,那如何可以讓height:auto的時候有水平方向的高度呢?

讓高度想寬度一樣局有流動性的格式化

.father{

height:200px; width:300px;

postition:relative;

}

.son{

position:absolute;

top:0 ; right;0 ; bottom:0; left:0;//這樣就可以格式高度和寬度,使得高度和寬度都可以具有流動性

margin:auto  // auto的作用是填充閒置的尺寸而設計的; 這樣當我有了寬高的時候我就可以把閒置的寬高平均分配,達到垂直水平居中;

}

HTML:

    <div class="father">
        <div class="son"></div>
    </div>

css:

            .father{
                position: relative;
                width: 300px;
                height: 150px;
                border: 1px solid saddlebrown;
            }
            .father > .son{
                position: absolute;
                top: 0px; right:0px; bottom: 0px; left: 0px;
                margin: auto;
                width: 100px; height: 50px;
                border: 1px solid salmon;
            }