1. 程式人生 > >overflow,clip,visibility 溢位和剪裁以及可見性

overflow,clip,visibility 溢位和剪裁以及可見性

overflow

出於某種原因,一個元素固定為某個特定大小,但內容在元素中放不下。此時可以利用overflow屬性來控制這種情況。
值: visible(初始值) | hidden | scroll | auto |
當為預設值visible時,元素的內容在元素框之外也可見,一般會導致內容超出其自己的元素框,但不會改變框的形狀。

當設定為scroll,元素的內容會在元素框的邊界處剪裁,溢位的內容無法看到,不過在Web瀏覽器中會使用一個滾動條(或者類似的東西)來訪問內容而不會改變元素本身的形狀。

如果被設定成hidden,元素的內容會在元素框的邊界處剪裁,不過不會提供滾動條,使用者也就無法訪問被剪裁的部分的內容

內容剪裁

通過使用屬性clip可以改變剪裁區域的形狀

clip: rect(top,right,bottom,left)

rect(…)的值不是邊偏移,而是距元素左上角的距離

元素可見性 visibility

除了溢位和剪裁,還可以控制整個元素的可見性。
值: visible(初始值) | hidden | collapse |
如果元素設定為visibility:visible,當然它是可見的。如果元素設定為visibility:hidden,則處於不可見狀態,但是元素還是會影響文件的佈局,它原本出現的位置空在那裡,只是我們不可見。visibility:collapse值在CSS表顯示中使用,如果用於非表元素,則與hidden含義相同