页面布局与编写(续2)

概述

虽然之前总结了一些页面布局与编写的心得，但是写起页面来还是有很多疑惑的，主要是在有多种写法的时候该用哪种写法？个人觉得这个问题很重要，不能哪种方法能用就用那种方法算了，因为要考虑到日后维护和页面的健壮性。所以自己理了一下相关的问题，总结在下面，供以后开发时参考，相信对其他人也有用。

宽高

要不要设定每个元素的宽高？用数值还是百分比？

首先来想一下不设宽高会怎样？

1. 对于块元素，不设定高它纵向就会懒懒的仅包括它包含的元素就行了，不设定宽它横向就会尽可能的伸展到它能伸展的地方。
2. 对于内联元素，不设定宽高它就会懒懒的只包含它能包含的元素，如果它其中没有元素，它就会发生塌陷变成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