自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

簡單實用的五個CSS屬性

開發(fā) 前端
這里向大家描述一下5個實用的CSS屬性的用法,它們分別是clip,min-height,white-space,curosr和display等一些被所有瀏覽器廣泛支持的屬性。

本文向大家介紹一下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屬性掩蓋一張圖片。首先,指定

元素為position:relative,然后指定元素為position:absolute,并且根據實際需要設定rect值。

  1. .clip{  
  2. position:relative;  
  3. height:130px;  
  4. width:200px;  
  5. border:solid1px#ccc;  
  6. }  
  7. .clipimg{  
  8. position:absolute;  
  9. clip:rect(30px165px100px30px);  
  10. }  
  11.  

#p#2、Min-height(演示)

min-height屬性允許你指定元素的最小高度,適用于需要平衡布局的情況。我將它用于Job面板上,以確保內容區(qū)域高于側邊欄。

  1. .with_minheight{  
  2. min-height:550px;  
  3. }  
  4.  

IE6的Min-heighthack

注:神奇的IE6原生不支持min-height屬性,不過幸好有一個min-heighthack。

  1. .with_minheight{  
  2. min-height:550px;  
  3. height:auto!important;  
  4. height:550px;  
  5. }  
  6.  

3、White-space(演示)

white-space屬性指定了元素中空白的處理方式。比如,指定white-space:nowrap會阻止文本自動換行。

  1. em{  
  2. white-space:nowrap;  
  3. }  
  4.  

#p#4、Cursor(演示)

如果你改變了按鈕的行為,其指針也應該隨之改變。比如,當一個按鈕不可用時,指針應該改變?yōu)槟J的箭頭,來表明它不可點擊。因此,cursor屬性在開發(fā)Web應用程序時相當有用。

  1. .disabled{  
  2. cursor:default;  
  3. }  
  4.  
  5. .busy{  
  6. cursor:wait;  
  7. }  
  8.  
  9. .clickable:hover{  
  10. cursor:pointer;  
  11. }  

5、Displayinline/block(演示)

如果你不知道:塊級元素是作為獨立的一行來渲染的,而行內元素是在同一行被渲染的。

,

標簽都是塊級元素,,,都是行內元素。通過display:inline或block的方式,你可以重設這些元素的display樣式。

  1. .blockem{  
  2. display:block;  
  3. }  
  4.  
  5. .inlineh4,.inlinep{  
  6. display:inline;  
  7. }  

【編輯推薦】

  1. CSS Sprites工作原理及優(yōu)缺點
  2. CSS層疊與繼承用法手冊
  3. DIV布局規(guī)范中CSS類及id命名方式
  4. CSS網頁布局中id與class命名規(guī)則
  5. 將XHTML+CSS頁面轉換為打印機頁面技巧


 

責任編輯:佚名 來源: blueidea.com
相關推薦

2022-11-01 15:57:44

2022-03-04 22:24:18

CSS網站開發(fā)前端

2010-09-01 13:55:14

CSS

2010-09-06 15:35:27

2023-07-26 07:51:30

CSSgap 屬性

2023-02-13 15:09:01

開發(fā)webCSS技巧

2024-02-26 08:20:00

CSS開發(fā)

2023-12-19 13:31:00

CSS前端技巧

2023-12-08 08:50:21

CSS前端屬性

2023-12-08 08:45:41

CSS屬性顏色變換屬性前端

2010-08-20 09:47:54

2023-07-24 15:24:00

前端CSS 技巧

2010-08-27 16:07:50

2010-09-01 13:08:42

2023-07-05 07:25:31

Python功能布爾值

2023-05-04 23:54:02

JavaScrip代碼技巧

2022-12-06 17:18:42

2023-10-26 18:03:14

索引Python技巧

2015-12-21 10:53:38

網絡邊界安全信息安全策略

2023-11-08 08:43:08

calc函數CSS
點贊
收藏

51CTO技術棧公眾號