1. 程式人生 > 其它 >css 滑鼠變成小手_15.CSS高階技巧

css 滑鼠變成小手_15.CSS高階技巧

技術標籤:css 滑鼠變成小手

1.元素的顯示與隱藏

1)顯示(display)

display 設定或檢索物件是否及如何顯示。

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

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

    Title
af58c292f669bc746e0332505b120736.png

2)可見性(visibility)

設定或檢索是否顯示物件。

visible :  物件可視

hidden :  物件隱藏

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

    Title
ac412c86479484da2ec84f13923dfce0.png

3)溢位(overflow)

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

  1. visible :  不剪下內容也不新增滾動條(預設)。
  2. auto :   超出自動顯示滾動條,不超出不顯示滾動條。
  3. hidden :  不顯示超過物件尺寸的內容,超出的部分隱藏掉。
  4. scroll :  不管超出內容否,總是顯示滾動條。
    Title
碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際 65bacd3ae96d1a5a44d158d3004cdbc6.png

2.使用者介面樣式

1)滑鼠樣式(cursor)

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文字
    Title    default  小白 | pointer  小手  | move  移動  |  text  文字    
碼海無際 碼海無際 碼海無際 碼海無際 74becef1982d853cbec1314cd8c7e17b.png

2)輪廓(outline)

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

outline : outline-color ||outline-style || outline-width
    Title
碼海無際 12d4fb4b42b2f35390ccf8f537c63f59.png

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

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

    Title
5d5e6b3266ea22613108eb4935ea5728.png

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" 屬性的百分比值來排列此元素,允許使用負值。
    Title    碼海無際
480f6da79b15901c2e956f1595ca6c6d.png

4.疊放次序

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

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

注意:

  1. z-index的預設屬性值是0,取值越大,定位元素在層疊元素中越居上。
  2. 如果取值相同,則根據書寫順序,後來居上。
  3. 後面數字一定不能加單位。
  4. 只有相對定位,絕對定位,固定定位有此屬性,其餘標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性。
    Title
6abc2a765bf9ea139b930ad22e61a0a2.png