2-css-5

2024-06-06 23:06:24 前端知识 前端哥 683 388 我要收藏

一 定位

1 认识

作用:灵活的改变盒子在网页中的位置

实现:

  1. 定位模式:position
  2. 边偏移:设置盒子的位置 left right top bottom

2 相对定位

position: relative

特点:

  • 不脱标,占用自己原来位置
  • 显示模式特点保持不变
  • 设置边偏移则相对自己原来位置移动

拓展:很少单独使用相对定位,一般是与其他定位方式配合使用

3 绝对定位

position: absolute

使用场景:子级绝对定位,父级相对定位(子绝父相)

特点:

  • 脱标,不占位
  • 显示模式具备行内块特点
  • 设置边偏移则相对最近的已经定位的祖先元素改变位置
  • 如果祖先元素都未定位,则相对浏览器可视区改变位置

4 定位居中

实现步骤:

  • 绝对定位
  • 水平、垂直边偏移为 50%
  • 子级向左、上移动自身尺寸的一半
    • 左、上的外边距为 –尺寸的一半
    • transform: translate(-50%, -50%)

在这里插入图片描述

5 固定定位

position: fixed

场景:元素的位置在网页滚动时不会改变

特点:

  • 脱标,不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置

6 堆叠层级 z-index

默认效果:按照标签书写顺序,后来者居上

作用:设置定位元素的层级顺序,改变定位元素的显示顺序

属性名:z-index

属性值:整数数字(默认值为0,取值越大,层级越高)

7 定位-总结

定位模式属性值是否脱标显示模式参照物
相对定位relative保持标签原有显示模式自己原来的位置
absolute行内块特点1.已经定位的祖先元素;2.浏览器可视区
固定定位fiexed行内块特点浏览器窗口

二 CSS 修饰属性

1 垂直对齐方式 vertical-align

vertical-align 属性设置元素的垂直对齐方式。
css中的vertical-align 属性只能用于 行内元素置换元素(例如 图像和表单输入框) ,此属性不继承。

接下来我们用例子去分析这些值的意思及产生的效果:

首先我们先看一张图,文字的顶线、中线、基线,基线是字母x的下边缘

在这里插入图片描述

在这里插入图片描述

属性名:vertical-align

属性值

属性值效果
baseline基线对齐(默认)
top顶部对齐
居中对齐
bottom底部对齐

2 过渡 transition

作用:可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名:transition(复合属性)

属性值:过渡的属性 花费时间 (s)

提示:

  • 过渡的属性可以是具体的 CSS 属性
  • 也可以为 all(两个状态属性值不同的所有属性,都产生过渡效果)
  • transition 设置给元素本身
img {
    width: 200px;
    height: 200px;
    transition: all 1s;
}
img:hover {
    width: 500px;
    height: 500px;
}

3 透明度 opacity

作用:设置整个元素的透明度(包含背景和内容)

属性名:opacity

属性值:0 – 1

  • 0:完全透明(元素不可见)
  • 1:不透明
  • 0-1之间小数:半透明

4 光标类型 cursor

作用:鼠标悬停在元素上时指针显示样式

属性名:cursor

属性值

属性值效果
default默认值,通常是箭头
小手效果,提示用户可以点击
text工字型,提示用户可以选择文字
move十字光标,提示用户可以移动
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11130.html
标签
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!