CSS三元布局是一種使用 HTML、CSS 和 JavaScript 聯(lián)合實(shí)現(xiàn)的技術(shù)，可以實(shí)現(xiàn)三等分布局、兩邊定寬、中間自適應(yīng)等布局效果。三元布局的原理是利用相對(duì)定位，absolute 絕對(duì)定位，相對(duì)父元素的百分比等方法來(lái)布局，同時(shí)利用 JavaScript 來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果。

下面是一個(gè)常見(jiàn)的三元布局代碼實(shí)現(xiàn)：

<div class="container">
<div class="left-panel">左邊欄</div>
<div class="right-panel">右邊欄</div>
<div class="main-content">主內(nèi)容</div>
</div>

然后，CSS 樣式表可以這樣來(lái)寫：

.container {
position: relative;
}
.left-panel {
position: absolute;
left: 0;
top: 0;
width: 20%;
height: 100%;
}
.right-panel {
position: absolute;
right: 0;
top: 0;
width: 20%;
height: 100%;
}
.main-content {
position: absolute;
left: 20%;
right: 20%;
top: 0;
bottom: 0;
overflow: auto;
}

這個(gè)例子實(shí)現(xiàn)了兩邊定寬，中間自適應(yīng)的布局效果。其中，左右兩個(gè)欄目設(shè)置為 absolute 絕對(duì)定位，寬度設(shè)置為 20%。這里要注意的是，父元素也要設(shè)置 position:relative 屬性，這樣 left 和 right 屬性才能生效。而主內(nèi)容區(qū)域則通過(guò) left 和 right 同時(shí)設(shè)置為 20%，實(shí)現(xiàn)自適應(yīng)的效果。

上面這個(gè)例子只是 CSS 三元布局的一個(gè)簡(jiǎn)單示例。實(shí)際上，三元布局還可以應(yīng)用到更復(fù)雜的布局場(chǎng)景中，比如三等分布局、中間固定兩邊自適應(yīng)布局等。使用三元布局可以減少代碼量，提高布局效果的可維護(hù)性，是一個(gè)很實(shí)用的技術(shù)。