别再去记什么“子绝父相”了

简介: 子绝父相只是因为经常会这么用所以才有人把它总结为这几个字的,但并不是只能这样用,就算是:子绝父绝,子绝父固定都是可以的,absolute 的 left、right、top、bottom 这几个定位的属性参照对象是最邻近的定位祖先元素,所以只要我们要相对与哪个祖先来定位只要将祖先设置为定位元素就行,至于是哪种就得看你的实际需求了,当希望子元素相对于父元素进行定位,又不希望父元素脱标的时候,我们才会会用到子绝父相。

image.png


Xxx,这里咋回事啊,为啥我整了半天也没搞出来,快来教教我。就搞出这图这样的,要求不能通过具体的像素定位。


image.png


这不就是个定位吗?应该没啥大问题吧,你哪不会啊?


就老师讲的那个子绝父相啊,不是要给子元素相对于父元素定位吗,然我就把红的设为相对定位啊,但是绿色设为绝对定位就可以让它相对红色定位了啊,但是调蓝色的时候绿色已经设置为绝对定位了,我就不能再把它设置为相对定位了,那我咋整啊!


不能再把绿色设为相对定位就别设呗,直接摆烂,嘻嘻~


我靠,你咋回事啊,会不会啊你在这扯


image.png


你试试再说,不行你今天晚上把我赶出寝室


好,我试试。呀,行了行了。快快快,告诉我咋回事呀这。


image.png


唉你不该记这么死的,我们学习应该多了解一点相关的重要细节才能灵活的运用,只记一个子绝父相肯定不行呀。我来给你好好讲讲吧:


子绝父相只是因为经常会这么用所以才有人把它总结为这几个字的,但并不是只能这样用,就算是:子绝父绝,子绝父固定都是可以的,absolute 的 left、right、top、bottom 这几个定位的属性参照对象是最邻近的定位祖先元素,所以只要我们要相对与哪个祖先来定位只要将祖先设置为定位元素就行,至于是哪种就得看你的实际需求了,当希望子元素相对于父元素进行定位,又不希望父元素脱标的时候,我们才会会用到子绝父相。


噢,原来如此,我悟了。扶我起来,我还能肝!


啥,你悟了?那我再问你几个问题,看你会不会。你知道啥事时候用相对定位 relative 吗?


哈,就这么简单的问题你也太看不起我了吧。我们一般会在要对某些元素进行微调的时候使用 relative,就比一些网站中的小图标,有时候在标准流下放好时位置如果感觉还差那么点,需要微微的调整会更好看,那就用relative。


居然能答上来,看来没完全白学呀。


还有!还有!我还没说完呢。position: relative; 是不会脱离标准流的,设置后再定位的话还会占用空间,并且占用的是原来位置的空间。


哟,挺不错的嘛,那我就来点难一点的吧。说说将 position 设置为absolute/fixed 后元素会有啥变化吧。


脱离标准流呗……


还有呢?


额,这个嘛……


image.png


没事,我来告诉你:


1. 元素不再严格区分块级(block)、行内级(inline),行内块级(inline-block),若元素未设置宽度高度,那么元素的宽高将完全由内容决定,看个例子就明白了:

未设置前:


image.png


image.png


2. 不再给父元素汇报自身宽高,若父元素没有设置宽高,将不能撑起父元素,举个例子:


设置前:


image.png


设置后:


image.png


3. 即使原来是行内级元素也可以随意设置宽度高度,直接看例子加深理解


image.png


啊啊啊,这么多啊,卧槽卧槽,不过没关系,对我这菜鸟来说简直全是干货啊。还有吗还有吗,快给我继续叨叨……


那我再问你最后一个,对于绝对定位的元素,我们怎么让它在父元素里水平居中呢?


在父元素里居中,嗯……我想想,给它设置 text-align: center; 吗?


不行哦,还有一点你不对的地方就是,text-align: center; 是给父元素设置的,使得父元素设置之后,它里面的行内级元素居中


奥,这样啊,那是 margin: 0 auto; ?


哈哈哈,还是不行,要是真这么简单我还问你?让我告诉你,首先我们需要知道:


对于绝对定位元素来说


  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
  • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度


我们原来设置 margin: 0 auto; 时是让 margin-left = margin-right,从而使得元素两边空的位置相等而达到居中效果,那我们这里的区别是什么呢?只是多了个 left 和 right 而已,那么我们把他们全设置为0的话是不是就能达到我们想要的效果呢?没错,就是这样的。接下来让我们看代码:


image.png


哈哈,我又悟了,这就去试一试,冲呀!


image.png


写在最后:


这是第一次这么写文章,之前就见过类似这样对话式构建一个场景来讲知识的,感觉这样的文章有点循循善诱能更让人想读下去效果。所以自己也来试一下把自己学的东西分享一下,结果一写就接近三小时(毕竟自导自演也不容易啊),讲的知识可能对于大佬来说相对简单,但对于新手或者CSS基础学的不是太好的朋友肯定都是有用的,所以希望如果大佬不喜欢的话轻喷

相关文章
冷门但好看的 VSCode 主题推荐
笔者在使用VSCode进行开发的过程中喜欢没事就逛一逛插件商店里的颜色主题,也看过国内外许多论坛上面的颜色主题推荐,不知不觉已经下载了超过一百个的颜色主题。这篇文章总结了我用过的最舒服的一些颜色主题。
6177 0
冷门但好看的 VSCode 主题推荐
不要过度封装!封装一个最简单的Axios!
前言 axios 是目前最优秀的 HTTP 请求库之一,虽然 axios 已经封装的非常好了,我们可以直接拿过来用。但是在实际的项目中,我们可能还需要对 axios 在封装一下,以便我们更好的管理项目和各个借口。 但是,目前网上有特别多的针对于 axios 在项目中的封装。不得不说,很多大佬封装得非常全面,方方面面都考虑到了。但是我们的每个真的都需要那些封装吗?显然不是的,网上的很多封装其实都显得有点过度封装了! 本篇文章实现最简单 Axios 封装,让小伙伴们扩展起来容易一些。
5520 0
不要过度封装!封装一个最简单的Axios!
vue项目开发笔记记录(一)
vue项目开发笔记记录
171 0
Centos7安装Docker
安装docker Centos7安装Docker 1.卸载Docker 2.安装docker 3.启动Docker CentOS7安装DockerCompose 1.下载 2.修改文件权限 3.Base自动补全命令:
4682 0
Bpmn.js 进阶指南之原理分析与模块改造(上)
Bpmn.js 进阶指南之原理分析与模块改造
2424 1
Bpmn.js 进阶指南之原理分析与模块改造(下)
Bpmn.js 进阶指南之原理分析与模块改造
1893 1
IDEA 自定义注解(类注释、方法注释)
IDEA 自定义注解(类注释、方法注释)
4403 1
IDEA 自定义注解(类注释、方法注释)
你可能不知道的一些关于a标签的小细节
本篇文章详细介绍了关于a标签的几个小细节,也可以说是一些sao操作,完全可以在开发中使用,体验非常奈斯
270 0
你可能不知道的一些关于a标签的小细节
手写代码:实现一个EventBus
EventBus,事件总线。总线一词来自于《计算机组成原理》中的”系统总线“,是指用于连接多个部件的信息传输线,各部件共享的传输介质。我们通常把事件总线也成为自定义事件,一般包含`on`、`once`、`emit`、`off`等方法。在Vue2中想要实现EventBus比较简单,直接暴露出一个`new Vue()`实例即可,以此为思路,我们应该如何自定义实现EventBus呢?
539 0
手写代码:实现一个EventBus