大小相关属性

大小相关属性主要用于设置目标对象的宽度、高度，包括最大宽度、高度，以及最小宽度、高度。常用的大小相关属性有如下几个。

• 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:设置轮廓的偏移距，轮廓与边框之间的距离。