雙飛翼佈局 & 聖盃佈局

雙飛翼佈局：中間固定 兩邊自適應

聖盃佈局:兩邊固定 中間自適應

 

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

正數：margin：20px；

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

Margin-bottom爲負數後當前元素不動後面的元素向上走，margin-right爲負數當前元素不動後面的元素向左走

注意的，margin爲負會增大當前元素的寬（前提是當前元素沒有設置width）場景

在float下

Margin爲負 也是咱們經常使用的雙飛翼，聖盃佈局

中間自適應 兩端固定

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

在absolute下

Margin爲負

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

div{

Position：absolute；

Left：50%；

Top：50%；

Margin-left:-width/2;

Margin-top:-height/2

}

Margin爲負不管在什麼條件下都是釋放本身的空間，若是本身的margin不夠，就把本身的寬高貢獻出去。