六種css三欄布局方法示例

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:03:28

六種css三欄布局方法示例

六種css三欄布局方法示例:本文我們主要和大家分享六種css三欄布局方法示例，談到布局，首先就要想到定位，當(dāng)別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時候回歸本質(zhì)，看定義了。定位position有六個屬性值：static、relative、abs

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀六種css三欄布局方法示例:本文我們主要和大家分享六種css三欄布局方法示例，談到布局，首先就要想到定位，當(dāng)別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時候回歸本質(zhì)，看定義了。定位position有六個屬性值：static、relative、abs

本文我們主要和大家分享六種css三欄布局方法示例，談到布局，首先就要想到定位，當(dāng)別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時候回歸本質(zhì)，看定義了。

定位

position有六個屬性值：static、relative、absolute、fixed、sticky和inherit。

static（默認(rèn)）：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分；行內(nèi)元素則會創(chuàng)建一個或多個行框，置于父級元素中。

relative：元素框相對于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。發(fā)生偏移的時候，可能會覆蓋其他元素。

absolute：元素框不再占有文檔位置，并且相對于包含塊進(jìn)行偏移（所謂包含塊就是最近一級外層元素position不為static的元素）。

fixed：元素框不再占有文檔流位置，并且相對于視窗進(jìn)行定位。

sticky：css3新增屬性值，粘性定位，相當(dāng)于relative和fixed的混合。最初會被當(dāng)作是relative，相對原來位置進(jìn)行偏移；一旦超過一定的閾值，會被當(dāng)成fixed定位，相對于視口定位。

三列布局

三列布局，其中一列寬度自適應(yīng)，在PC端最常用之一，搞定了三列布局，其他一樣的套路。

方式一：浮動布局

缺點(diǎn)：html結(jié)構(gòu)不正確,當(dāng)包含區(qū)域?qū)挾刃∮谧笥铱蛑停疫吙驎粩D下來

<style>
 .tree-columns-layout.float .left {
 float: left;
 width: 300px;
 background-color: #a00;
 }

 .tree-columns-layout.float .right {
 float: right;
 width: 300px;
 background-color: #0aa;
 }

 .tree-columns-layout.float .center {
 /* left: 300px;
 right: 300px; */
 margin: 0 300px;
 background-color: #aa0;
 overflow: auto;
 }
</style>
<section class="tree-columns-layout float">
 <article class="left">
 <h1>我是浮動布局左框</h1>
 </article>
 <article class="right">
 <h1>我是浮動布局右框</h1> 
 </article>
 <article class="center">
 <h1>我是浮動布局中間框</h1> 
 </article>
</section>

方式二：定位布局

缺點(diǎn)：要求父級要有非static定位，如果沒有，左右框容易偏移出去

<style>
 .tree-columns-layout.position {
 position: relative;
 }

 .tree-columns-layout.position .left {
 position: absolute;
 left: 0;
 top: 0;
 width: 300px;
 background-color: #a00;
 }

 .tree-columns-layout.position .right {
 position: absolute;
 right: 0;
 top: 0;
 width: 300px;
 background-color: #0aa;
 }

 .tree-columns-layout.position .center {
 margin: 0 300px;
 background-color: #aa0;
 overflow: auto;
 }
</style>
<section class="tree-columns-layout position">
 <article class="left">
 <h1>我是浮動定位左框</h1>
 </article>
 <article class="center">
 <h1>我是浮動定位中間框</h1>
 </article>
 <article class="right">
 <h1>我是浮動定位右框</h1>
 </article> 
</section>

方式三：表格布局

缺點(diǎn)：沒什么缺點(diǎn)，恐懼table

<style>
 .tree-columns-layout.table {
 display: table;
 width: 100%;
 }

 .tree-columns-layout.table > article {
 display: table-cell;
 }

 .tree-columns-layout.table .left { 
 width: 300px;
 background-color: #a00;
 }

 .tree-columns-layout.table .center {
 background-color: #aa0;
 }

 .tree-columns-layout.table .right {
 width: 300px;
 background-color: #0aa;
 } 
 
</style>
<section class="tree-columns-layout table">
 <article class="left">
 <h1>我是表格布局左框</h1>
 </article>
 <article class="center">
 <h1>我是表格布局中間框</h1>
 </article>
 <article class="right">
 <h1>我是表格布局右框</h1>
 </article>
</section>

方式四：flex彈性布局

缺點(diǎn)：兼容性

<style>
 .tree-columns-layout.flex {
 display: flex;
 } 
 
 .tree-columns-layout.flex .left {
 width: 300px;
 flex-shrink: 0; /* 不縮小 */
 background-color: #a00;
 }

 .tree-columns-layout.flex .center {
 flex-grow: 1; /* 增大 */
 background-color: #aa0;
 }

 .tree-columns-layout.flex .right {
 flex-shrink: 0; /* 不縮小 */
 width: 300px;
 background-color: #0aa;
 }
</style>
<section class="tree-columns-layout flex">
 <article class="left">
 <h1>我是flex彈性布局左框</h1>
 </article>
 <article class="center">
 <h1>我是flex彈性布局中間框</h1>
 </article>
 <article class="right">
 <h1>我是flex彈性布局右框</h1>
 </article>
</section>

方式五：grid柵格布局

缺點(diǎn)：兼容性 Firefox 52, Safari 10.1, Chrome 57, Opera 44

<style>
 .tree-columns-layout.grid {
 display: grid;
 grid-template-columns: 300px 1fr 300px;
 }

 .tree-columns-layout.grid .left {
 background-color: #a00;
 }

 .tree-columns-layout.grid .center {
 background-color: #aa0;
 }

 .tree-columns-layout.grid .right {
 background-color: #0aa;
 }
</style>
<section class="tree-columns-layout grid">
 <article class="left">
 <h1>我是grid柵格布局左框</h1>
 </article>
 <article class="center">
 <h1>我是grid柵格布局中間框</h1>
 </article>
 <article class="right">
 <h1>我是grid柵格布局右框</h1>
 </article>
</section>

方式六：圣杯布局

缺點(diǎn)：需要多加一層標(biāo)簽，html順序不對，占用了布局框的margin屬性

<style> 
 .tree-columns-layout.cup:after {
 clear: both;
 content: "";
 display: table;
 }

 .tree-columns-layout.cup .center {
 width: 100%;
 float: left; 
 }

 .tree-columns-layout.cup .center > p {
 margin: 0 300px;
 overflow: auto;
 background-color: #aa0;
 }

 .tree-columns-layout.cup .left {
 width: 300px;
 float: left;
 margin-left: -100%;
 background-color: #a00;
 }

 .tree-columns-layout.cup .right {
 width: 300px;
 float: left;
 margin-left: -300px;
 background-color: #0aa;
 }
</style>
<section class="tree-columns-layout cup">
 <article class="center">
 <p>
 <h1>我是圣杯布局中間框</h1>
 </p>
 </article>
 <article class="left">
 <h1>我是圣杯布局左框</h1>
 </article> 
 <article class="right">
 <h1>我是圣杯布局右框</h1>
 </article> 
</section>

實(shí)現(xiàn)效果：