CSS還提供了大小相關屬性來控制HTML元件的大小，例如通過width屬性控制HTML元件的寬度，通過height屬性控制HTML元件的高度。使用這種大小相關的屬性允許我們自定義HTML元件的大小。
width、height相關屬性
大小相關屬性主要用于設定目标對象的寬度、高度，包括最大寬度、高度，以及最小寬度、高度。常用的大小相關屬性有如下幾個。
| height | 用于設定目标對象的高度。該屬性值可以是任何有效的距離值。 |
| max-height | 用于設定目标對象的最大高度。如果此屬性的值小于min-height屬性的值，将會被自動轉換為min-height屬性的值。該屬性值可以是任何有效的距離值。 |
| min-height | 用于設定目标對象的最小高度。如果此屬性的值大于max-height屬性的值，将會被自動轉換為max-height屬性的值。該屬性值可以是任何有效的距離值。 |
| width | 用于設定目标對象的寬度。該屬性值可以是任何有效的距離值。 |
| max-width | 用于設定目标對象的最大寬度。如果此屬性的值小于min-width屬性的值，将會被自動轉換為min-width屬性的值。該屬性值可以是任何有效的距離值。 |
| min-width | 用于設定目标對象的最小寬度。如果此屬性的值大于max-width屬性的值，将會被自動轉換為max-width屬性的值。該屬性值可以是任何有效的距離值。 |
1.CSS3新增的box-sizing屬性
在預設情況下，如果指定width、height屬性，隻是指定該元素的内容區的寬度、高度，對該元素的内更新檔區、邊框區、外更新檔區所占的空間不産生任何效果。如下方圖檔展示了width、height屬性的作用。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大小相關屬性</title>
</head>
<body>
<div style="width:200px;height:40px;background-color:#ddd;
background-clip:content-box;">
CSS3學習
</div>
<!-- 增加border和padding區 -->
<div style="width:200px;height:40px;background-color:#ddd;
background-clip:content-box;
border:30px solid #555;
padding:30px;">
CSS3學習
</div>
</body>
</html>
上面定義了兩個<div>元素，它們的width和height屬性具有相同的屬性值，隻是第二個設定了内填充區和邊框區。
CSS 3新增了box-sizing屬性來設定width、height控制哪些區域的寬度、高度，這樣就可以讓開發者控制起來更加友善。例如有些時候，開發者需要控制的并不是該元素内容的寬度、高度，而是該元素整體（包括padding區、border整體的寬度和高度），該屬性支援如下幾個屬性值：
- content-box：設定width、height控制元素的内容區寬度和高度。
- padding-box：設定width、height控制元素的内容區加内更新檔區的寬度和高度。
- border-box：設定width、height控制元素的内容區加内更新檔區再加邊框區的寬度和高度。
下方圖檔展示了box-sizing屬性的功能：
上面頁面中定義了3個<div>元素，其width、height屬性都被設定成 200px、100px，其中第一個<div>元素的box-sizing屬性為content-box，這表示該元素的内容區高度為100px，寬度為200px；第二個<div.../>元素的boxsizing屬性為padding-box，這表示該元素的内容區加内更新檔區的高度為100px，寬度為200px；第三個<div>元素的box-sizing屬性為border-box，這表示該元素的内容區加内更新檔區再加邊框區的高度為100px，寬度為200px。當将box-sizing設定為border-box後，指定width、height 屬性将可控制該元素整體的寬度、高度，這一點非常有用。
2.CSS3新增的resize屬性
CSS3還新增了一個resize屬性，該屬性用于指定是否允許使用者通過拖動來改變元素的大小。該屬性支援如下幾個屬性值。
- none：設定不允許使用者通過拖動來改變元件的大小。
- both：設定不允許使用者通過拖動來改變元件的高度和寬度。
- horizontal：設定不允許使用者通過拖動來改變元件的寬度。
- vertical：設定不允許使用者通過拖動來改變元件的高度。
- inherit：繼承自父元素的resize屬性值。這是預設值。
resize屬性對于所有設定了overflow的HTML元件有效，絕大部分主流浏覽器如Firefox、Opera、Chrome都已支援該屬性。下方圖檔展示了resize屬性的功能：
3.CSS3新增的calc函數
calc用于動态計算HTML的高度和寬度。假如我們希望設定一個元素的寬度等于父容器寬度的80%再減去80px。此時就需要借助calc函數來計算。使用calc還可以非常友善的實作自适應布局。calc函數的文法是直接傳入一個表達式即可，支援+、-、*、/等常見的數學運算符。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calc函數</title>
<style type="text/css">
body>div {
width:200px;
height:100px;
overflow: auto;
resize: both;
border: 2px solid #555;
}
div>div {
border:1px solid black;
display:inline-block;
margin:5px;
box-sizing: border-box;
width:calc(50% - 14px);
height:calc(100% - 10px);
}
</style>
</head>
<body>
<div style="">
<div>第一塊</div>
<div>第二塊</div>
</div>
</body>
</html>
如下圖所示，無論我們如何調整頁面中作為父容器的<div>元素，總可以看到兩個子<div>元素平方父容器的空間。
定位相關屬性
定位相關屬性用于設定目标元件的位置，包括是否漂浮于頁面之上，通過使用漂浮的<div.../>元素，可自由移動頁面元素的位置，進而可在頁面上産生動畫效果。常用的定位相關屬性如下：
| position | 用于設定目标對象的定位方式。此屬性設定為absolute，會允許将該對象漂浮于頁面之上，根本無須考慮它周圍内容的布局；設定為relative ，會保持對象在正常的HTML流中，目标對象的位置将參照前一個對象的位置進行定位；設定為static，則目标對象僅以頁面作為參照系。 |
| z-index | 用于設定目标對象的漂浮層的層序，該值越大，漂浮層越浮于上面。此屬性僅當position屬性值為relative或absolute時有效。此屬性對視窗控件（如<select.../>元素）沒有影響。 |
| top | 用于設定目标對象相對于最近一個具有定位設定的父對象的頂邊偏移，此屬性僅當設定了對象的position屬性為absolute和relative時有效。 |
| right | 用于設定目标對象相對于最近一個具有定位設定的父對象的右邊偏移，此屬性僅當設定了對象的position屬性為absolute和relative時有效。 |
| bottom | 用于設定目标對象相對于最近一個具有定位設定的父對象的底邊偏移，此屬性僅當設定了對象的position屬性為absolute和relative時有效。 |
| left | 用于設定目标對象相對于最近一個具有定位設定的父對象的左邊偏移，此屬性僅當設定了對象的position屬性為absolute和relative時有效。 |
對于下方圖檔中postion屬性為absolute的<div.../>将完全不受頁面其他元素的影響，直接基于頁面定位；如果設定postion屬性為relative，<div.../>将受到其他元素的影響，會基于頁面中的文本元素定位；如果設定postion屬性為static，那麼頁面的left、top等定位屬性設定失效。
輪廓相關屬性
輪廓相關屬性主要用于讓目标對象周圍有一圈“光暈”效果，這圈光暈不會占用頁面實際的實體布局。通過輪廓相關屬性，可設定該“光暈”的顔色、線寬、線型等屬性。輪廓相關屬性有如下幾個。
- outline：這是一個複合屬性，可全面設定目标對象輪廓的顔色、線型、線寬三個屬性。
- outline-color：用于設定元件的輪廓顔色。
- outline-style：用于設定元件的輪廓線型。該屬性支援的屬性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，這些屬性值與前面介紹邊框線型時各屬性值的意義完全相同。
- outline-width：用于設定目标元件的輪廓寬度。
- outline-offset：用于設定目标元件的輪廓偏移距（就是輪廓與邊框之間的距離）。
下方圖檔示範了輪廓相關屬性的功能，需要源碼的可以在我的資源庫下載下傳，有什麼問題可以在下方留言。 點選前往
總結：這次主要介紹了CSS3提供的大小、定位和輪廓相關屬性，我們可以通過width、height屬性來控制HTML元件的大小，也可以通過position、left、top等屬性來定位HTML元件。除此之外，還介紹了如何使用outline屬性為HTML元件添加輪廓。
------------如果大家喜歡湮顧千古的部落格，可以點選左上角的關注哦。