經歷了上次的打印篇，我們就到了重置初始化樣式的部分，廢話少說，咱繼續觀察

html {
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

box-sizing設為了border-box，在添加邊框的時候可以避免寬度溢出。行高默認是1.15~text-size-adjust是100%。

為了防止iPhone 和 Android 的瀏覽器縱向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自動調整字體大小的功能。

tap-highlight-color屬性也是移動端的屬性，當用戶輕按一個鏈接或者JavaScript可點擊元素時給元素覆蓋一個高亮色，具體可以看：http://www.css88.com/book/css/properties/only-webkit/tap-highlight-color.htm，用手機體驗一下例子就更好啦。

*,
*::before,
*::after {
  box-sizing: inherit;
}

box-sizing不會自動繼承自父類，在這裏就寫了一個繼承。

@-ms-viewport {
  width: device-width;
}

Internet Explorer 10並沒有將屏幕的寬度和視口（viewport）的寬度區別開，這就導致Bootstrap中的媒體查詢並不能很好的發揮作用。為了解決這個問題，引入以上內容。這樣做會導致Windows Phone 8 設備按照桌面瀏覽器的方式呈現頁面，而不是較窄的“手機”呈現方式。為了解決這個問題，還需要加入其他CSS和JavaScript代碼，直到微軟修復此問題，我們留個疑問現在這裏吧。（詳情：http://www.cnblogs.com/rubylouvre/p/3360986.html）

接下來慢慢有了bootstrap自己的樣式風格

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

去除body的margin值，網上一般都是把margin和padding一起去除，每個瀏覽器預設定的可能標準都不一樣，但是實驗發現~大部分主流的瀏覽器其實沒有預設padding值。比如谷歌是：margin:8px；Opera也和谷歌一樣~IE又不一樣了。

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

字上都設置下下部距離，沒有設置上部距離。

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

這裏的縮寫，在一般情況下，是需要給一個點形下劃線，並且鼠標經過還會給出？的標識，讓用戶有更好的體驗。（codepen裏的abbr默認也是這個樣式）

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

瀏覽器默認會把address斜體化，這裏重置為和大家一樣了~

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

默認情況下，ol,ul,dl都有上下對稱大小的margin邊距，這裏把列表的margin-top都去除~給了一個bottom值。沒有去除padding是因為有時候要用到這個padding值，在一些比如你本身就想要圓點/數字標記。

bootstrap源碼學習：normalize(1)