簡單實用的五個CSS屬性
本文向大家介紹一下5個實用的CSS屬性的使用,主要是clip,min-height,white-space,curosr和display等一些被所有瀏覽器廣泛支持的屬性,你應該很熟悉,但很可能很少會使用到,這里和大家分享一下其用法。
5個實用的CSS屬性
這篇文章介紹了5個實用的CSS屬性。你應該很熟悉,但很可能很少會使用到。我并不是在談論展望全新的CSS3屬性,我指的是舊的CSS2中的屬性,如:clip,min-height,white-space,curosr和display等一些被所有瀏覽器廣泛支持的屬性。因此,千萬不要錯過這篇文章,因為你可能發(fā)現它們竟有如此之大的用途。
1、CSSClip
剪輯(clip)屬性就像一個面具。它允許你使用矩形掩蓋頁面元素的內容。要剪輯一個元素:你必須指定其position屬性為absolute,然后指定相對于元素的top,right,bottom,left值。
圖片剪輯實例(演示)
以下示例演示了如何使用clip屬性掩蓋一張圖片。首先,指定
- .clip{
- position:relative;
- height:130px;
- width:200px;
- border:solid1px#ccc;
- }
- .clipimg{
- position:absolute;
- clip:rect(30px165px100px30px);
- }
#p#2、Min-height(演示)
min-height屬性允許你指定元素的最小高度,適用于需要平衡布局的情況。我將它用于Job面板上,以確保內容區(qū)域高于側邊欄。
- .with_minheight{
- min-height:550px;
- }
IE6的Min-heighthack
注:神奇的IE6原生不支持min-height屬性,不過幸好有一個min-heighthack。
- .with_minheight{
- min-height:550px;
- height:auto!important;
- height:550px;
- }
3、White-space(演示)
white-space屬性指定了元素中空白的處理方式。比如,指定white-space:nowrap會阻止文本自動換行。
- em{
- white-space:nowrap;
- }
#p#4、Cursor(演示)
如果你改變了按鈕的行為,其指針也應該隨之改變。比如,當一個按鈕不可用時,指針應該改變?yōu)槟J的箭頭,來表明它不可點擊。因此,cursor屬性在開發(fā)Web應用程序時相當有用。
- .disabled{
- cursor:default;
- }
- .busy{
- cursor:wait;
- }
- .clickable:hover{
- cursor:pointer;
- }
5、Displayinline/block(演示)
如果你不知道:塊級元素是作為獨立的一行來渲染的,而行內元素是在同一行被渲染的。
和
標簽都是塊級元素,,,都是行內元素。通過display:inline或block的方式,你可以重設這些元素的display樣式。
- .blockem{
- display:block;
- }
- .inlineh4,.inlinep{
- display:inline;
- }
【編輯推薦】
- CSS Sprites工作原理及優(yōu)缺點
- CSS層疊與繼承用法手冊
- DIV布局規(guī)范中CSS類及id命名方式
- CSS網頁布局中id與class命名規(guī)則
- 將XHTML+CSS頁面轉換為打印機頁面技巧


2022-11-01 15:57:44
2022-12-06 17:18:42





51CTO技術棧公眾號

速覽