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;

　　　　　　　　}