您的位置:首页 > Web前端

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

2016-01-29 15:22 381 查看
大小相关属性
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:设置轮廓偏移距
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: