+ [六、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)]
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
