聖杯布局（三欄布局）

2022-09-10 15:03:29 字數 1291 閱讀 4115

聖杯布局也就是：左右固定寬度，中間自適應的布局樣式

html布局：

注意：一定是中間部分寫在最上面

<


header


><


h4>header內容


h4>


header


>


<


div 


class


="container"


>


<


div 


class


="middle"


><


h4>中間彈性


h4>


div>


<


div 


class


="left"


><


h4>左邊欄


h4>


div>


<


div 


class


="right"


><


h4>右邊欄


h4>


div>


div>


<


footer


><


h4>內容區


h4>


footer


>
css樣式：

.container.middle.left.right
此時的效果是這樣的：

之後再給.container新增樣式：

padding: 0 200px;
再給.left新增樣式：

margin-left:-100%;
再給.right新增樣式：

margin-left:-200px;
此時的效果為：

之後再給.left定位：

position:relation;


left:-200px;
給.right定位：

position:relation;


right:-200px;
此時的效果為：

三欄布局之聖杯布局

這篇部落格主要是介紹一下三欄布局的聖杯布局 聖杯布局與雙飛翼布局實際上是差不多的，他們實現的都是三欄布局，兩邊的盒子寬度固定，中間的盒子自適應 也就是我們常說的固比固布局 兩個布局方式實現的效果是一樣的，區別在於實現的思想 在了解了什麼是三欄布局之後，我們主要來看一下聖杯模式的實現 首先，先確定ht...

三欄布局之聖杯布局 雙飛翼布局

聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float 相對定位 容器的padding來完成布局。doctype html content type content text html charset utf 8 test page title htm...

CSS布局說 兩欄布局 三欄布局（聖杯 雙飛翼）

5.三欄布局 小知識點 內聯元素從左向右 塊級元素從上向下 各佔一行 position屬性，有6大類 這是標準盒子模型，可以看到width的長度等於content的寬度 而當將box sizing的屬性值設定成border box時，盒子模型的width border padding content...