聖杯布局的實現過程

2022-08-17 19:42:13 字數 877 閱讀 1713

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

dom結構：

header


main


left


right


footer
樣式：

左中右部分樣式變化過程


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


.left


.main


.right


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


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


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


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


原文**
				
聖杯布局的實現過程
聖杯布局 用到浮動 負邊距 相對定位，不新增額外標籤。dom結構 class header headerdiv class bd class main maindiv class left leftdiv class right right div div class footer footerdi...

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

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