網頁設計中的內容裁剪

    • 2019-03-05 17:18:27
    • 閱讀次數:
    • 作者:盈嵐科技小編
    • 來源:http://www.moniquemcdaniel.com

    如果網頁設計中一個絕對定位元素的內容溢出其內容框,而且overflow設置為要求剪裁該內容,通過使用屬性clip可以改變剪裁區域的形狀。

    默認值auto表示元素的內容不應剪裁。還可以相對于元素內容區定義一個剪裁形狀。這不會改變內容區的形狀,而只是改變將顯示內容的區域形狀。

    注意:盡管網站建設CSS2中唯一可用的剪裁形狀是矩形,不過規范確實指出,在將來的規范中可能會有其他形狀,

    clip

    值:rect(top,right, bottom,left)| auto | inherit

    初始值:auto

    應用于:絕對定位元素(在CSS2中,clip應用于塊級元素和替換元素)

    繼承性:無

    計算值:對于矩形,4個計算長度表示剪裁矩形區域的4個邊,否則,根據指定確定

    這是利用形狀值rect實現的??梢匀缦轮付舨脜^域內不做修改:

    clip: recc(0, auto, auto, 0);

    網頁設計rect的語法很有意思。從技術上講,可以是rect(top, right,bottom,left),注意這里的逗號,不過網站建設CSS2規范提供的例子中有些有逗號,有些沒有逗號,而且將rect定義為這兩種版本都能接受。在此,我們還是采用有逗號的版本,主要是因為這樣更島讀,而且這是網站建設CSS2.1中推薦的做法。

    有一點極為重要,rect(...)的值不是邊偏移,而是距元素左上角的距離(在從右向左讀的語言中,則是與元素右上角的距離)。因此,如果一個剪裁矩形涵蓋元素左上角20 x 20像素的一個正方形,可以定義如下:

    rect(0, 20px, 20px, 0)

    rect (...)只允許長度值和auto,如果設置為auto,這相當于將剪裁邊界設置為適當的內容邊界。因此,以下兩個語句含義相同:

    clip: rect(auto, auto, 10px, 1em);

    clip: rect(0, 0, 10px, 1em);

    由于網頁設計中clip中的所有偏移都是距左上角的偏移,所以不允許有百分數,實際上不可能創建一個“中心”剪裁區域,除非你知道元素本身的大小??紤]以下情況:

    div#sidebar {position: absolute; top: 0; bottom: 50%; right: 50%; left: 0; clip: rect(1em,4em,6em,1em);)

    由于無法知道元素會有多高或多寬,所以無法定義這樣一個剪裁矩形,要求它最后在元素內容區向右1em或向下1em處。要想知道元素的大小,唯一的辦法就是設置元素本身的高度和寬度:

    div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;

    clip: rect(1em,4em,6em,1em);}

    這會得到如圖10-34所示的結果,這里增加了一個虛線表示剪裁區域的邊界。這條線在顯示文檔的用戶代理中并不會真的出現。

    不過,網頁設計人員可以設置負長度值,這會使剪裁區域延伸到元素框之外。如果你想將剪裁區域向上向左移0.25英寸,可以使用以下樣式(如圖10-35所示)

    clip: rect(-0.25in, auto, auto,-0.25in);

    可以看到,這沒什么好處。盡管剪裁區域向上向左延伸了,不過由于延伸區域內沒有任何內容,所以沒有多大差別。

    另一方面,完全可以超越下邊界和右邊界,但不能超越上邊界或左邊界。圖10-36顯示了以下樣式的結果(要記住,這里的虛線只是為了說明,并不實際存在?。?/p>

    div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em; clip: rect(0,6em,9em,0);}

    這會擴展可以看到內容的區域。不過,內容流并沒有改變,所以唯一的視覺效果就是元素下面可以看到更多的內容。文本沒有向右流,因為其行框的寬度仍受定位元素寬度的限制。如果有一個比定位元素寬的圖像,或者有一個很長的預定義格式文本行,則可能在定位元素的右邊也可見(直到剪栽區域結束的位置)。

    網頁設計人員可能已經認識到,rect(...)的語法與網站建設CSS的其他語法相比不太一樣。原因是它基于早期的定位草案,而該草案使用了左上偏移機制。在CSS2之前,實現這個語法的Internet Explorer巳經成為完備推薦,所以它與最終的rect (...)語法沖突,因為最后已經將rect(...)修改為使用邊偏移(類似于CSS2的其余部分)。這么做是為了保證定位一致,這是合情合理的。

    圖10-36:剪裁區域從元素框向下向右延伸

    不過,等到這個時候已經太晚了:市場上已經有了具體實現,所以沒有要求Microsoft修改瀏覽器(因為這可能破壞現有的頁面),而是將標準修改為適應這個實現。遺憾的是,正如前面所看到的,這意味著如果高度和寬度沒有明確定義,將無法設置一致的剪裁區域。

    rect(...)只接受長度單位和auto,這使問題更為嚴重。要讓百分數單位也成為合法的rect (...)值可能還有很長的一段路要走,也許將來的網站建設CSS版本會增加這個功能。

    警告:從clip悠久復雜的歷史可以看出,當前瀏覽器中clip的實現方式并不一致,在所有跨瀏覽器的環境中都不能指望clip肯定采用某一種方式實現。

    當前文章標題:網頁設計中的內容裁剪

    當前URL:http://www.moniquemcdaniel.com/news/wzzz/content-cutting.html

    上一篇:網頁設計中的內容溢出

    下一篇:網頁設計中的元素可見性

    網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
    亚洲 欧美 中文 日韩a v一区,精品无码精品中文字幕三区,国产在线麻豆自在拍91精品,免费av在线无码不卡