聖杯和雙飛翼布局

2022-09-12 10:24:14 字數 531 閱讀 1315

聖杯布局:

原理:給包裹層設定左右padding值空出left和right的位置,使用負邊距,左邊margin-left:-100%,右邊margin-left:-100px;此時左右兩個盒子位於主盒子兩側但是會遮擋住主盒子的內容,所以再給左盒子position:relative,left:-100px,右盒子position:relative;right:-100px,使左右兩個盒子定位正確。

/*html部分*/

main

left

right

/*css部分*/

.container

.main

.left

.right

雙飛翼布局:

原理和聖杯布局有點像都是使用margin負邊距達到目的,不同的是雙飛翼布局將主盒子外包裝一層div,使用主盒子的左右外邊距解決主盒子被遮擋的問題。

/*html部分*/

/*css部分*/

.main-wrap

.main

.left

.right

聖杯 雙飛翼布局

自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局,即中間是主要內容main content,然後是左邊側欄,一般是 的分類資訊,右邊欄就是一些附屬功能,最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰,分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding,left的margin left和left值,right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...