首页 前端知识 Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位(2)

Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位(2)

2024-08-25 23:08:39 前端知识 前端哥 257 289 我要收藏
+ [六、relative 相对定位](#relative__40)
+ [七、absolute 绝对定位](#absolute__79)
+ [八、fixed 固定定位](#fixed__128)
+ [九、拓展阅读](#_144)

一、前言

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 绝对定位

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

  • 如果父元素或祖先元素没有定位则相对于页面文档进行定位;
  • 绝对定位的元素脱离标准文档流,不再占有原来的位置;
  • 使用绝对定位的元素父元素一般设置为相对定位;

绝对定位示例:

css

1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解

js

1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?

slate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?

[外链图片转存中…(img-PvA25sI5-1714163837353)]

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16899.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

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