大小相關屬性

大小相關屬性主要用於設置目標對象的寬度、高度，包括最大寬度、高度，以及最小寬度、高度。常用的大小相關屬性有如下幾個。

• height：用於設置目標對象的高度。

• max-height：用於設置目標對象的最大高度。

• min-height：用於設置目標對象的最小高度。

• width:用於設置目標對象的寬度。

• max-width：用於設置目標對象的最大寬度。

• min-width：用於設置目標對象的最小寬度。

css3新增的box-sizing屬性

在默認情況下，如果指定width、height屬性，只是指定該元素的內容區的寬度、高度，對該元素的內補丁區、邊框區、外補丁區所佔的空間不產生任何效果。

以下代碼示範width、height屬性的作用

兩個div元素中他們都具有相同的屬性值，只是第二個設置了內補丁區和邊框區。

有時候，開發者需要控制的並不是該元素內容的寬度、高度，而是該元素整體（包括padding。border的寬高度）。

屬性支持如下幾個屬性值

• content-box：設置width、height控制元素的內容區寬度和高度。

• padding-box：設置width、height控制元素的內容區加內補丁區的寬度和高度。

• border-box：設置width、height控制元素的內容區加內補丁區在加邊框區的寬度和高度。屬性值設置為border-box後，指定width、height屬性將可控制該元素整體的寬高度。

css3新增的resize屬性

該屬性用於指定是否允許用戶通過拖動來改變元素的大小。

該屬性支持如下幾個屬性值。

• none：設置不允許用戶通過拖動來改變組件的大小。

• both：設置不允許用戶通過拖動來改變組件的高度和寬度。

• horizontal：設置不允許用戶通過拖動來改變組件的寬度。

• vertical：設置不允許用戶通過拖動來改變組件的高度。

• inherit:繼承自父元素的resize屬性值。
  

定位相關屬性

該屬性用於設置目標組件的位置，它包括是否漂浮於頁面之上，通過使用漂浮的div元素，可自由移動頁面元素的位置，產生動畫效果。

• position：用於設置目標對象的定位方式。absolute，允許該對象漂浮於頁面上，不用考慮周圍內容佈局，relative，位置將參考前一個對象的位置進行定位，static，對象以頁面作為參考系。

• z-index：用於設置目標對象的漂浮層的層序，值越大，漂浮層越浮於上面。（此屬性僅在position屬性值為relative或absolute時有效）

• top：用於設置目標對象相對於最近一個具有定位設置的父對象的頂邊偏移，（該屬性僅在position屬性為absolute和relative時有效）

• right：用於設置目標對象相對於最近一個具有定位設置的父對象的右邊偏移，（該屬性僅在position屬性為absolute和relative時有效）

• left：用於設置目標對象相對於最近一個具有定位設置的父對象的左邊偏移，（該屬性僅在position屬性為absolute和relative時有效）
  

輪廓相關屬性

輪廓相關屬性主要用於讓目標對象周圍有一圈“光暈”效果，而它不會佔用頁面實際的物理佈局。

它的相關屬性如下

• outline：這是一個複合屬性，可以設置輪廓的顏色、線型、線寬三屬性。

• outline-color：用於設置組件的輪廓顏色。

• outline-style：設置輪廓的線型。（none、dotted、dashed、solid、double、groove、ridge、inset、outset）

• outline-width:設置輪廓的寬度。

• outline-offset:設置輪廓的偏移距，輪廓與邊框之間的距離。