各种布局之间的相互影响
1 在运用布局时, 有时会用到多种不同的布局方式, 但是对这些个布局方式之间是否会相互影响以及会怎样进行相互影响, 在这里需要进行一下稍微的总结
2 后来又想了一下, 这个需求好像是因为, 在使用了一个大的布局方式之后, 我们需要对其中一些子元素的位置进行一些微调整, 而不改变原有的块布局
这就需要考虑到以下几种情况
1 元素设置浮动之后造成的影响
2 各种布局形式之后, 对一个子元素的margin, padding会不会造成一些不恰当的影响
3 grid, flex对整体分布进行布局之后, 其每一个子元素还可不可以使用relative, absolute, fixed定位以及单独设置其left, top, right, bottom
规律总结:
1 元素设置浮动之后:
浮动元素之间的margin仍然适用
元素的display属性会变为inline-block
相对定位(relative)仍然可以使用, 可以自由设置top, left, bottom, right
固定定位(fixed)仍然可以使用, 可以自由设置top, left, bottom, right, 如果不设置, 默认设置为相对其父元素的(0, 0)位置, 其它效果与flex布局中绝对定位的效果原则相同
绝对定位(absolute)仍然可以使用, 可以自由设置top, left, bottom, right, 如果不设置, 默认设置为相对其父元素的(0, 0)位置, 其它效果与flex布局中固定定位的效果原则相同
2 进行flex布局之后:
元素的display属性会被清除
margin属性仍然有效, 但是会遵循"行最多可容下"原则, 即首先会保证元素之间的margin不小于设置的margin值, 然后将margin的大小算进整个元素的大小进行排版布局, 所以, padding border也是会首先算进整个元素的大小, 然后进行排版布局
相对定位: 障眼法, 元素并没有脱离文档流, 我们看到的元素只是我们看到的, 其实并不存在, 真正存在的元素仍然在原来位置, 并且并没有脱离文档流
绝对定位: 仍然可以使用, 但是效果有点迷, 如果我们设置其位置属性(left , top), 那么会按照它的规则进行这个元素的定位而不会再根据其父元素的flex布局进行排版
主要是绝对定位会使这个元素脱离文档流, 设置其位置属性的话, 会进行绝对位置的定位, 这个无话可说,
但是, 如果不设置其位置属性的话, 所有设置绝对定位属性的元素都会单独作为一个元素, 按照其父元素的flex布局规则进行排版, 不管有多少子元素设置了绝对定位属性, 每一个元素都只关心自己在父元素中的flex布局方式, 也就是说, 我们可以想象, 每一个设置了绝对定位的元素都单独拥有一个只属于自己的父元素, 然后自己会在这个只属于自己的父元素中按照它的方式进行布局
固定定位: 仍然可以使用, 其所有效果与绝对定位相同
3 进行grid布局后:
使用grid布局较少, 感觉其各种效果会与flex布局相同
总结一下:
对于dom中元素所在的位置, 可以分为5层, 分别是: 标准文档流层(未设置任何定位属性), 浮动元素层, 相对定位层, 绝对定位层, 固定定位层
1 一般情况下, 哪一个元素在dom树的最下面(即越往后被写出来), 显示的优先级就越高
2 如果设置了定位属性, 那么就要重新考虑显示优先级了
如果一个元素所在的位置是标准文档流层(未设置任何定位属性), 那么这个元素一定是显示优先级最低的
如果一个元素设置了后面4中定位属性, 那么这四种定位属性会赋予元素相同的优先级, 然后就要遵循第一个显示规则了(哪个元素后被写出来, 哪个元素的显示优先级就越高)
3 设置相对定位之后, 元素仍然存在于标准文档流之中
4 为了下面总结方便, 这里划分为
三种大布局: float布局, flex布局, grid布局
三种大定位: relative定位, absolute定位, fixed定位
absolute定位 和 fixed定位 优先级最高, 可以不遵循三大布局的排版规则
但是如果不设置其位置属性(left, top), 每一个元素都会单独遵循flex布局和grid布局的排版方式, 但是不会遵循float布局的排版方式, 这两个元素的默认位置原则相同, 但是这个原则也是很迷, 不知道为啥会那样
标准文档流元素 与 设置了相对定位属性的元素, 会无条件遵从三大布局的排版规则
后两大布局中, 都存在由三大定位加上没有定位加上浮动(总共5种定位)确定的5个显示层, 其中, 没有定位属性的元素显示优先级最低, 设置了定位属性的元素显示优先级平等, 都会按照谁后被写出来, 谁就优先显示的原则.
