15.CSS高級技巧

1.元素的顯示與隱藏

1)顯示(display)

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象 與它相反的是 display:block 除了轉換為塊級元素之外,同時還有顯示元素的意思。

特點:隱藏之後,不再保留位置。

<code>        <title>Title/<title>        
/<code>
15.CSS高級技巧

2)可見性(visibility)

設置或檢索是否顯示對象。

visible :  對象可視

hidden :  對象隱藏

特點:隱藏之後,繼續保留原有位置。

<code>        <title>Title/<title>        
/<code>
15.CSS高級技巧

3)溢出(overflow)

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

  1. visible :  不剪切內容也不添加滾動條(默認)。
  2. auto :   超出自動顯示滾動條,不超出不顯示滾動條。
  3. hidden :  不顯示超過對象尺寸的內容,超出的部分隱藏掉。
  4. scroll :  不管超出內容否,總是顯示滾動條。
<code>        <title>Title/<title>        
碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際
碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際
碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際
碼海無際碼海無際
/<code>
15.CSS高級技巧

2.用戶界面樣式

1)鼠標樣式(cursor)

設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。

<code>cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本/<code>
<code>        <title>Title/<title>    default  小白 | pointer  小手  | move  移動  |  text  文本    
  • 碼海無際
  • 碼海無際
  • 碼海無際
  • 碼海無際
/<code>
15.CSS高級技巧

2)輪廓(outline)

是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

<code>outline : outline-color ||outline-style || outline-width/<code>
<code>        <title>Title/<title>        
碼海無際
/<code>
15.CSS高級技巧

3)防止拖拽文本域(resize)

resize:none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。

<code>        <title>Title/<title>    <textarea>    <textarea>/<code>
15.CSS高級技巧

3.垂直對齊

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中,這個屬性會設置單元格框中的單元格內容的對齊方式。

語法:vertical-align: 屬性值; 可能的值有:

  1. baseline:默認。元素放置在父元素的基線上。
  2. sub:垂直對齊文本的下標。
  3. super:垂直對齊文本的上標
  4. top:把元素的頂端與行中最高元素的頂端對齊
  5. text-top:把元素的頂端與父元素字體的頂端對齊
  6. middle:把此元素放置在父元素的中部。
  7. bottom:把元素的頂端與行中最低的元素的頂端對齊。
  8. text-bottom:把元素的底端與父元素字體的底端對齊。
  9. length:具體值,允許使用負值。
  10. %:使用 "line-height" 屬性的百分比值來排列此元素,允許使用負值。
<code>        <title>Title/<title>        碼海無際/<code>
15.CSS高級技巧

4.疊放次序

當對多個元素同時設置定位時,定位元素之間有可能會發生重疊。

在CSS中,要想調整重疊定位元素的堆疊順序,可以對定位元素應用z-index層疊等級屬性,其取值可為正整數、負整數和0。

注意:

  1. z-index的默認屬性值是0,取值越大,定位元素在層疊元素中越居上。
  2. 如果取值相同,則根據書寫順序,後來居上。
  3. 後面數字一定不能加單位。
  4. 只有相對定位,絕對定位,固定定位有此屬性,其餘標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性。
<code>        <title>Title/<title>        
/<code>
15.CSS高級技巧


分享到:


相關文章: