聖杯布局的實現過程

2021-07-24 23:30:11 字數 1106 閱讀 8945

聖杯布局：用到浮動、負邊距、相對定位，不新增額外標籤。

dom結構：

class="header">headerdiv>

class="bd">

class="main">maindiv>

class="left">leftdiv>

class="right">right

div>

div>

class="footer">footerdiv>

css樣式：

body


.header,.footer


.bd.left


.main


.right


style>
1.中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這裡設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去。

.left


.main


.right
2.把左層負margin150後，發現left上去了，因為負到出視窗沒位置了，只能往上移。

.left
3.那麼按第二步這個方法，可以得出它只要移動視窗寬度那麼寬就能到最左邊了，利用負邊距，把左右欄定位。

.left


.right
4.然而問題來了，中間被左右擋住了，只好給外層加padding了。

.bd
5.但是加了之後左右欄也縮進去了，於是採用相對定位的方法，各自相對於自己把自己移出去，得到最終結果。

.left


.right

聖杯布局的實現過程

聖杯布局 用到浮動 負邊距 相對定位，不新增額外標籤 dom結構 header main left right footer 樣式 左中右部分樣式變化過程 1 中間部分需要根據瀏覽器寬度的變化而變化，所以要用100 這裡設左中右向左浮動，因為中間100 左層和右層根本沒有位置上去 left main...

實現聖杯布局

聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...

聖杯布局的實現

經典三列布局，也叫聖杯布局 holy grail of layouts 在國內也叫雙飛翼布局。它的布局有幾點要求 1 三列布局，兩邊寬度固定，中間寬度自適應 2 中間欄要在瀏覽器中優先展示渲染 3 允許任意列的高度最高 4 要求只用乙個額外的div標籤 5 要求用最簡單的css 最少的hack語句。...