CSS定位知识点

卓律涤

已于 2022-03-04 13:56:38 修改

阅读量260

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

于 2022-03-01 23:43:19 首次发布

本文链接：https://blog.csdn.net/IDApprentice/article/details/123219050

版权

CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

定位学习目标:

1.能够说出为什么要用定位

2.能够说出定位的4种分类

3.能够说出4种定位的各自特点

4.能够说出为什么常用子绝父相布局

5.能够写出淘宝轮播图布局

6.能够售出显示隐藏的2种方式以及区别

为什么需要定位?

因为有些效果, 标准流或浮动都无法快速实现, 此时需要定位来实现

所以:

1.浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子

2. 定位则可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置, 并且可以压住其他盒子

定位的组成是什么?(定位说白了也是用来布局的)

定位: 将盒子定在某一个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子

定位由几部分构成? 分别是什么?

1) 两部分

2) 定位 = 定位模式 + 边偏移

什么是定位模式?

定位模式就是用于指定一个元素在文档中的定位方式

什么是边偏移?

边偏移则决定了该元素的最终位置

定位模式具体指的是什么?

定位模式决定元素的定位方式, 它通过CSS的 position 属性来设置, 其值可以分为四个:

值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

定位中如何移动盒子的位置?

通过边偏移

边偏移 就是定位的盒子移动到最终位置. 有 top, bottom, left和right 4个属性

静态定位(static)是什么?

静态定位是元素的默认定位方式, 无定位的意思,

语法:

选择器 {position: static; }

静态定位按照标准流特性拜放位置, 它没有边偏移

静态定位在布局时很少用到

相对定位 relative(重要)是什么?

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的

语法:

选择器 { position: relative; }

相对定位的特点: (定个小目标达到默写标准)

1. 他是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

2. 虽然盒子发生偏移但是原来在标准流的位置 继续占有, 后面的盒子仍然以标准流的方式对待它. (不脱标, 继续保留原来位置)

因此, 相对定位并没有脱标, 它最典型的应用是给绝对定位当老父亲哈哈哈(doge) 这个是pink老师的意思发(并非小卓同学的个人观点)

什么是绝对定位 absolute(重要)?

相对定位是元素在移动位置的时候, 是相对于它祖先元素来说的 (说白了就是拼爹型)

语法:

选择器 { position: absolute; }

绝对定位的特点: (默写~~)

1. 如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位 (Document文档)

2. 如果祖先元素有定位 (相对, 绝对, 固定定位), 则以最近一级的有定位祖先元素为参考点移动位置

绝对定位脱标的不占有原来的位置

绝对定位和相对的定位到底有什么使用场景呢?

为什么说相对定位给绝对定位当爹的呢?

子绝父相是什么?

子绝父相的意思是: 子级使用绝对定位, 父级则需要相对定位 (背默)

子绝父相是定位中最常用的一种方式的这句话的意思是: 子级是绝对定位的话, 父级要用相对定位

1) 子级绝对定位, 不会占有位置, 可以放到父盒子里面的任何一个地方, 不会映像其他的兄弟盒子.

2) 父盒子需要加定位限制子盒子在父盒子内显示

3) 父盒子布局时, 需要占有位置, 因此父亲只能时相对定位

这就是子绝父项的由来, 所以相对定位经常用来作为绝对定位的父级

总结: 因为父级需要占有位置, 因此时相对定位, 子盒子不需要占有位置, 则是绝对定位

但是子绝父相不是永远不变的, 如果父元素不需要占有位置, 子绝父绝也是有可能遇见的

固定定位小技巧: 固定在版心右侧位置

小算法:

1. 让固定定位的盒子 left: 50% 走到浏览器可视区 (也可以看作版心) 的一半位置

2. 让固定定位的盒子 margin-left 版心宽度的一半距离, 多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了