1.1网页常见布局方式
1.标准流
1.块级元素独占一行直布局
2.行内元素/行内块元素一行显示多个 ------>水平布局
2.浮动
1. 可以让原本垂直布局的 块级元素变成水平布局
3.定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况
1.2使用定位的步骤
1.设置定位方式
属性名: position
position 规定元素的定位方式(类型)
static 默认值,没有定位(写和不写一样)
fixed 固定定位,会让元素生成 固定定位的元素
固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的
特点: 1、固定定位会使元素脱离文档流
2、元素在成为固定定位后,在没有规定固定宽度的情况下,宽高由内容撑开
3、固定定位会使元素产生块级框,不论任何类型的元素
使用了固定定位后就都可以设置宽高了 固定定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置
left/right/top/bottom 指定定位元素具体定位的位置
属性值:length(数值+单位) %
(固定定位:根据浏览器显示窗口的宽[ left、right ]和高[ top、bottom ]计算的百分比值)
常见属性值:
定位方式 | 属性值 |
---|---|
静态定位 | static |
相对定位 | relative |
绝对定位 | absolute |
固定定位 | fixoed |
设置偏移值 偏移值设置分为两个方向,水平和垂直方向各选一使用即可
选取的原则一般是就近原则 《离哪边近用哪个)
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
1.3相对定位
介绍:自恋型定位,相对于自己之前的位置进行移动
代码: position:relative;
特点:
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置一没有脱标
应用场景:
1.配合绝对定位组CP(子绝父相)
2.用于小范围的移动
知识小结
相对定位position的属性值是什么?relative
相对定位是否需要配合方位属性实现移动? 需要配合方位属性实现移动
相对定位的元素相对于谁进行移动?相对于自己原来位置进行移动
相对定位的元素在网页中是否占位置? 在页面中占位置一没有脱标
1.4绝对定位
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动
代码: position:absolute;
特点:
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置一已经脱标
应用场景:
1.配合绝对定位组CP(子绝父相)
绝对定位: 先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位有父级,但父级没有定位,以浏览器窗口为参照为进行定位
绝对定位元素是根据 离其(自身)最近并且有定位设置(static定位除外)的父元素 作为 定位位置的参考起点的
最终绝对定位元素 根据谁 作为 定位位置的参考起点,就将谁叫做 绝对定位的元素的 包含块
绝对定位元素 会查找 离其最近并且有定位设置的父元素 作为 包含块 使用
但是如果 向上找到html标签,都没有父元素有定位设置,则中 将 html标签 视为 包含块
一般情况如果希望 绝对定位元素 根据父元素定位偏移,就会给父元素 设置定位position:relative;
特点:
1、绝对定位会使元素脱离文档流
2、元素在成为绝对定位后,在没有规定固定宽高的情况下,宽高由内容撑开
3、绝对定位会使元素产生块级框,不论任何类型的元素使用了绝对定位后就都可以设置宽高了
绝对定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置
绝对定位和相对定位的区别?
绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位将元素从原来位置拿走,后面的元素就会占据绝对定位元素的位置。文章来源:https://www.toymoban.com/news/detail-692466.html
相对定位与绝对定位相反,它移动后原本所占的空间仍保留。可理解为它进行定位后,之前的位置后面的元素不可占据。文章来源地址https://www.toymoban.com/news/detail-692466.html
到了这里,关于css-定位position 理论的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!