6月25號=》211頁-215頁

標籤：style   color   使用   width   os   set   

9.1.1　　CSS3新增的box-sizing屬性

　　　　　　css3新增了box-sizing屬性來設定width、height控制哪些地區的寬度、高度、這樣就可以讓開發人員控制起來更加方便。

　　　　　　例如有些時候，開發人員需要控制的並不是該元素內容的寬度，高度，而是該元素整體(包括padding區、border整體的寬度

　　　　　　和高度)，該屬性支援如下幾個屬性值：

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

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

　　　　　　　　border-box：設定width、height控制元素的內容區加內補丁區再加邊框區的寬度和高度。

　　　　　　代碼示範：

　　　　　　　　//設定div元素內容區的寬度為200px，高度為100px，邊框和內補丁區的寬高另外計算的CSS樣式

　　　　　　　　div{

　　　　　　　　　　width:200px;

　　　　　　　　　　height:100px;

　　　　　　　　　　border:20px solid #ccc;

　　　　　　　　　　padding:20px;

　　　　　　　　　　box-sizing:content-box;

　　　　　　　　}

 

9.1.1　　CSS3新增的resize屬性

　　　　　　CSS3還新增了一個resize屬性，該屬性用於指定是否允許使用者通過拖動來改變元素的大小。

　　　　　　該屬性支援如下幾個屬性值：

　　　　　　　　none：設定不允許使用者通過拖動來改變組件的大小。

　　　　　　　　both：設定不允許使用者通過拖動來改變組件的高度和寬度。

　　　　　　　　horizontal：設定不允許使用者通過拖動來改變組件的寬度。

　　　　　　　　vertical：設定不允許使用者通過拖動來改變組件的高度。

　　　　　　　　inherit：繼承自父元素的resize屬性值。這是預設值。

　　　　　　resize屬性對於所有設定了overflow的HTML組件有效。

　　　　　　代碼示範：

　　　　　　　　//允許該div通過拖動來改變高度和寬度的CSS樣式

　　　　　　　　div{

　　　　　　　　　　width:200px;

　　　　　　　　　　height:100px;

　　　　　　　　　　border:1px solid #ccc;

　　　　　　　　　　resize:horizontal;

　　　　　　　　　　overflow:auto;

　　　　　　　　}

 

9.2　　定位相關屬性

　　　　　　定位相關屬性用於設定目標組件的位置，包括是否漂浮於頁面之上，通過使用漂浮的<div>元素，可自由移動頁面元素

　　　　　　的位置，從而可在頁面上產生東華效果。

　　　　　　常用的定位相關的屬性如下：

　　　　　　　　position：用於設定目標對象的定位方式。此屬性設定為absolute，會允許將該對象漂浮於頁面上，根本無需考慮它

　　　　　　　　　　　　　　周圍內容的布局；設定為relative，會保持對象在正常的HTML流中，目標對象的位置將參照前一個對象

　　　　　　　　　　　　　　的位置進行定位，設定為static，則目標對象僅以頁面作為參照系。

　　　　　　以下屬性僅當position屬性值為relative或absolute時有效。

　　　　　　　　z-index：用於設定目標對象的漂浮層的層序，該值越大，漂浮層越浮於上面。此屬性對視窗控制項(如<Select>元素)沒有影響。

　　　　　　　　top：用於設定目標對象相對於最近一個具有定位設定的父物件的頂邊位移。

　　　　　　　　right：用於設定目標對象相對於最近一個具有定位設定的父物件的右邊位移。

　　　　　　　　bottom：用於設定目標對象相對於最近一個具有定位設定的父物件的底邊位移。

　　　　　　　　left：用於設定目標對象相對於最近一個具有定位設定的父物件的左邊位移。

 

9.3　　輪廓相關屬性

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

　　　　　　輪廓相關屬性有如下幾個：

　　　　　　　　outline：這是一個複合屬性，可全面設定目標對象輪廓的顏色、線型、線寬三個屬性。

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

　　　　　　　　outline-style：用於設定組件的輪廓線型。該屬性支援的屬性值有none、dotted、dashed、solid、

　　　　　　　　　　　　　　　　double、groove、ridge、inset、outset，這些屬性值與邊框線型意義完全相同。

　　　　　　　　outline-width：用於設定目標組件的倫寬寬度。

　　　　　　　　outline-offset：用於設定目標組件的輪廓位移距(就是輪廓與邊框之間的距離)。

　　　　　　代碼示範：

　　　　　　　　//為該div元素設定寬度為10px的灰色實線輪廓的CSS樣式

　　　　　　　　div{

　　　　　　　　　　width:200px;

　　　　　　　　　　height:100px;

　　　　　　　　　　outline:rgba(50,50,50,0.5) solid 10px;

　　　　　　　　}