mooc-CSS方面的總結與梳理

youou發表於2021-09-09
CSS
margin改變尺寸

margin與可視尺寸

1、適用於沒有設定width/height的普通block水平元素。

（浮動元素，absolute/fixed元素，內聯元素不在此範圍內）

2、只適用於水平方向的尺寸

margin與佔據尺寸

1、塊級/內聯元素同樣適用

2、與有沒有設定width/height無關

3、適用於垂直與水平方向

在“滾動容器內上下留白”，外層div使用padding時，會導致瀏覽器相容問題。使用內層元素margin可以生效。

margin與百分比單位

普通元素百分比margin的計算規則：根據當前元素的寬。

絕對定位元素百分比margin的計算規則：根據當前元素的第一個定位祖先元素的寬

margin重疊

1、水平塊級元素，不包括浮動元素與絕對定位元素。

2、不考慮writing-mode，只發生在垂直方向。

重疊情況

1、相鄰兄弟元素

2、父元素與第一個/最後一個子元素重疊

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4729/viewspace-2798854/，如需轉載，請註明出處，否則將追究法律責任。

相關文章