負 magin
這里引出了“負 margin”的問題:
? 負margin用法權威指南:The Definitive Guide to Using Negative Margins 的譯文,介紹了負 magin 的一些性質和很多實用技巧
? 簡書 – margin為負值產生的影響和常見布局應用:包括對自身的影響,對文檔流的影響,以及一些在布局中的應用技巧(比如去除列表右邊框,負邊距+定位實現水平垂直居中,去除列表最后一個 li 元素的 border-bottom,多列等高)
? 博客園 – CSS布局奇淫巧計之-強大的負邊距:和上文內容差不多
簡單總結幾點:
? 不使用 float 的話,負 margin 元素是不會破壞頁面的文檔流。所以如果你使用負 margin 上移一個元素,所有跟隨的元素都會被上移(而 relative 定位的元素則不同,會保留原位置,影響文檔流)。
? 當 static 元素的 margin-top/margin-left 被賦予負值時,元素將被拉進指定的方向。
? 如果你設置 margin-bottom/right 為負數,元素并不會如你所想的那樣向下/右移動,而是將后續的元素拖拉進來,覆蓋本來的元素。
? 當元素不存在 width 屬性或者 width: auto 的時候,負 margin 會增加元素的寬度.
? margin-top 為負值不會增加高度,只會產生向上位移;margin-bottom 為負值不會產生位移,會減少自身的供 CSS 讀取的高度,影響下方的元素位置;上下相鄰的元素兩者均為負時,效果不疊加,取負值更多的那個效果。