工作中常用的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%，不过这种方式很快被弹性盒模型布局取代。想要绝提了解下可以加我扣裙也可以看我资料头像加我，前面是二五七，中间则是零一四，后面是001，合起来就可以了。
上述移动端布局中，通常都会互相结合使用，并且在设定长度单位时，一部分元素还是会根据情况使用绝对的像素值单位（比如设置1px宽的border）（css像素和物理像素这里暂不展开）。
然后说PC端的，由于各个CSS框架的推进，基本上都是以12列（或12的倍数）网格布局为主了，然后网格布局又分为【流式网格】和【固定宽度网格】（如总宽度设为960px）。前者通常用百分比来实现，并且已经计算和减去了所谓的“槽”的宽度；后者通常是设置了具体的像素定值。
在更早的时候，则是常用的一栏、两栏、三栏布局，内部通常都用浮动来实现。
多重随机标签