首页 > 其他分享 >Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解

Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解

时间:2023-08-06 10:01:16浏览次数:57  
标签:定位 Vue 进阶 位置 相对 文档 元素 属性

(文章目录)

一、前言

CSS 提供了三种基本的定位机制:普通流浮动固定定位;通过这三种方式可实现页面的排版布局。

二、普通流

普通流中元素的位置由元素在 (X)HTML 中的位置决定:

  • 块级元素独自占一行,在文本流中从上到下一个接一个地排列;

  • 行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列;

三、浮动

  • 浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。

四、固定定位

固定定位是将元素定在某个位置,定位元素的层级要高于浮动元素;

通过定位可以让元素相对于其正常位置进行偏移出现在别的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置;

定位可以将元素放置在页面中的任何位置,这是标准文档流浮动无法实现的。

CSS 通过 position 属性设置定位方式,其对应的属性值如下:

属性值 作用
static 静态定位,默认的定位方式
relative 相对定位
absolute 绝对定位
fixed 固定定位

绝对定位固定定位会改变元素的 display 属性,默认将元素转为行内块元素。

五、static 静态定位

按照标准文档流的规则来放置元素,基本不用;

六、relative 相对定位

相对于自己在标准文档流中的位置进行定位;原来的位置仍占有空间;

相对定位示例:

/* 父元素 */
.parent {
  width: 400px;
  height: 400px;
  border: 1px solid gray;
}
/* 两个子元素 */
.box1,
.box2 {
  width: 200px;
  height: 200px;
}
.box1 {
  /* 设置相对定位 */
  position: relative;
  /* 相对元素原来的位置距离上边缘 50px */
  top: 50px;
  /* 相对于原来的位置距左边缘 100px */
  left: 100px;
  background-color: green;
}
.box2 {
  background-color: blue;
}
<div class="parent">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

在这里插入图片描述

七、absolute 绝对定位

通过设置定位的父级元素或祖先元素来进行定位:

  • 如果父元素或祖先元素没有定位则相对于页面文档进行定位;

  • 绝对定位的元素脱离标准文档流,不再占有原来的位置;

  • 使用绝对定位的元素父元素一般设置为相对定位;

绝对定位示例:

/* 父元素 */
.parent {
  width: 400px;
  height: 400px;
  /* 父元素设置相对定位 */
  position: relative;
  border: 1px solid gray;
}
/* 两个子元素 */
.box1,
.box2 {
  width: 200px;
  height: 200px;
}
.box1 {
  background-color: red;
}
.box2 {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘 50px */
  top: 50px;
  /* 距离父元素左边缘 100px */
  left: 100px;
  background-color: purple;
}
<div class="parent">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

在这里插入图片描述

八、fixed 固定定位

  • 相对于浏览器可视窗口进行定位,位置与父元素无关;

  • 会将元素固定在窗口的某个位置不随页面的滚动而改变;

想实现元素的固定定位,只设置定位方式还是不够的,需要结合 CSS 中的方位属性来实现定位。

属性 作用
left 定位元素左外边距边界与其父元素左边界之间的偏移(元素的左边缘与参照元素位置间的距离)
right 右边缘
top 上边缘
bottom 下边缘

属性单位可以是 px、cm、% 等;使用时一般是水平方向的属性(left、right)与垂直方向的属性(top、bottom)结合使用;topbottom 不要同时使用,leftright 不要同时使用。

九、拓展阅读

标签:定位,Vue,进阶,位置,相对,文档,元素,属性
From: https://blog.51cto.com/shq5785/6981931

相关文章

  • vue-table-width-grid 以及axios下载时报错
    importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'//导入字体图标import'./assets/fonts/iconfont.css'importElementUIfrom'element-ui'impor......
  • Spring Boot&Vue3前后端分离实战wiki知识库系统<十一>--文档管理功能开发三
    文档内容的显示:在上一次SpringBoot&Vue3前后端分离实战wiki知识库系统<十>--文档管理功能开发二文档管理模块还差文档的显示木有完成,所以接下来先将这块模块给收尾了。增加单独获取内容的接口:概述:在前端页面文档查询时,只查询了文档的基本信息,其中文档的富文本内容是木有带出来的:当......
  • Spring Boot + Vue3前后端分离实战wiki知识库系统<十一>--文档管理功能开发三
    文档内容的显示:在上一次https://www.cnblogs.com/webor2006/p/17510360.html文档管理模块还差文档的显示木有完成,所以接下来先将这块模块给收尾了。增加单独获取内容的接口:概述:在前端页面文档查询时,只查询了文档的基本信息,其中文档的富文本内容是木有带出来的:当然也不可能......
  • vue过度动画
    要过度的元素需要有v-if或者v-show,用transition包裹<transitionname="sort"><divclass="sort"v-show="show"><divclass="all-sort-list2"@click="goSearch">......
  • selenium 无法定位元素的一种情形 - iframe
    今天在爬取一个反爬措施较严格的网站时,使用selenium做自动化登录时,无法定位输入框的问题。查看网页源代码确实没有登录相关元素的标签,可以判定是采用的动态加载,但是即使使用的动态加载,等待页面渲染完毕之后应该还是能定位的。看了下渲染完毕之后的网页源码,发现了在当前html......
  • 《VTK图形图像开发进阶》第2章——三维场的基本要素
    2.1灯光剧场里有各式各样的灯光,三维渲染场景中也一样,可以有多个灯光存在。灯光和相机是三维渲染场景必备的要素,如果没有指定,vtkRenderer会自动创建默认的灯光和相机。VTK里用类vtkLight来表示渲染场景中的灯光。与现实中的灯光类似,VTK中的vtkLight示例也可以打开、关闭,设置灯光......
  • 学不会的博弈论——进阶篇
    前言浅浅复习(我想说,国家队论文yyds......
  • Vue3 自定义组件使用v-model
    Vue的数据流传递是单向的,也就说数据只能由父组件通过props传递给子组件,子组件无法修改父组件传过来的状态,这样做为了避免因为子组件修改父组件的状态而导致数据流混乱以至难以理解。所以千万不要在子组件中直接修改props。子组件如果想要将数据传递给父组件,就需要使用Vue提供......
  • Vue脚手架
    1-Vue脚手架:官网:https://cli.vuejs.org/zh/1-配置淘宝镜像:npmconfigsetregistryhttps://registry.npm.taobao.org/2-安装‘脚手架’:sudonpminstall-g@vue/cli3-切换到合理位置:cd你需要的文件夹3.5-创建一个项目:vuecreate项目名字4-启动项目:npmrun......
  • 随笔(二十六)『SpringBoot + Vue 简单部署到Linux』
    1、安装docker1.1、卸载系统之前的dockersudoyumremovedocker\docker-client\docker-client-latest\docker-common\docker-latest\docker-latest-logrotate\......