日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【经典布局】圣杯布局和双飞翼布局

發(fā)布時(shí)間：2024/1/18 编程问答 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【经典布局】圣杯布局和双飞翼布局 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

文章目錄

  • 前言
  • 一、兩種布局的對(duì)比
  • 二、使用步驟
    • 1. 圣杯布局
    • 2. 雙飛翼布局
  • 總結(jié)

前言

圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。

一、兩種布局的對(duì)比

圣杯布局和雙飛翼的特點(diǎn)：
1、兩邊定寬，中間100%
2、中間部分優(yōu)先渲染，提升用戶體驗(yàn)
圣杯布局缺點(diǎn)：當(dāng)中間區(qū)域?qū)挾刃∮趦蛇厱r(shí)，布局會(huì)破碎
雙飛翼布局不會(huì)破碎

二、使用步驟

1. 圣杯布局

圣杯布局：
步驟：

  • 設(shè)置padding給左右兩邊預(yù)留空間
  • 負(fù)外邊距+相對(duì)定位移到空白區(qū)域
  • 雙飛翼不會(huì)破碎
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.wrapper>.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}/* 2、負(fù)外邊距+相對(duì)定位移到空白區(qū)域 */.fl{background-color: red;/* 負(fù)外邊距 */margin-left: -100%;/* 相對(duì)定位 */position: relative;left: -200px;}.fr{background-color: blue;margin-left: -200px;position: relative;left: 200px;}/* 1、設(shè)置padding給左右兩邊預(yù)留空間 */.wrapper{padding-left: 200px;padding-right: 200px;min-width: 600px;}</style></head><body><div class="wrapper"><div class="center">中間</div><div class="fl">左邊</div><div class="fr">右邊</div></div></body> </html>

展現(xiàn)效果：

2. 雙飛翼布局

雙飛翼:
步驟
wrapper(div中(div.contain) div左 div右)

  • wrapper >div,float:left
  • div.contain設(shè)置左右margin
  • div左, margin-left:-100%
  • div右, margin-left: px
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.center .contain{height: 200px;margin-left: 200px;margin-right: 200px;}.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}.fl{background-color: red;margin-left: -100%;}.fr{background-color: blue;margin-left: -200px;}</style></head><body><div class="wrapper"><div class="center"><div class="contain"></div></div><div class="fl"></div><div class="fr"></div></div></body> </html>

展現(xiàn)效果：

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了圣杯布局和雙飛翼布局的使用，圣杯布局和雙飛翼的特點(diǎn)就是兩邊定寬，中間100%，中間部分優(yōu)先渲染，提升用戶體驗(yàn)。

總結(jié)

以上是生活随笔為你收集整理的【经典布局】圣杯布局和双飞翼布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。