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?和?#asi