理解margin負值

2022-03-04 19:13:33 字數 505 閱讀 9951

上和左方的margin負值使元素向上和左方向移動,如果該元素position不是absolute或fixed,這還會導致之後的元素也向上,左移

下和右方的margin負值會縮小下和右方的空間,使處於該元素下,右方的元素被拉向該元素,使之後的元素發生向上,左移,以至於與之重疊

由於margin在上下左右的解析邏輯不同,引入參考線概念

margin 上方負值以包含塊(containing block) 內容區域的上邊或者上方相連元素 margin 的下邊為參考線

margin 左方負值以包含塊(containing block) 內容區域的左邊或者左方相連元素 margin 的右邊為參考線

margin 下方負值以元素本身 border 的下邊為參考線

margin 右方負值以元素本身 border 的右邊為參考線

雙飛翼布局:左右列固定,中間列自適應布局

margin負值問題

1 原理 2 對普通文件流中元素 指不是浮動元素也不是絕對定位 固定定位的元素等 的影響 負邊距對由普通文件流控制的元素的作用是,會使它們在文件流中的位置發生偏移,這種偏移不同於相對定位 通過相對定位偏移後的元素仍然會堅守著它原來佔據的空間,不會讓文件流的其它元素乘虛而入 通過負邊距進行偏移的元素,...

margin負值5種應用

最近做的專案中經常會用到margin的負值,這裡就總結一下關於margin負值的5種使用及相關bug的解決。1.在流動性布局中的應用 如wordpress的兩欄式不固定布局就是使用margin負值來實現的定位,屬於左右margin負值在流動性布局中的應用。左側寬度固定 寬度自適應,啦啦啦。寬度自適應...

margin負值的應用總結

margin負值 之前一直 應用都是定位 和 列表的時候,從來沒有想著進行個總結,直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章,加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...