之前介紹過了定位的元素,以及通過偏移屬性去實現這個定位,這篇文章主要介紹輔助定位實現的其他元素,包括寬度和高度、內容溢出或剪裁、以及元素的可見性
寬度和高度
當確定了元素定位到哪裏之後,有時候需要聲明高度和寬度。高度屬性(height)和寬度屬性(width)是非常常見的兩個屬性。當不確定寬度高度又不想超出時,此時可設置最小最大寬度(高度)解決,但需注意的是此時的屬性不可爲負
最小寬度(高度) min-width 、min-height
值:<length> | <percentage> | inherit
初始值:auto
應用於: 除了非替換行內元素和表元素以外的所有元素
繼承性:無
百分數:相對於包含塊的寬度
計算值:對於百分數,根據指定確定;對於長度值,則爲絕對長度;否則,則爲none
最大寬度(高度)類似;此做法的好處是可以相對安全的混合使用不同的單位
內容溢出和剪裁
如果一個元素的內容相對於元素大小來說過大就有可能溢出元素本身
溢出(overflow)
值:visible | hidden | scroll | auto | inherit
初始值:visible
應用於:塊級元素和替換元素
繼承性:無
計算值:根據指定確定
如果值爲scroll,元素的內容就會根據元素框的邊界處裁剪,但是會提供滾動條,可供滑動
如果值爲hidden,元素的內容會在元素框的邊界處裁剪,超出裁剪框的內容則不可見。
內容裁剪(clip)
值: rect(top,right,bottom,left) | auto | inherit
初始值:auto
應用於:絕對定位元素(css2中,也應用於塊級元素和替換元素)
繼承性:無
計算值:對於矩形,4個計算長度表示裁剪矩形區域的4個邊;否則,根據指定確定
rect(...)的值不是邊偏移,而是距元素左上角的距離;只允許長度值和auto
元素可見性
除了控制元素的溢出和裁剪,還可以控制元素的可見性(visibility)
值:visible | hidden | collapse | inherit
初始值:visible
應用於:所有元素
繼承性:有
計算值:根據指定確定
不管可見或是不可見,元素都會影響文檔的佈局。這裏的作用僅僅只是使元素不可見,但不刪除其元素框;其次,元素是具有繼承性的,所以在後代元素中,若出現不一致,必須聲明可見性