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

大小相关属性

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:设置轮廓偏移距

时间: 2024-11-10 07:56:58

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

前端笔记十五 DOM编程相关

20160221 DOM编程详解 从document对象到每个常用的html元素,DOM都提供了对应的类 HTMLDocument:代表HTML文档本身 HTMLBodyElement:代表<body />控件 HTMLDivElement:代表<div />控件 HTMLFormElement:代表表单控件 HTMLSelectElement:代表列表框,下拉菜单控件 HTMLOptionElement:代表列表框,下拉菜单选项控件 HTMLFrame:代表<iframe

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

1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height.min-height用于设置最大最小的高度,当高度大于最大高度时将会被自动转换成最大 高度,同理最小高度也是一样: max-width.min-width用于设置最大最小的宽度,和高度一样,只要超过了规定值,就会自动被转 换成规定值: 2.css3新增的box-sizing属性 该属性可以设置3个值,content-box.padd

定位的相关属性

定位方式相关属性 position 取值: 1.static : 默认,静态定位 2.relative : 相对定位 3.absolute : 绝对定位 4.fixed : 固定定位 2.与定位位置相关属性 top bottom left right 以像素为单位的值 3.堆叠顺序 z-index : value; 值越大越靠近用户 4.static 页面中默认定位方式,即文档流定位 5.相对定位 相对于当前元素本身出现的位置而实现定位的一种方式 实现方式: position:relative;

css3大小、定位、轮廓相关属性

1.大小相关属性 1.1 CSS3新增的box-sizing属性 box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: border-box; -moz-box-sizing: border-box; 1.2 CSS3 新增的resize属性 resize: both;——指定可在两个方向上调整大小. res

前端笔记十四 JavaScript语法详解

强制类型转换函数 toString():将布尔值.数值等转换成字符串 parseInt():将字符串.布尔值转换成整数 parseFloat():将字符串.布尔值等转换成浮点数 JavaScript中没有块范围,输出函数中局部变量会覆盖全局变量,即使出了局部函数的范围依旧起作用 在定义变量的过程中,如果使用var则强制定义一个新变量,如果没有var则系统会优先在当前上下文中是否存在该变量,如果没有这个变量才会重新定义一个新的变量 科学技术法表示数值:<num1>E<num2>表示n

前端笔记九,背景、边框和补丁相关属性

常用的背景相关属性:以下属性均在style内设置 background:设置对象的背景样式,不建议直接通过该属性来控制 background-attachment:设置背景图片是随对象内容滚动还是固定的,可选值: scroll:会随内容的滚动而滚动 fixed:背景图片固定 background-color:设置背景色,如果设置了背景图片则会覆盖背景色 background-image:设置背景图片,使用url()函数 background-position:设置对象的背景图片的位置,第一个表示

前端笔记十一,盒模型与布局相关属性

布局相关属性  float:控制目标组件是否浮动以及如何浮动,设置浮动后,该组件被当做块组件处理,即相当于display属性为block:可选的属性值 left:指定对象向左浮动 right:指定对象向右浮动 clear:设置组件的左.右是否哪边不允许出现浮动对象.可选属性值: none:默认值,两边都允许出现浮动组件 left:不允许左边出现浮动组件 right:不允许右边出现浮动组件 both:两边都不允许出现浮动组件 clip:控制对元素进行裁剪 auto:不裁剪 rect(a,b,c,d

Swift学习笔记十:属性

1.存储属性       1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值.存储属性可分为变量存储属性(关键字var描述)和常量存储属性(关键字let描述). struct student{ let name = "" var score = 0 } let a = student(name:"小笨狼",score:96)           注意:                ① 定义储存属性时,需要为每一个属性定义一个默认值.在初始化的时候,

HTML笔记三,表单相关元素和属性

表单元素 <form>:用于生成输入表单,该元素不可视化 action:指定当前表单提交的地址,必填 method:指定提交表单时发送何种类型的请求,post或者get,一般post,必填:其中GET方式可以在地址栏种看到传送的数据,POST方法看不到较安全 enctype:指定对表单内容进行编码的字符集 name:名称 target:以何种方式打开目标url,_self,_blank,_top,_parent四个中的一个 <input>: type= text:单行文本框 pas