前端常用页面布局分为下面几种：
1.静态布局给页面元素设置固定的宽度和高度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。
优点：简单方便，不存在兼容问题。
缺点：网页无法根据用户设备屏幕的宽度进行自适应。
2.流式布局也叫100%布局。宽度单位为百分比。流式布局常用的设计模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。
优点：可以适应不同尺寸的屏幕
缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
3.响应式布局使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。
<meta name=”viewport” content=”divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：
（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
4.弹性布局就是采用css3中的flex属性。
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
以上就是偶介绍的前端的4种布局方式。
偶这有前端全套从入门到精通的视频教程，路线，源码，笔记。自学前端的小伙伴们有需要的可以关注偶，免费分享给你们。
notepad css提示，css如何溢出，css的 点击样式，css ul li无序靠右，div css 制作导航下拉，dwcc2018新建css规则，js dom添加css用法