簡單但很實(shí)用的5個css屬性

2024-07-11 08:46:13

字體：大中小

供稿：網(wǎng)友

我提到的都是被所有瀏覽器支持的css2屬性比如：clip、min-height、white-space、cursor和display。千萬別錯過這篇文章，因為你會驚訝的發(fā)現(xiàn)他們是很有用的。
一、css clip（裁切）
clip裁切這個屬性有點(diǎn)像是遮罩。它允許你用特定的形狀遮罩相應(yīng)的內(nèi)容。裁切某元素之前，你必須先給該元素指定絕對定位屬性，然后給它的上下左右賦值。
css01

圖片裁切舉例（演示）
在接下來的這個例子里面，主要展示如何給一個圖片應(yīng)用裁切屬性。首先，指定div元素相對定位，然后給圖片賦予絕對定位屬性和相應(yīng)的屬性值。
css02

代碼如下：
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
圖片調(diào)整和裁切
在這例子里面，我們將展示你如何調(diào)整圖片大小并裁切圖片。這個圖片的原始形狀是長方形的，我想把圖片縮小一半后在正方形里展示。我用width、height屬性改變圖片大小，然后通過裁切屬性讓其顯示為正方形，同時給left賦值使圖片向左移動15px距離。
css03

代碼如下：
.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;
}

二、min-height最小高度（演示）
最小高度屬性允許你給某個元素指定最小高度，對于網(wǎng)站布局來說它是十分有用的。我就在我的job board的內(nèi)容區(qū)域應(yīng)用了最小高度，確保內(nèi)容區(qū)域的高度比邊欄要高些兒。
css04
代碼如下：
.with_minheight {min-height: 550px;}
min-height（最小高度）在ie6下面的bug問題
注意：ie6是不支持min-height的，但是一下方法可以解決這個ie6 bug問題。
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}

三、White-space折行（演示）
White-space屬性指定某一元素是如何自動折行的。比如，給一元素指定White-space屬性后，如果一行內(nèi)的空間無法容下該元素的話，它將自動換到下一行。
css05
代碼如下：em {white-space: nowrap;｝

四、光標(biāo)（演示）
如果您更改按鈕的行為，同時你也應(yīng)該改變Cursor光標(biāo)。例如，當(dāng)一個按鈕被禁用時，光標(biāo)應(yīng)改為默認(rèn)（箭頭），以表明它是無法點(diǎn)擊因此，cursor屬性對于網(wǎng)絡(luò)應(yīng)用程序開發(fā)是非常有用的。
css06

代碼如下：
.disabled {cursor: default;}
.busy {cursor: wait;}
.clickable:hover {cursor: pointer;}

五、Display inline / block（演示）
塊狀元素是自己單獨(dú)在一行的，而內(nèi)聯(lián)元素則會出現(xiàn)同一行里面。div、h1、p標(biāo)簽是默認(rèn)的塊狀元素。em、span和strong則是內(nèi)聯(lián)元素。你可以改變display的顯示樣式display:inline或display:block;改變它們的默認(rèn)狀態(tài)。
css07
代碼如下：
.block em {display: block;}
.inline h4, .inline p {display: inline;}