今天說的這5個(gè)CSS屬性,你可能會(huì)很熟悉,但是你可能會(huì)很少會(huì)去使用.這個(gè)教程所講得不是關(guān)于CSS3的屬性,而是依舊使用CSS2屬性來說明,這些屬性廣泛的被各種瀏覽器所支持:clip,min-height,white-space,cursor和display.所以不要錯(cuò)過這個(gè)教程,因?yàn)槟銜?huì)發(fā)現(xiàn)他們是多么的有用. 1.CSS Clip Clip屬性就像一個(gè)遮蔽物.它可以把元素內(nèi)容不要的部分遮蓋起來.首先要指定元素的位置,以相對定位:position:absolute.然后指定相對于元素的值:top,right,bottom,left. 使用clip做演示
 下面用圖片來舉個(gè)例子來說明如何使用這個(gè)屬性.首先給div做相對定位,然后再給圖像指定絕對位置. ======================== .clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); }
 ======================== 使用clip來演示如保剪輯 在這個(gè)例子里演示了如何使用clip來重設(shè)圖像的位置和尺寸.原圖像的大小如圖所示.現(xiàn)在要把這個(gè)圖像放到一個(gè)正方形的容器里,并尺寸為原來的一半.現(xiàn)在來看如何來實(shí)現(xiàn)這個(gè)效果,首先用width,height來設(shè)置圖像的高度和寬度,然后使用clip來剪輯圖像.并讓圖像相對左邊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 min-height屬性允許對一個(gè)元素指定最小的高度.當(dāng)你在平衡布局的時(shí)候你會(huì)發(fā)現(xiàn)它是多么的有用.我用這個(gè)屬性來給我的網(wǎng)站理指定一個(gè)大小.
 ======================= .with_minheight { min-height: 550px; } ======================= 在IE6中的使用 在IE6中這個(gè)屬性不支持,這里有一個(gè)招數(shù). ====================== .with_minheight { min-height:550px; height:auto !important; height:550px; } ====================== |
