圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
1 <body> 2 <header>...</header> 3 <div class="body"> 4 <main class="content">...</main> 5 <nav class="nav">...</nav> 6 <aside class="ads">...</aside> 7 </div> 8 <footer>...</footer> 9 </body>
圣杯布局也可以做成以下几种布局方式：
1.固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页，不适合多端(移动端)使用。
优点：更好的适应当前市场上所有的设备：我们知道当前市面上主流的集中分辨率为以下几种
在固定布局中，网页的宽度是必须指定为一个像素值。
例如凤凰网，他的宽度为1000px，我电脑的分辨率为：1080*1920，所以周围会有留白部分。
现在各大网站的页面宽度一般为1000px，这样能适应更多的设备。
2。流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
优点：随着页面的变化，页面会依据比例跟着变化，但是这种会使页面中的内容变形。
流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。
3.响应式布局（也称弹性布局）：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
4.栅格化布局（grid布局）：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的
流式布局和固定布局区别图鉴：
标签：...,网页,布局,宽度,长度,圣杯,页面 来源： https://www.cnblogs.com/jing-tian/p/10988894.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。