今天說的這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;
}

======================

3. White-space

white-space屬性設(shè)置或檢索對象內(nèi)空格的處理方式.如white-space:nowrap會(huì)強(qiáng)行換行.

=====================
em {
? white-space: nowrap;
}

=====================

4. Cursor

如果你更改了按扭的行為,那么你也應(yīng)該改變光標(biāo)的行為.如:當(dāng)一個(gè)按扭被禁用的時(shí)候,光標(biāo)應(yīng)該項(xiàng)是默認(rèn)的(箭頭),來表示按扭是無法點(diǎn)擊的.所以,cursor屬性在網(wǎng)絡(luò)應(yīng)用程序開發(fā)非常有用.

========================
.disabled {
? cursor: default;
}

.busy {
? cursor: wait;
}

.clickable:hover {
? cursor: pointer;
}

========================

5. Display inline / block

block元素占據(jù)一行,而inline則會(huì)在同一行顯示.<div>,<h1>,<p>標(biāo)簽是block元素.<em>,<span>,<stong>標(biāo)簽是內(nèi)聯(lián)元素.但是你可以通過display:inline/block來改變元素的內(nèi)聯(lián)和塊屬性.

=======================
.block em {
? display: block;
}

.inline h4, .inline p {
? display: inline;
}

=======================

轉(zhuǎn)載于:https://www.cnblogs.com/ximumu/archive/2009/12/04/1616930.html

總結(jié)

以上是生活随笔為你收集整理的CSS入门-五个简单,但有用的CSS属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。