Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位(1)

普通流中元素的位置由元素在 (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 {
  /\* 设置绝对定位 \*/
#### 总结一下



面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**



![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**



![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)



**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**



![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)



**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。