CSS教程:容易忽略的但是很熟悉的CSS屬性

2024-07-11 09:03:15

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：5個簡單，但很實用的css屬性.

這5個有用的css屬性可能你是比較熟悉的，但是很少使用到它們。我這里討論的不是css3的新屬性
。我提到的都是被所有瀏覽器支持的css2屬性比如：clip、min-height、white-space、cursor和display。千萬別錯過這篇文章，因為你會驚訝的發現他們是很有用的。
一、css clip（裁切）
clip裁切這個屬性有點像是遮罩。它允許你用特定的形狀遮罩相應的內容。裁切某元素之前，你必須先給該元素指定絕對定位屬性，然后給它的上下左右賦值。

CSS教程:容易忽略的但是很熟悉的CSS屬性

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

CSS教程:容易忽略的但是很熟悉的CSS屬性

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

CSS教程:容易忽略的但是很熟悉的CSS屬性

代碼如下：
.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最小高度（演示）
最小高度屬性允許你給某個元素指定最小高度，對于網站布局來說它是十分有用的。我就在我的job board的內容區域應用了最小高度，確保內容區域的高度比邊欄要高些兒。

CSS教程:容易忽略的但是很熟悉的CSS屬性

代碼如下：
.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屬性后，如果一行內的空間無法容下該元素的話，它將自動換到下一行。

CSS教程:容易忽略的但是很熟悉的CSS屬性

代碼如下：em {white-space: nowrap;｝

四、光標（演示）
如果您更改按鈕的行為，同時你也應該改變Cursor光標。例如，當一個按鈕被禁用時，光標應改為默認（箭頭），以表明它是無法點擊因此，cursor屬性對于網絡應用程序開發是非常有用的。

CSS教程:容易忽略的但是很熟悉的CSS屬性

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

五、Display inline / block（演示）
塊狀元素是自己單獨在一行的，而內聯元素則會出現同一行里面。div、h1、p標簽是默認的塊狀元素。em、span和strong則是內聯元素。你可以改變display的顯示樣式display:inline或display:block;改變它們的默認狀態。

CSS教程:容易忽略的但是很熟悉的CSS屬性