作者：知乎用户
链接：https://www.zhihu.com/question/29550687/answer/44807311
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
对于【整个页面】的布局，现在由于table布局基本已经销声匿迹（html邮件还在用），所以“HTML+CSS布局”几乎是所有布局的统称。首先说下移动端的布局：*【rem布局】：rem是指html元素上的字体大小对应的像素数值，使用rem为长度单位。理想情况下如果将所有的长度单位都用rem标示，那么我只需要更改html上的font-size即可同步按比例更改所有长度单位（包括元素宽高、边距、字体大小等）。这在手机屏幕大小不定时就特别有用，只需要计算一下手机屏幕宽度，设置合适的html上的font-size，就能自适应。这里有一个开源代码能让你轻松完成rem布局和了解更多信息：jieyou/rem_layout · GitHub*【弹性盒模型布局】：在rem开始风靡以前，为了解决手机屏幕宽度不定的问题，更多的采用的是弹性盒模型，一句话介绍就是同级子元素按比例占据横向剩余区域（纵向弹性盒这里暂不展开）。扩展阅读：使用 CSS 弹性盒，如果你不了解弹性盒，可以在不掌握任何知识的情况下用这个插件来实现：jieyou/flexibleWapHelper · GitHub*【百分比布局】：移动端前端开发的蛮荒阶段，我们采用的是远古时代的百分比布局，简单粗暴：横向充满则100%；两栏则各50%；三栏则各33.3%，不过这种方式很快被弹性盒模型布局取代。上述移动端布局中，通常都会互相结合使用，并且在设定长度单位时，一部分元素还是会根据情况使用绝对的像素值单位（比如设置1px宽的border）（css像素和物理像素这里暂不展开）。然后说PC端的，由于各个CSS框架的推进，基本上都是以12列（或12的倍数）网格布局为主了，然后网格布局又分为【流式网格】和【固定宽度网格】（如总宽度设为960px）。前者通常用百分比来实现，并且已经计算和减去了所谓的“槽”的宽度；后者通常是设置了具体的像素定值。在更早的时候，则是常用的一栏、两栏、三栏布局，内部通常都用浮动来实现。楼主所说的“比如1. 固定侧边栏布局2. 清除浮动3. 垂直居中”都是某些布局的细节，我认为还不能成为“模式”、“经典案例”，应该是一个前端开发人员必备的最原子的技能，基本上如果纯手工切几个稍微复杂的页面都会遇到，一次基本就记住和掌握了。
出自:https://www.zhihu.com/question/29550687