六、定位方式
1.简介
通过position属性实现对元素的定位,有四种定位方式
常用取值:
设置定位方式后,还要设置定位属性(偏移量):top、bottom、left、right
2.相对定位
先设置元素的position属性为relative,然后再设置偏移量
3.绝对定位
先设置父标签为非static定位,然后设置元素的position属性为absolute,最后再设置偏移量
注意:
- 一般来说都会将父标签设置为非static定位
- 如果父标签不是非static定位,则会相对于浏览器窗口进行定位
- 设置元素为绝对定位后,元素会浮到页面上方
4.固定定位
先设置元素的position属性为fixed,然后再设置偏移量
设置元素为固定定位后,元素会浮动在面面上方
5.z-index
设置元素定位方式后,元素会浮在页面上方,此时可以通过z-index属性设置优先级,控制元素的堆叠顺序
取值为数字,值越大优先级越高,默认为auto(大多数浏览器默认为0)
注意:只能给非static定位的元素设置z-index属性
示例:
七、其他CSS属性
1.浮动和清除
1.1 浮动属性
通过float属性来实现元素的浮动,可以让块级元素脱离常规的文档流,向左或向右移动,在同一行显示,
如果一行显示不下,则会换行显示
常用取值:
- left左浮动
- right右浮动
- none不浮动,默认值
设置float属性后,元素会浮在页面上层,此时父容器无法计算自己尺寸,如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决
示例:
1.2 清除属性
通过clear属性来实现清除,设置元素的哪一侧不允许有浮动元素
常用取值:
- left左侧不允许出现浮动元素
- right右侧不允许出现浮动元素
- both两侧不允许出现浮动元素
- none允许两侧出现浮动元素,默值
结论:
- 对于非浮动元素,两边都可以设置清除(常用)
- 对于浮动元素,向哪边浮动,就只能设置哪边的清除
示例:
2.元素的显示和隐藏
2.1 display
通过display属性设置元素是否显示,以及是否独占一行
常用取值:
注意:
行级元素是无法设置宽度和高度的,可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了
2.2 visibility
也可以通过visibility属性设置元素的显示和隐藏
常用属性:
2.3 区别
- display隐藏时不再占据页面中的空间,后面的元素会占用其位置
- visibility隐藏时会占据页面中的空间,位置还保留在页面中,只是不显示
示例:
3.轮廓属性
3.1 简介
轮廓outline,用于在元素周围绘制一个轮廓,位于border外围,可以突出显示元素
3.2 基本用法
常用属性:
- outline-width:轮廓宽度
- outline-color:轮廓颜色
- outline-style:轮廓样式
- outline简写
在浏览器中,当鼠标单击或使用TAB键让一个表单或链接获得焦点时,该元素会有一个轮廓outline
优点:可以提高使用表单的用户体验
缺点:有时会影响美观
3.3 outline和border的区别
- border可以应用于所有html元素,而outline主要用于表单元素、超链接元素
- 当元素获得焦点时会自动出现outline轮廓效果,当失去焦点时会自动消失,这是浏览器默认行为
- outline不影响元素的尺寸和位置,而border会影响
示例:
4.其他属性
4.1 宽高相关
- max-width:设置元素的最大宽度
- max-height:设置元素的最大高度
- min-width设置元素的最小宽度
- min-height设置元素的最小高度
4.2 overflow属性
当元素内容溢出时该如何处理
常用取值:
- visible溢出时可见,显示在元素外,默认值
- hidden溢出的部分不可见(常用)
- scroll无论是否出现溢出始终出现滚动条
- auto溢出时自动出现滚动条
4.3 cursor属性
用于设置光标的形状
常用属性:
- default默认光标,一般为箭头
- pointer手形,光标移动超链接上时一般显示为手形
- move表示可移动
- text表示文 本
- wait表示程序正忙,需要等待
- hep表示帮助
示例: