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

82 阅读4分钟

最后

我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。

篇幅有限,仅展示部分截图:

开源分享:docs.qq.com/doc/DSmRnRG…

文章目录


一、前言

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;


**TCP协议**

- TCP 和 UDP 的区别?
- TCP 三次握手的过程?
- 为什么是三次而不是两次、四次?
- 三次握手过程中可以携带数据么?
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次?
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击?
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用?
- TCP 的超时重传时间是如何计算的?
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认?
- 如何理解 TCP 的 keep-alive?

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/31471d424c0a475f93138d32b322f011~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771315981&x-signature=DQT%2BkaUrftIE1Cvtemj8vsfm6RM%3D)

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储?各自优劣如何?
- 说一说从输入URL到页面呈现发生了什么?
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全?
- 实现事件的防抖和节流?
- 实现图片懒加载?

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b84428e0265a461787fa1a25f227d0b2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771315981&x-signature=5TLDE4wZci3GDDcgfhF%2BB5%2FqarY%3D)