mess

在調(diào)試CSS的時候，常常會出現(xiàn)屬性互相影響的情況，like this

image

為什么？——沒有規(guī)律，不正交

怎么學？——背文檔 or 試

• margin和border

  1. 兄弟元素之間的margin會合并

     • 在兩兄弟間添加一個元素，給該元素加一個border，margin會分開（示例）

     • 在兩兄弟間添加一個元素，給元素設(shè)置display:table/flex屬性，margin會分開（示例）

  2. 父子元素之間的margin合并（示例）

     • 子元素margin和父元素border/padding會相互影響

     • 子元素margin和父元素display/overflow會相互影響

• 小圓點和display（示例）

  <li>元素默認display: list-item，如果將其display設(shè)為其它值，則小圓點就消失了。

• position: absolute和display: inline（示例）

  可以看到display設(shè)置成inline的元素，在使用絕對定位后計算出來block（補充：inline-block也會變?yōu)?code>block，如果使用inline-flex則會變成flex，說明只要使用了position: absolute，任何display設(shè)置有inline的都會被轉(zhuǎn)換）

  image

• transform和position: fixed（示例）

• float和文字（示例）

  float最初的設(shè)計目的是為了圖文混排，因此文字會感知float元素，但float對其它元素位置不會產(chǎn)生影響，因為float元素脫離了文檔流。而使用position: absolute的元素也脫離了文檔流，但其它盒子和文本都會忽略它。

參考內(nèi)容：CSS問什么這么難學？