1. 程式人生 > >盒子模型之margin相關技巧!

盒子模型之margin相關技巧!

images 水平居中 color 邊框 pan 一個 ron ble 居中

廢話不多說,直接進入主題,margin相關技巧。

1、設置元素水平居中:margin:x auto;

2、margin負值讓元素位移及邊框合並。

外邊距合並

  指當兩個垂直外邊距相遇時,它們將形成一個外邊距。合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。

解決外邊距合並的方法:

  a、使用這種特性。

  b、設置一邊的外邊距,一般設置margin-top

  c、將元素浮動或者定位(元素浮動或定位時,不會出現margin合並)

margin-top塌陷

  在兩個盒子嵌套時候,內部的盒子設置的margin-top會加到外邊的盒子上,導致內部的盒子margin-top設置失敗,解決方法如下:

  a、外部盒子設置一個邊框

  b、外部盒子設置overflow:hidden

  c、使用偽元素類:

  .clearfix:before{

    content:‘‘;

    dispaly:table;

  }

技術分享技術分享

盒子模型之margin相關技巧!