CSS樣式更改——用戶界面和指針類型

前言

上篇文章主要講述了CSS樣式更改中的多列、元素是否可見、圖片透明度基礎知識，這篇文章我們來介紹下CSS樣式更改中用戶界面和指針類型基礎用法。

1.用戶界面 UserGui

1).重設元素大小 resize

div
{
resize:both
}
none           不調整
both           調整元素的高度和寬度
horizontal     調整元素的寬度
vertical       調整元素的高度

2).規定兩個並排的帶邊框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box  寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
border-box 為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

3).對輪廓進行偏移outline-offset

div
{
outline-offset:15px  輪廓與邊框邊緣的距離
}

2.指針類型Cursor

div{
  cursor:auto
}
光標形狀：
default       默認光標（箭頭）
auto        瀏覽器設置的光標。
crosshair           十字線
pointer             一隻手
move                指示某對象可被移動。
e-resize            指示矩形框的邊緣可被向右（東）移動
ne-resize           指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize           指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize            指示矩形框的邊緣可被向上（北）移動
se-resize           指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize           指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize            指示矩形框的邊緣可被向下移動（南）
w-resize            指示矩形框的邊緣可被向左移動（西）
text                指示文本
wait                指示程序正忙（通常是一隻表或沙漏）
help                指示可用的幫助（通常是一個問號或一個氣球）

參考文檔：W3C官方文檔（CSS篇）

總結

這篇文章主要介紹了CSS樣式更改篇中的用戶界面和指針類型基礎知識，希望讓大家對CSS樣式更改有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/