CSS3總結學習（一）：CSS3用戶界面

在CSS3中，新的用戶界面屬性有不少，本文重點介紹resize,box-sizing,offset。

瀏覽器支持，以下圖，圖片源於W3school

1.CSS Resizing

在css3，resize屬性規定用戶是否能夠調整元素尺寸。

註釋：若是但願此屬性生效，須要設置元素的 overflow 屬性，值能夠是 auto、hidden 或 scroll。

語法：

resize: none|both|horizontal|vertical;

值	描述
none	用戶沒法調整元素的尺寸。
both	用戶可調整元素的高度和寬度。
horizontal	用戶可調整元素的寬度。
vertical	用戶可調整元素的高度。

展現，右下角地方能夠自由調整尺寸。

 

 2.CSS3 Box Sizing

box-sizing 屬性容許以確切的方式定義適應某個區域的具體內容。

咱們知道盒子模型分爲標準模型和IE模型，標準盒模型的width和height就是content的寬高；而IE盒模型的width和height則是由content+padding+border組成。爲了兼容不一樣的瀏覽器，咱們一般使用box-sizing來將標準盒模型變爲IE盒模型（反之也能夠，只要統一標準就行）。

語法：

box-sizing: content-box|border-box|inherit;

值	描述
content-box	這是由 CSS2.1 規定的寬度高度行爲。 寬度和高度分別應用到元素的內容框。 在寬度和高度以外繪製元素的內邊距和邊框。
border-box	爲元素設定的寬度和高度決定了元素的邊框盒。 就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
inherit	規定應從父元素繼承 box-sizing 屬性的值。

 

3.CSS3 Outline Offset

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

輪廓與邊框有兩點不一樣：

• 輪廓不佔用空間
• 輪廓多是非矩形

語法：

outline-offset: length|inherit;

值	描述
length	輪廓與邊框邊緣的距離。
inherit	規定應從父元素繼承 outline-offset 屬性的值。

展現，紅色爲輪廓：

 

具體可見官網描述：http://www.w3school.com.cn/css3/css3_user_interface.asp