绝对定位和固定定位会改变元素的 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 | 下边缘 |
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。