在頁面佈局的時候遇到一個問題在此記錄。
有如下佈局需求。頁面上大多數都是這樣的，一塊一塊從上到下排列。
塊與塊之間的間距需要固定由誰來負責。例如第一個塊和第二個塊之間的間距，就需要第二個塊的margin-top完成，文字和第二個塊之間的間距由文字的margin-top來完成。這樣做的好處是，如果這些塊少了一個也不會破壞頁面佈局。如果，不固定，這個間距一會由上面的margin-bottom，一會由下面的margin-top實現，那麼佈局就相對不穩定。如果一個元素某些情況不可見，並且自己實現了上下間距，那麼元素不可見的時候相鄰上下兩個元素就會挨在一起，顯然這是有問題的。
當然不一定非要固定爲margin-top，margin-bottom也可以。
還有一個問題，當固定間距爲margin-top的時候，有可能並不能完全滿足需求。例如上面的第一行文字和最後一行文字和按鈕的關係在某種情況下就很微妙。
我希望第一行文字消失的時候按鈕和上面塊的間距保持爲第一行文字和上面塊的間距。並且，第二行字消失的時候按鈕和下面距離保持爲第二行字和下面塊的距離。
如果第一行文字和上面塊的間距由自己的margin-top實現，按鈕和第一行文字的間距是按鈕的margin-top，那麼如果第一行文字消失按鈕就會挨着上面的塊顯然不對。這時候就需要一個整體的概念來反轉這種關係。在外面包一層父元素，兩行文字和按鈕是一個整體，父元素的margin-top作爲外部塊的間距，然後第一行文字和按鈕之間的間距用文字的margin-bottom來負責。這樣即使第一行文字消失了，也不會影響按鈕的展示。
下面的文字還是按照margin-top來完成即可，這樣下面的文字消失了也會影響按鈕的佈局，下面文字和下面塊的間距交給下面塊去處理吧。
所以總結起來就是：
1. 佈局的間距是誰負責的要有規律
2. 需要準確將頁面上的元素分塊