css的垂直格式化

塊級元素垂直格式化的7大屬性：

• margin-top
• border-top
• padding-top
• width
• padding-bottom
• border-bottom
• margin-bottom

這7個屬性只有3個屬性能夠設置爲auto,即height,margin-top,margin-bottom。 padding和border都必須設置爲特定的值，或者默認爲0（若是沒有設置border-style）。若是設置了border-style，邊框的寬度會設置爲值medium（這個值的定義並不明確）。

若是塊元素的margin-top和margin-bottom設置爲auto，它會自動計算爲0。 height必須設置爲auto或者非負值。

百分數高度

<div class="outer">
  <div class="inner"></div>
</div>
複製代碼

.outer {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;
}

.inner {
  width: 50%;
  height: 50%;
  border: 1px solid skyblue;
}
複製代碼

垂直居中的一種方式是設置margin-top和margin-bottom爲(parentHeight-height)/2。

若是沒有顯式聲明包含塊的height，百分數高度會重置爲auto。

.outer {
  width: 200px;
  border: 1px solid red;
  margin: 0 auto;
}

.inner {
  width: 50%;
  height: 50%;
  border: 1px solid skyblue;
}
複製代碼

若是包含塊的高度爲auto，其默認高度是最高塊級子元素的外邊框邊界到款最低塊級子元素外邊框邊界之間的距離。所以子元素的外邊距會超出包含子元素的塊元素。

auto高度

<div class="outer">
  <div class="inner">Hello World</div>
  <div class="inner1">HAHA</div>
</div>
複製代碼

.outer {
  width: 200px;
  height: auto;
  background: red;
  margin: 0 auto;
}

.inner {
  width: 50%;
  height: 50%;
  margin-top: 25%;
  margin-bottom: 25%;
  background: skyblue;
}

.inner1 {
  background: orange;
  margin-bottom: -15px;
}
複製代碼

不過若是給父級塊元素添加上border-top或者padding-top,則其高度爲其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離。

.outer {
  width: 200px;
  height: auto;
  background: red;
  margin: 0 auto;
  padding-top: 1px; /*或者添加border-top: 1px solid;*/
}

.inner {
  width: 50%;
  height: 50%;
  margin-top: 25%;
  margin-bottom: 25%;
  background: skyblue;
}

.inner1 {
  background: orange;
  margin-bottom: -15px;
}
複製代碼

合併垂直外邊距

下面來看個例子：

<ul class="list">
  <li class="cell"></li>
  <li class="cell"></li>
  <li class="cell"></li>
  <li class="cell"></li>
  <li class="cell"></li>
</ul>
複製代碼

.list {
  list-style: none;
  border: 1px solid blue;
  counter-reset: li;
  width: 400px;
  margin: 0 auto;
  margin-top: 80px;
}

.cell {
  border: 1px solid hotpink;
  margin-top: 15px;
  margin-bottom: 10px;
}

.cell::after {
  counter-increment: li;
  content: "Hello World "counter(li);
}
複製代碼

這邊設置了margin-top爲15px，margin-bottom爲10px，可是li之間的距離爲15px，其實是margin-top和margin-bottom合併了。

負外邊距

若是垂直外邊距都設置爲負值，瀏覽器會取兩個外邊距絕對值的最大值。 若是一個爲正值，一個爲負值，則從正外邊距減去負外邊距的絕對值。

.list {
  list-style: none;
  border: 1px solid blue;
  counter-reset: li;
  width: 400px;
  margin: 0 auto;
  margin-top: 80px;
}

.cell {
  border: 1px solid hotpink;
  margin-top: 15px;
  margin-bottom: -10px;
}

.cell::after {
  counter-increment: li;
  content: "Hello World "counter(li);
}
複製代碼

博客地址 gitbook小冊