CSS3總結學習（一）：CSS3使用者介面

標籤：box   alt   log   ima   table   介紹   距離   決定   統一   

在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使用者介面