打开全栈工匠技能包-1小时轻松掌握SSR
两小时精通jq+bs插件开发
生产环境下如歌部署Node.js
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
网易内部VUE自定义插件库NPM集成
谁说前端不用懂安全,XSS跨站脚本的危害
webpack的loader到底是什么样的?两小时带你写一个自己loader
文章目录
一、前言
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 绝对定位
通过设置定位的父级元素或祖先元素来进行定位:
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- [外链图片转存中…(img-YhGDHu2E-1715714790404)]