這篇文章講5個(gè)有用的CSS屬性 ,你應(yīng)該很熟悉,但很可能會(huì)很少使用,我不是在談?wù)撔碌腃SS3屬性。我講的是老的CSS2中的屬性 ,例如:clip ,min-height ,white-space ,cursor ,和display被所有的瀏覽器所支持。所以,不要錯(cuò)過(guò)這篇文章, 因?yàn)槟憧赡軙?huì)驚訝他們是多么有用。
1. CSS Clip
clip 屬性就像一個(gè)面具,允許你遮蓋一個(gè)矩形框下面的內(nèi)容。要剪輯一個(gè)元素,你必須指定position ,以absolute 。然后,指定它的top , right , bottom ,和left的值。
實(shí)例 (demo)
下面的示例演示如何使用掩碼圖像剪輯屬性。 首先,指定《div》元素position: relative 。 下一步,指定《img》元素position: absolute和矩形容器;
.clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); }
圖像調(diào)整和剪輯Image Resize and Clip (demo)
在這個(gè)例子中,我將告訴你如何調(diào)整和剪輯圖像。 我的原圖像是矩形格式。我想把它按比例縮放50%并從中截取一個(gè)方框作為縮略圖,所以,我用width和height屬性來(lái)調(diào)整圖像和遮蓋層。 然后,我用left屬性將圖像向左離開(kāi)15px。
.gallery li { float: left; margin: 0 10px 0 0; position: relative; width: 70px; height: 70px; border: solid 1px #000; } .gallery img { width: 100px; height: 70px; position: absolute; clip: rect(0 85px 70px 15px); left: -15px; }
2.Min-height (demo)
min-height屬性允許您指定一個(gè)元素的最小高度。當(dāng)你想平衡布局的時(shí)候,這個(gè)是很有用的。我把它用在我的職位公告欄,確保內(nèi)容板塊總是高于側(cè)欄的高度;
.with_minheight { min-height: 550px; }
IE6 Min-height HACK
注意:IE6不支持Min-height,但是這里有一個(gè)HACK
.with_minheight { min-height:550px; height:auto !important; height:550px; }
聯(lián)系客服