CSS3總結學習（一）：CSS3用戶界面
阿新 • • 發佈：2017-07-27
interface 繪制 如果 位置 nbsp 瀏覽器 none ble adding
在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
CSS3總結學習（一）：CSS3用戶界面