Bootstrap 3.2.0 源碼試讀 2014/08/04

第一部分 normalize.css

用於解決不一樣瀏覽器下顯示不一致的問題

8至12行

html {
  font-family: sans-serif;    /* 設置默認字體爲 sans-serif */
  -webkit-text-size-adjust: 100%;    /* 手機等設備轉屏時，字體大小隨着自動調整 */
      -ms-text-size-adjust: 100%;    /* 可是若是禁用了縮放功能，則此設置無效 */
}

text-size-adjust因爲兼容性的問題，這裏只有IE及Safari的前綴。

只所設置在html，由於body是繼承，而且若是設在body上，那麼頁面的縮放功能將會失效。

禁用縮放功能，只需賦值none便可：

-webkit-text-size-adjust: none;
-moz-text-size-adjust:none; 
-ms-text-size-adjust: none;
text-size-adjust: none

13至15行

body {
  margin: 0;
}

清除body的margin默認設置。

16至29行

article,    /* 文章 */
aside,    /* 附註欄 */
details,    /* 附加信息 */
figcaption,    /* 獨立流元素的標題 */
figure,    /* 獨立的圖片、表格等，刪除了也不會對頁面顯示形成影響 */
footer,    /* 頁腳 */
header,    /* 頁眉 */
hgroup,    /* 組標題 */
main,    /* body裏的主要內容，只能有一塊 */
nav,    /* 導航 */
section,    /* 區塊 */
summary {    /* 摘要 */
  display: block;
}

設置默認顯示方式爲塊方式。

display的值有一大堆，經常使用的有

一、none，不顯示。

二、block，塊的方式顯示，先後有換行符。

三、inline，顯示在一行裏，先後沒有換行符，可是高，行高，邊距都沒方法設置。

四、inline-block，對inline的不一樣就是能夠控制位置。

五、inherit，繼承自父容器。

30至36行

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

設置音頻，視頻，進度條的默認顯示樣式爲內嵌塊。

垂直對齊vertical-align方式爲相對於父元素的基線對齊，

看下面，直觀明瞭

37至40行

audio:not([controls]) {
  display: none;
  height: 0;
}

若是音頻audio沒有controls屬性（也就是沒有控制欄那一條），則不顯示，高度height值爲0。

41至44行

[hidden],
template {
  display: none;
}

修正hideen屬性的顯示方式爲不顯示。

設置模板元素template在頁面上不顯示。

45至51行

a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}

設置連接a元素的默認背景顏色爲透明，也就是顯示父元素的顏色。

在連接得到焦點active及鼠標懸停hover時，去掉連接的外邊框outline。

52至54行

abbr[title] {
  border-bottom: 1px dotted;
}

設置縮寫元素abbr的標題屬性title的下邊框的寬度爲1像素，樣式爲點劃線。

55至58行

b,
strong {
  font-weight: bold;
}

設置b元素及strong元素的默認字體樣式爲加粗。

59至61行

dfn {
  font-style: italic;
}

設置術語標籤dfn的字體顯示樣式爲斜體。

62至65行

h1 {
  margin: .67em 0;
  font-size: 2em;
}

設置標題1的外邊距爲 上下 .67em，左右 0，字體大小爲2em。

em是相對於父元素的大小，若是父元素的字體大小是16px，那麼0.67em = 16 * 0.67 = 10.72px。

還有一個rem的單位，是相對於根元素html的，算起來更方便，不過如今並非全部瀏覽器都支持。

66至69行

mark {
  color: #000;
  background: #ff0;
}

設置mark標籤的默認顯示顏色爲黑色，背景顏色爲洋紅色。

待續 ...