格式化寬度高度和的理解
格式化寬度僅出現在"絕對定位模型"中,也就是出現在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;
}