实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
文章目錄
- 實現圣杯布局和雙飛翼布局
- float + margin負值+relative/添加盒子
- 前期準備
- 圣杯布局 margin負值+relative
- 雙飛翼布局 margin負值+添加盒子
- flex實現圣杯布局
- grid實現圣杯布局
實現圣杯布局和雙飛翼布局
本質:三列布局，左右兩邊固定，中間自適應且優先加載
優先加載:主區域標簽寫在最前面
float + margin負值+relative/添加盒子
前期準備
1.三個區域的盒子向左浮動:三欄在一行顯示
.box div{float:left; }問題:出現高度塌陷
原因:父元素的高度默認被子元素撐開。當子元素浮動后，完全脫離文檔流，子元素將無法撐起父元素的高度，導致父元素的高度丟失。父元素高度丟失后，其下的元素會自動上移，影響布局。
解決辦法:清除浮動
清除浮動是指該元素恢復浮動元素沒有浮動之前的位置
給受影響的盒子添加clear屬性，clear元素的原理是設置清除浮動以后，瀏覽器會自動為元素添加上外邊距，所以添加了clear的屬性不可以手動添加margin-top。
2.清除浮動 不影響后面區域
原理:在父元素的后面添加一個空標簽(行內元素)，清除浮動對其的影響并使其為塊元素，瀏覽器自動改變margin-top使其可以撐開父元素。
需要一個子元素占位，清除浮動的影響，回到應該從撐起來的狀態。
3.中間元素自適應
中間元素自適應:width:100%
float 使他們處在了同一行， 只是center把一行都占據了， 把其他兩個都擠下去了。
圣杯布局 margin負值+relative
box設置一個padding：0 100px,將左右兩邊各騰出100px寬度。
①這里就是圣杯布局和雙飛翼布局不一樣的地方！通過padding設置中間區域的實際大小是不包含左右區域的。
②給左右區域固定欄騰出位置，我們這里假設左右區域固定的大小是100px。
margin負值移動，將三列布局顯示在一行
left、right都是被擠下去的，那么將left向左移動一行的距離，left就可以顯示在這一行的最開始了，right只需要向左移動100px就可以在一行顯示了。
relative是參照于元素A原來的位置(開啟相對定位的元素A)在文檔流中的位置進行定位的
雙飛翼布局 margin負值+添加盒子
中間區域的內容不見了,在中間區域里面添加的一個盒子，并給盒子設置margin：0 200px
所以說雙飛翼布局，中間區域center占的還是一行的空間，只是inner占據到了中間位置
flex實現圣杯布局
2. 中間區域flex:1實現自適應
grid實現圣杯布局
<style> .header,.footer{background-color: blanchedalmond;width: 100%; } .box{display: grid;grid-template-columns:100px 1fr 100px;grid-template-areas: "a b c"; } .center{background-color: pink;grid-area:b ; }.left{background-color: red;width: 100px;grid-area:a } .right{background-color: blue;width: 100px; } </style><body><header>頭部</header><div class="box"><div class="center">主區域</div><div class="left">左區域</div><div class="right">右區域</div></div><footer>底部</footer> </body>總結
以上是生活随笔為你收集整理的实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于NodeJS健身房会员管理小程序的设
- 下一篇： 实战解读盘口语言