概述

雖然之前總結了一些頁面布局與編寫的心得，但是寫起頁面來還是有很多疑惑的，主要是在有多種寫法的時候該用哪種寫法？個人覺得這個問題很重要，不能哪種方法能用就用那種方法算了，因為要考慮到日后維護和頁面的健壯性。所以自己理了一下相關的問題，總結在下面，供以后開發時參考，相信對其他人也有用。

寬高

要不要設定每個元素的寬高？用數值還是百分比？

首先來想一下不設寬高會怎樣？

對于塊元素，不設定高它縱向就會懶懶的僅包括它包含的元素就行了，不設定寬它橫向就會盡可能的伸展到它能伸展的地方。

對于內聯元素，不設定寬高它就會懶懶的只包含它能包含的元素，如果它其中沒有元素，它就會發生塌陷變成0x0不可見。

所以對于塊元素，一般說來都需要設定它的寬高，特別是寬，不然會發生意想不到的效果。

對于內聯元素，一般來說都不需要設定它的寬高，除非特殊情況比如icon什么的。

那么用數值還是百分比呢？

用百分比更能實現兼容，特別是給body的width和height設定百分比，并且，在特別的情況下，用百分比有意想不到的效果。所以，如果能用百分比，盡量用百分比。需要注意的是，如果用百分比的話，最好有一個max-width(max-height)或者min-width(min-height)來做限制。

margin和padding

以前我一直有一個誤區，就是一個元素的width，height屬性就等于兩條邊框之間的距離。其實這種想法是怪異盒模型。現代標準的盒模型的width和height只是里面content的大小。所以當給元素增加padding屬性時，邊框之間的距離會增大。(雖然理論講起來很簡單，但是按照設計稿就很容易把寬高認為是邊框之間的距離)

對于margin，也有一點需要注意，就是塊之間的縱向margin會發生塌陷的問題。還有一點要注意，如果元素沒有padding，這個時候給第一個子元素的margin-top設定負值的話，父元素會向上移動，原因不明。

但是，對于父元素包含子元素，能用padding也能用margin的情況，該怎么辦呢？雖然padding能夠改變父元素邊框之間的距離，但是能用padding還是用padding（貌似只能用padding?）

定位

定位用margin還是relative的left和top？

我們一般不推薦用絕對布局，但是用margin布局還是relative布局？

事實證明，用relative比用absolute更加難以處理，也難以維護。它偏移了元素，所以還要去找元素的實際位置在哪兒，非常容易混淆。所以推薦用margin定位。

浮動

涉及到浮動的地方，一定要注意清除浮動。

總結

有時候，試著用多種方法解決問題會帶來意想不到的效果，比如說布局可以用margin布局也可以用absolute布局，但是結合起來的話可以做寬度大小兼容。

轉載于:https://www.cnblogs.com/yangzhou33/p/8784774.html

總結

以上是生活随笔為你收集整理的页面布局与编写(续2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。