CSS学习(3)

六、定位方式

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表示帮助

示例:

给TA打赏
共{{data.count}}人
人已打赏
前端

CSS学习(2)

2022-8-10 16:18:18

前端

CSS学习(4)

2022-8-11 15:30:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索