css中的大小、定位、轮廓相关属性

css中的大小、定位、轮廓相关属性

1.通过height、width属性控制组件大小

　　height：高度，可以设置任何有效的距离值；

　　width：宽度，可以设置任何有效的属性值；

　　max-height、min-height用于设置最大最小的高度，当高度大于最大高度时将会被自动转换成最大

　　　　高度，同理最小高度也是一样；

　　max-width、min-width用于设置最大最小的宽度，和高度一样，只要超过了规定值，就会自动被转

　　　　换成规定值；

2.css3新增的box-sizing属性

　　该属性可以设置3个值，content-box、padding-ox、border-box

　　content-box：通过控制width、height来达到控制内容区的大小；

　　padding-box：通过控制width、height来达到控制内补丁区加内容区的大小；

　　border-box：通过设置width、height来达到控制内容区加内补丁区加外边框区的大小；

3.css3新增的resize属性　　

　　resize也就是可以让用户自己来通过拖拉来改变元素的大小，通常可以设定5个值，分别是none、both、horizon、vertiacal、

　　　　inherit；

　　none：也就是不允许的意思，用户是没有权限来改变的；

　　both：用户不被允许改变组件的高度和宽度；

　　horizon：设置不允许用户改变组件的宽度；

　　vertical：设置用户不允许改变组件的高度；

　　inherit：继承父元素的resize的属性；

4.定位相关属性

　　定位相关属性可以设置组件的位置，包括是否悬浮，这样可以漂浮的<div../>来达到在页面漂浮的效果；

　　通常有以下几个值可供选择：

　　position：可以设置为absolute（允许组件漂浮），relative（参照前一个对象进行设置），static（一页面为参考系）；　　　　z-index：此属性仅当position为relative或absolute时有效，该值越大，漂浮层越附在上面；

　　top：设置相对于父对象的顶边的偏移；

　　right：设置相对于父对象的右侧偏移；

　　left：设置相对于父对象的左侧偏移；

　　bottom：设置相对于父对象的底边偏移量；

5.轮廓相关属性

　　轮廓可用于让组件周围有一圈光晕效果，可以设置以下几个属性的值

　　outline-color：轮廓的颜色；

　　outline-style：轮廓的线性，可以设置为dotted,none,dashed,double,groove,ridge,inset,outset；

　　outline-width:轮廓的宽度；

　　outline-offset：用于设置轮廓的偏移距；