box-sizing css樣式

box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。

box-sizing: content-box|border-box|inherit;

content-box：這是由 CSS2.1 規定的寬度高度行爲。寬度和高度分別應用到元素的內容框。在寬度和高度                             以外繪製元素的內邊距和邊框。

border-box：  爲元素設定的寬度和高度決定了元素的邊框盒。就是說，爲元素指定的任何內邊距和邊框都將                          在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能得                          到內容的寬度和高度。真是相見恨晚！

inherit：          規定應從父元素繼承 box-sizing 屬性的值。

通常設置box-sizing：border-box就夠了這個比較符合人類的通常習慣，設計者把content-box設置成默認屬性，真是非人類！

.container {
  height: 100hv;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200px 0;
  box-sizing: border-box;
}

一個page，以上設置就是通用的設置，高度全屏，垂直排版，文字居中，包裹邊框而且是最後一行控件處於最底部，填充整個page，完美