前端笔记十，大小、定位、轮廓相关属性

大小相关属性

height:用于设置对象的高度

max-height:设置对象的最大高度，如果该属性值小于min-height属性值，则自动转换为min-height的属性值

min-height:设置对象的最小高度

width:设置对象宽度

max-width:设置对象的最大宽度

min-width:设置对象的最小宽度

box-sizing属性：设置width,height控制哪些区域的宽度、高度；可使用值

content-box:设置的width,height控制元素的内容区的宽度和高度（只有内容区）

padding-box:设置的width,height控制元素内容区和内补丁区的宽度和高度（内补丁区及以内）

border-box:设置的width,height控制元素内容区、内补丁区和边框区的宽度和高度（边框区及以内）

resize属性：设置是否允许用户通过拖动来改变元素的大小，支持以下属性值

　　none:不允许拖动

　　both:允许拖动来改变高度和宽度

　　horizontal:允许拖动来改变组件的宽度

　　vertical:允许拖动来改变组件的高度

　　inherit:继承父类的resize属性，默认值

　　resize对所有指定了overflow属性的组件有效

 

定位相关属性

position:用于设置目标对象的定位方式，可选值：

absolute:允许将该对象漂浮于页面之上，无需考虑它周围内容的布局

relative:目标对象的位置将参照前一个对象的位置进行定位,如基于之前的最后一行文本进行定位

static:仅以页面作为参照系

z-index:设置目标对象的漂浮层的层序，该值越大，漂浮层越浮在上面；仅当position为relative或者absolute时有效，对窗口控件无效，如<select>

top:设置目标对象相对于最近一个具有定位设置的父对象的顶边偏移；仅当position为relative或者absolute时有效

right:设置目标对象相对于最近一个具有定位设置的父对象的右边偏移；仅当position为relative或者absolute时有效

bottom:设置目标对象相对于最近一个具有定位设置的父对象的底边偏移；仅当position为relative或者absolute时有效

left:设置目标对象相对于最近一个具有定位设置的父对象的左边偏移；仅当position为relative或者absolute时有效

 

轮廓相关属性：主要用于让目标对象周围有一圈“光晕”效果

outline:复合属性，全面设置目标对象轮廓的颜色、线型、线宽三种属性

outline-color:设置组件的轮廓颜色

outline-style:设置轮廓线型

outline-width:设置轮廓宽度

outline-offset:设置轮廓偏移距