css - 圣杯布局和双飞翼布局
生活随笔
收集整理的這篇文章主要介紹了
css - 圣杯布局和双飞翼布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考：
Flex 布局教程：語法篇
Flex布局
那些年，奇妙的圣杯與雙飛翼，還有負邊距
CSS布局中圣杯布局與雙飛翼布局的實現思路差異在哪里？
CSS布局奇淫巧計之-強大的負邊距
聊聊為什么淘寶要提出「雙飛翼」布局
圣馬布局和雙飛翼的流程：
1、搭建 head content foot, content 內部的三個元素全部左浮動，然后清除浮動防止影響 foot
2、給 main 100% 的寬度讓他占滿一行
3、給 left -100% 的margin-left 讓他移動到最左邊，給 right 和他寬度一樣的負 margin 讓他移動到最右邊
4、針對移動后 main 的兩邊會被 left 和 right 重合覆蓋掉做出不同的改變，這兒也就是兩個布局的本質區別：
>4.1 圣杯布局會給 content 內邊距，左右分別為 left 和 right的寬度，然后再利用相對定位移動 left 和 right
4.2 雙飛翼布局會在 main 里面再加一層 wrap ，然后把內容都寫在 wrap 里面，正對 wrap 設置他的 margin, 左右外邊距和 left 與 right 一樣
圣杯布局demo：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.cleanfix {clear: both;}.cleanfix:after {content: '.';clear: both;display: block;visibility: hidden;height: 0;zoom: 1;}.head, .foot {width: 100%;height: 80px;}.head {background-color: #4eb5f7;}.foot {background-color: #999999;}.left, .right, .main {float: left;}.left {width: 40px;height: 60px;background-color: #B9E078;margin-left: -100%;}.right {width: 60px;height: 80px;background-color: #FF9900;margin-left: -60px;}.main {background-color: crimson;width: 100%;}.content {padding: 0 60px 0 40px;}.left {position: relative;left: -40px;}.right {position: relative;right: -60px;}</style> </head> <body> <div class="head">head</div> <div class="content cleanfix"><div class="main">main</div><div class="left">left</div><div class="right">right</div> </div> <div class="foot">foot</div> </body> </html>雙飛翼布局：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.cleanfix {clear: both;}.cleanfix:after {content: '.';clear: both;display: block;visibility: hidden;height: 0;zoom: 1;}.head, .foot {width: 100%;height: 80px;}.head {background-color: #4eb5f7;}.foot {background-color: #999999;}.left, .right, .main {float: left;}.left {width: 40px;height: 60px;background-color: #B9E078;margin-left: -100%;}.right {width: 60px;height: 80px;background-color: #FF9900;margin-left: -60px;}.main {background-color: crimson;width: 100%;}.wrap {background-color: darkmagenta;margin-left: 40px;margin-right: 60px;}</style> </head> <body> <div class="head">head</div> <div class="content cleanfix"><div class="main"><div class="wrap">main</div></div><div class="left">left</div><div class="right">right</div> </div> <div class="foot">foot</div> </body> </html>總結
以上是生活随笔為你收集整理的css - 圣杯布局和双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一个月反思
- 下一篇： 图片转文字的工具有哪些？分享两个实用转换