圣杯布局是一種常見的網(wǎng)頁布局模式，其特點(diǎn)是中間部分（通常稱為“圣杯”）可以自適應(yīng)屏幕寬度，而兩側(cè)部分（通常稱為“耳朵”）保持固定寬度。這種布局模式適用于需要兩側(cè)固定寬度，中間自適應(yīng)寬度的場景，如網(wǎng)站的主導(dǎo)航欄。
實(shí)現(xiàn)圣杯布局的方法有多種，包括使用浮動(dòng)、定位或Flexbox等CSS布局模塊。以下是一些常見的實(shí)現(xiàn)方式：
1.使用浮動(dòng)。將中間部分設(shè)置為相對(duì)定位，兩側(cè)部分設(shè)置為浮動(dòng)，并確保兩側(cè)部分的寬度之和等于容器的寬度。
2.使用定位。將中間部分設(shè)置為相對(duì)定位，兩側(cè)部分設(shè)置為絕對(duì)定位，并確保兩側(cè)部分的寬度之和等于容器的寬度。
3.使用Flexbox。將中間部分設(shè)置為Flex容器，兩側(cè)部分設(shè)置為Flex項(xiàng)目，并確保兩側(cè)部分的寬度之和等于容器的寬度。
4.使用網(wǎng)格布局（Grid）。將中間部分和兩側(cè)部分分別設(shè)置為網(wǎng)格容器和網(wǎng)格項(xiàng)目，并定義網(wǎng)格布局。
1.使用浮動(dòng) 以下是使用浮動(dòng)（float）實(shí)現(xiàn)的圣杯布局的一個(gè)簡單例子：HTML:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="main"> <div class="content"> <p>這是主體內(nèi)容部分，寬度自適應(yīng)。</p> </div> </div> <div class="left"> <p>這是左側(cè)欄，固定寬度。</p> </div> <div class="right"> <p>這是右側(cè)欄，固定寬度。</p> </div></div>
</body>
</html> CSS (styles.css):.container {
pding: 0 200px; /* 為左右兩側(cè)欄留出空間 */ overflow: hidden; /* 防止內(nèi)容溢出 */}
.main {
float: left; width: 100%; background: #f5f5f5; /* 可選：區(qū)分主體內(nèi)容區(qū)域 */}
.content {
margin: 0 220px; /* 減去左右兩側(cè)欄的寬度和額外的padding */}
.left, .right {
position: relative; float: left; width: 200px; /* 固定寬度 */ height: 100%; margin-left: -100%; /* 將左側(cè)欄拉到主體內(nèi)容的左邊 */ background: #eee; /* 可選：區(qū)分側(cè)欄區(qū)域 */}
.right {
margin-left: -200px; /* 將右側(cè)欄拉到主體內(nèi)容的右邊 */}
/* 清除浮動(dòng) */
.container::after {content: ""; display: table; clear: both;} 在這個(gè)例子中，.container 為兩側(cè)欄預(yù)留了空間，并通過 padding 實(shí)現(xiàn)。.main 占據(jù)了 .container 的全部寬度，并通過 margin 在內(nèi)容區(qū)域?yàn)閮蓚?cè)欄留出空間。.left 和 .right 使用了負(fù) margin-left 來將它們移動(dòng)到 .main 的兩側(cè)。最后，.container::after 用于清除浮動(dòng)，確保 .container 可以正確包含浮動(dòng)元素。
請(qǐng)注意，這種方法在某些情況下可能需要對(duì) margin 進(jìn)行微調(diào)，以確保內(nèi)容正確顯示。同時(shí)，由于浮動(dòng)元素的特性，如果 .left 和 .right 的高度超過 .main，它們可能會(huì)覆蓋 .main 的內(nèi)容。在實(shí)際使用中，可能需要根據(jù)具體需求和瀏覽器兼容性進(jìn)行調(diào)整。
2.使用定位。
使用定位（position）來實(shí)現(xiàn)圣杯布局是一個(gè)經(jīng)典的方法。以下是一個(gè)基于定位實(shí)現(xiàn)的圣杯布局的例子：
HTML代碼：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - 定位版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>這是左側(cè)欄，固定寬度。</p> </div> <div class="main"> <p>這是主體內(nèi)容部分，寬度自適應(yīng)。</p> </div> <div class="right"> <p>這是右側(cè)欄，固定寬度。</p> </div></div>
</body>
</html>CSS代碼（styles.css）：
body, html {
margin: 0; pding: 0; height: 100%;}
.container {
position: relative; /* 設(shè)置為相對(duì)定位 */ padding: 0 220px; /* 為左右兩側(cè)欄留出空間，注意這里要加上側(cè)欄的padding */ min-height: 100vh; /* 設(shè)置最小高度為視口高度，避免布局高度問題 */}
.main {
width: 100%; /* 寬度為100% */ float: left; /* 使用浮動(dòng)使內(nèi)容左對(duì)齊 */ box-sizing: border-box; /* 包括padding和border在寬度內(nèi) */}
.left, .right {
position: absolute; /* 設(shè)置為絕對(duì)定位 */ top: 0; /* 頂部對(duì)齊 */ width: 200px; /* 固定寬度 */ height: 100%; /* 高度與容器相同 */ box-sizing: border-box; /* 包括padding和border在寬度內(nèi) */}
.left {
left: 0; /* 定位到容器的左側(cè) */ padding-right: 20px; /* 右側(cè)留出空間，防止內(nèi)容緊貼邊緣 */}
.right {
right: 0; /* 定位到容器的右側(cè) */ padding-left: 20px; /* 左側(cè)留出空間，防止內(nèi)容緊貼邊緣 */}
/* 清除浮動(dòng) */
.container::after {content: ""; display: table; clear: both;} 在這個(gè)例子中，.container 設(shè)置了 position: relative;，這樣它的子元素可以使用絕對(duì)定位相對(duì)于它進(jìn)行定位。.left 和 .right 使用了 position: absolute;，并且分別通過 left: 0; 和 right: 0; 定位到 .container 的左右兩側(cè)。
.container 的 padding 屬性為左右兩側(cè)欄留出了空間，確保它們不會(huì)覆蓋 .main 的內(nèi)容。同時(shí)，.left 和 .right 的 padding 屬性則用來防止內(nèi)容緊貼著容器的邊緣。
注意，絕對(duì)定位的元素不會(huì)參與正常的文檔流，所以它們的寬度和高度不會(huì)影響到 .container 的大小。因此，你可能需要為 .container 設(shè)置一個(gè)最小高度（如 min-height: 100vh;），以確保它至少占據(jù)整個(gè)視口的高度。
最后，.container::after 偽元素用于清除浮動(dòng)，這是為了確保 .container 的高度能夠正確包含 .main 的內(nèi)容，盡管 .left 和 .right 是絕對(duì)定位的。但是在這個(gè)具體的布局實(shí)現(xiàn)中，清除浮動(dòng)其實(shí)是不必要的，因?yàn)?.main 已經(jīng)通過 float: left; 浮動(dòng)到左側(cè)，并且 .left 和 .right 是絕對(duì)定位的，不會(huì)影響到 .main 的布局。
在實(shí)際項(xiàng)目中，還需要考慮兼容性問題，比如一些老版本的瀏覽器可能不支持某些CSS屬性。因此，在編寫代碼時(shí)，最好進(jìn)行充分的測試，以確保布局在所有目標(biāo)瀏覽器中都能正確顯示。
3.使用Flexbox。
使用Flexbox（彈性盒模型）來實(shí)現(xiàn)圣杯布局是一種更加現(xiàn)代和靈活的方法。Flexbox 允許你輕松地創(chuàng)建復(fù)雜的布局，而無需使用浮動(dòng)或定位。以下是使用Flexbox實(shí)現(xiàn)圣杯布局的一個(gè)例子：
HTML 代碼：
html <!DOCTYPE html>
<html lang=“en”>
<he>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Flexbox版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>這是左側(cè)欄，固定寬度。</p> </div> <div class="main"> <p>這是主體內(nèi)容部分，寬度自適應(yīng)。</p> </div> <div class="right"> <p>這是右側(cè)欄，固定寬度。</p> </div></div>
</body>
</html> CSS 代碼（styles.css）：css body, html {
margin: 0; padding: 0; height: 100%;}
.container {
display: flex; /* 啟用彈性盒模型 */ justify-content: space-between; /* 子項(xiàng)兩端對(duì)齊 */ align-items: stretch; /* 子項(xiàng)在交叉軸上拉伸至相同高度 */ padding: 0 20px; /* 為左右兩側(cè)欄留出空間 */}
.main {
flex: 1; /* 占據(jù)剩余空間 */ background: #f5f5f5; /* 可選：區(qū)分主體內(nèi)容區(qū)域 */}
.left, .right {
flex: 0 0 200px; /* 固定寬度為200px，不伸縮 */ background: #eee; /* 可選：區(qū)分側(cè)欄區(qū)域 */}
/* 根據(jù)需要調(diào)整側(cè)欄的 margin */
.left {margin-right: 20px; /* 右側(cè)留出空間，防止與主內(nèi)容緊貼 */}
.right {
margin-left: 20px; /* 左側(cè)留出空間，防止與主內(nèi)容緊貼 */} 在這個(gè)例子中，.container 被設(shè)置為 display: flex;，這意味著它的直接子元素（.left、.main 和 .right）會(huì)成為彈性項(xiàng)目，并且會(huì)按照Flexbox的規(guī)則進(jìn)行布局。
.main 的 flex 屬性被設(shè)置為 1，這意味著它會(huì)占據(jù)所有可用的剩余空間。由于 .left 和 .right 的 flex 屬性被設(shè)置為 0 0 200px，它們將保持固定的寬度（在這個(gè)例子中是 200px），不會(huì)伸縮。
justify-content: space-between; 確保 .left、.main 和 .right 均勻分布在 .container 中，.left 貼近左側(cè)，.right 貼近右側(cè)，而 .main 占據(jù)中間的空間。
align-items: stretch; 確保所有彈性項(xiàng)目在交叉軸（默認(rèn)是垂直方向）上伸展以填充 .container 的高度。如果需要，可以調(diào)整 align-items 的值以改變這一行為。
.container 的 pding 屬性為左右兩側(cè)欄留出了空間，防止它們與 .main 的內(nèi)容重疊。同時(shí)，.left 和 .right 的 margin 屬性則用來在它們與 .main 之間添加額外的間距。
使用Flexbox實(shí)現(xiàn)圣杯布局的好處是代碼簡潔、易于理解，并且提供了更好的瀏覽器兼容性（盡管在一些較老的瀏覽器中可能需要添加瀏覽器前綴或使用polyfill）。此外，F(xiàn)lexbox 還提供了更多的布局選項(xiàng)和靈活性，可以輕松地應(yīng)對(duì)不同的布局需求。
4.使用網(wǎng)格布局（Grid）。
使用CSS Grid布局實(shí)現(xiàn)圣杯布局是一種非常直觀和強(qiáng)大的方法。Grid布局允許你創(chuàng)建復(fù)雜的二維布局結(jié)構(gòu)，而無需使用浮動(dòng)、定位或Flexbox。以下是使用Grid布局實(shí)現(xiàn)圣杯布局的一個(gè)例子：
HTML代碼：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Grid版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”><div class="left"> <p>這是左側(cè)欄，固定寬度。</p> </div> <div class="main"> <p>這是主體內(nèi)容部分，寬度自適應(yīng)。</p> </div> <div class="right"> <p>這是右側(cè)欄，固定寬度。</p> </div></div>
</body>
</html>CSS代碼（styles.css）：
body, html {
margin: 0; padding: 0; height: 100%;}
.container {
display: grid; /* 啟用網(wǎng)格布局 */ grid-template-columns: 200px 1fr 200px; /* 定義列寬度：左側(cè)欄寬度、主內(nèi)容自適應(yīng)、右側(cè)欄寬度 */ grid-template-rows: 100%; /* 定義行高度，這里為滿高 */ grid-column-gap: 20px; /* 列之間的間隙 */}
.left {
grid-column: 1; /* 放置在第一列 */ background: #eee; /* 可選：區(qū)分側(cè)欄區(qū)域 */}
.main {
grid-column: 2; /* 放置在第二列 */ background: #f5f5f5; /* 可選：區(qū)分主體內(nèi)容區(qū)域 */}
.right {
grid-column: 3; /* 放置在第三列 */ background: #eee; /* 可選：區(qū)分側(cè)欄區(qū)域 */} 在這個(gè)例子中，.container 使用了 display: grid; 來啟用網(wǎng)格布局。grid-template-columns 屬性定義了網(wǎng)格的列結(jié)構(gòu)，其中 200px 是左側(cè)欄和右側(cè)欄的固定寬度，1fr 是一個(gè)彈性單位，表示主內(nèi)容區(qū)域?qū)⒄紦?jù)可用的剩余空間。grid-template-rows 定義了網(wǎng)格的行結(jié)構(gòu)，這里簡單地設(shè)置為 100% 來表示單行并占據(jù)整個(gè)容器的高度。grid-column-gap 設(shè)置了列之間的間隙。
.left、.main 和 .right 分別通過 grid-column 屬性指定它們應(yīng)該放置在網(wǎng)格的哪一列。這樣，左側(cè)欄被放置在第一列，主內(nèi)容區(qū)域被放置在第二列，右側(cè)欄被放置在第三列。
網(wǎng)格布局的優(yōu)勢在于它可以輕松處理復(fù)雜的二維布局，而且代碼相對(duì)簡潔易讀。此外，網(wǎng)格布局也提供了很好的瀏覽器兼容性，盡管在一些較老的瀏覽器中可能需要使用瀏覽器前綴或使用polyfill。