margin的布局剖析.doc

margin系列之布局篇 发表于?2013-12-31?? | ? 分类于?CSS?? | ??14条评论 布局能力或许是Web前端工程师对CSS的最基本的诉求，当开始进入到这个岗位，就避免不了要和CSS打交道，而和CSS交往，布局当然是不可或缺的。 很遗憾的是，CSS2.1之前都没有出现真正意义上的布局属性，直至现如今的CSS3，才开始出现了一些，如：flex, grid 等，不过其兼容性及国内浏览器的使用情况，真令人捉急。 不过，有需求就会有变通，对于达成布局目的，已衍生出各式各样的方法，如：float, inline-block, table, absolute 等等。 其实，这个话题有点脱离?margin?的能力范围，因为单纯的?margin?并无法完成复杂布局，它更多做的是辅助，但却又难以替代。 两栏结构应该是最常见和经典的网页呈现之一吧？如下?图一： classsic layout （图一） 相信对于这样一个网页呈现，你不会陌生。那么你有多少种方案可以达成该布局？我想，4至5种应该是保守估计吧？ 这次，我们只看?margin?是如何做的。 如上关键代码，我们即可实现?图一?布局，该布局有一个特点就是，#main?可以自适应可用空间。 假定?HTML?是给定的，我们来解读一下?CSS?代码： 我们知道块级元素的特性之一是换新行，也就是说，如果想让?#main?和?#aside?在同行显示，我们要么改变其显示属性为?inline-level（即之前说的inline-block布局方式），要么改变其流方式（absolute, float, flex and etc…）。 如上述代码，我们使用了?absolute，即让 ‘#aside’ 脱离常规流，通过绝对定位到想要的位置。 同时你会发现，我们并有改变?#main?的显示属性或者流方式，也就是说其仍然具备块级元素的特性，所以它会自动适应剩余宽度，即我们常说的自适应宽度。 我们并不希望?#main?区域会包含?#aside?在内，于是利用?margin?给 ‘#aside’ 预留出足够其显示的空间，即可达成我们所要的布局。 可能你会问为什么是?margin-left:210px?而不是?200px，实际确实应该是?200px，多出来的?10px?只是为了创建一个列间隙，与布局实现无关。 来看看具体的实现?DEMO1:?margin+absolute布局：左栏固定主内容自适应 就这样，是不是很简单？其实它还有亮点，那就是： 在不修改?HTML?的情况下，只需简单的修改?CSS，我们即可让左右两栏的顺序调换，来看代码： 其实现原理没变，同样看看?DEMO2:?margin+absolute布局：右栏固定主内容自适应 可以更Cool一点，你觉得呢？很多时候，你也许会考虑到，不论在何种情况下，总想保证主要的内容优先于次要的内容呈现给用户，那么，怎么做？ 很简单，只需要将主要内容的HTML排在次要内容的HTML之前即可，因为它是顺序加载渲染的。我们可以这样： 是的，我们只需要将?#main?的HTML挪到?#aside?的HTML前面，令人兴奋的是，改变HTML之后，CSS不需要做任何改变。我们来看?DEMO3:?margin+absolute布局：左栏固定主内容自适应，主内容有限显示 当然，调正列顺序的?DEMO4:?margin+absolute布局：右栏固定主内容自适应，主内容有限显示也同样简单，我们只需要写HTML时注意一下即可。 列举了?absolute+margin?布局的很多优点，但只说一个问题，就足以让你在是否选用这种方式时深思熟虑，是什么呢？ 我们知道?absolute?是定位流，脱离正常排版，也就是说绝对定位元素不影响其上下文的排版方式，你意识到我想说什么了么？ OK，用代码来演示： 看完代码，估计你猜到了。是的，#aside?无法撑开父元素的高度，它将会溢出父元素区域，结果如下图： classsic layout （图二） 来看看这缺陷所导致的情况?DEMO5:?margin+absolute布局的致命缺陷 此时假设你设置父元素?overflow:hidden?那么溢出部分将会被裁减，同样不符合布局意图，无法可破。所以在内容量不可控的场景，不推荐使用这种方式。 和?absolute + margin?方式一样，float + margin?方式一样是经典的利用来布局的方案，并且被更广泛使用。我们仍然以?图一?为例，来看代码： 如上述代码，我们使用了?float，即从图文环绕形态演变而来。当?#aside?定义了?float，那么紧随其后的元素将会环绕在其周围。不过环绕并不是我们想要的结果，我们想要的是 ‘#main’ 也自成封闭矩形，所以利用?margin?留出