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個顯示層, 其中, 沒有定位屬性的元素顯示優先順序最低, 設定了定位屬性的元素顯示優先順序平等, 都會按照誰後被寫出來, 誰就優先顯示的原則.
聯合體成員之間的相互影響
觀察 聯合體成員之間的相互影響 include void main d printf d.ch c d.a x d.l x n d.ch,d.a,d.l d.a printf d.ch c d.a x d.l x d.ch,d.a,d.l 執行結果 0x41 位址2000 位址2000存放的值為0x...
git 切換分支相互影響的問題
原因 如果當前分支所做的修改沒有提交的話去其他分支也會看到相同的修改 解決辦法 1.用 git add和 git commit提交修改，只要用 git status 檢查工作區和暫存區是乾淨的就可以了。2.那如果我當前分支上的工作還沒做完，不能提交，但又想去其他分支，這時候可以把當前分支的工作現場隱...
oracle中排序和分頁的相互影響
如下sql select from select rownum rn t from select from pd model order by add date desc t where rownum 70 10 where rn 70 1 滿足要求的記錄總共有268條，但是傳入不同的引數查詢第60...