工作中常用的HTML+CSS布局有哪些可以总结出的模式

html-css014

工作中常用的HTML+CSS布局有哪些可以总结出的模式,第1张

首先说下移动端的布局：

*【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）。前者通常用百分比来实现，并且已经计算和减去了所谓的“槽”的宽度；后者通常是设置了具体的像素定值。

在更早的时候，则是常用的一栏、两栏、三栏布局，内部通常都用浮动来实现。

前端是在浏览浏览器的时候，它是网络前台的部分，运行在pc端。

移动端等浏览器上展示给用户浏览的页面，利用完美的动态设计，能够给用户带来极高的用户体验。

前端前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站上面的视觉设计，前端开发则是网站的前台代码实现。

前端开发又最基本的三个核心，这也是必须掌握的三个重要的核心，分别是HTML、CSS、JavaScript这三个，在日常的生活中我们接触到的也很多，掌握了这三个，在前端开发应付也会很轻松。