聖杯布局 和 雙飛翼布局

雙飛翼布局：中間固定  兩端auto（自適應）；

聖杯布局：兩端固定，中間auto（自適應）；

margin  是  外邊距，   屬性值是數字，   數字又分正負。

正數：margin：20px；

負數：在static元素中（標準流下）margin-left為負數當前元素向左走margin-top為負當前元素向上走

margin-bottom為負數後當前元素不動後面的元素向上走，

margin-right為負數當前元素不動後面的元素向左走

注意的，margin為負會增大當前元素的寬（前提是當前元素沒有設定width）

場景

ul給ul乙個margin-right就無形之中給了ul加了20px

在float下

margin為負也是我們常用的雙飛翼，聖杯布局

中間自適應兩端固定

給元素margin-left為負當前元素向左走，margin-right為負後乙個元素向左走會覆蓋當前元素。

在absolute下

margin為負

讓元素居中，前提是知道元素的寬高。

divmargin為負無論在什麼條件下都是釋放自己的空間，如果自己的margin不夠，就把自己的寬高貢獻出去

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容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...