Bootstrap 3.2.0 源碼試讀 2014/08/07

第一部分 normalize.css

70至72行

small {
  font-size: 80%;
}

設置small標籤的字體大小爲父容器字體的80%。

73至79行

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}

先設置上標sup及下標sub，位置爲相對，字體大小爲父容器的75%，行高爲0，豎直對齊的方式相對於基線。

而後調整sup的位置爲基於top原位置偏移-.5em，sub的新位置基於bottom偏移-.25em。

位置positon可選的值有4個：

一、static，這個是默認的設置，位置是基於文檔流的。

二、relative，如標籤默認是放在位置A的，若是你設置他的postion爲relative，那它新的位置是基於A的偏移。

三、fixed的位置是基於body的。

四、absoluter的位置則取決於父容器的設置。

若是parent設置了postion屬性，值是absolute或者relative，那麼它的位置就是基於parent的

若是parent根本沒設置postion屬性，那它的位置就和設置fixed同樣

line-height是指兩行文本，基線baseline之間的距離

一、normal，默認值，字體大小的1倍或1.2倍，取決於字體的大小
二、數字(不帶單位)，用你給的數字乘字體大小
三、數字(單位)，你給多少，設多少，能夠是負數
四、百分比，百分數乘字體大小
五、inherit,繼續自父容器

上圖

86至88行

img {
  border: 0;
}

設置圖片默認沒邊框。

89至91行

svg:not(:root) {
  overflow: hidden;
}

若是svg不是根元素的話，顯示的內容溢出的話，隱藏掉溢出的內容。

overflow可選的值有5個：

一、visible    默認值。即便內容溢出了，也原樣顯示。
二、hidden    多出的內容不顯示
三、scroll    老是顯示滾動條
四、auto    溢出的時候才顯示滾動條。
五、inherit   overflow的設置來自於父容器。

更精細的控制，左右溢出還能夠設置overflow-x，上下超出用overflow-y。

92至94行

figure {
  margin: 1em 40px;
}

設置figure上下邊距1em左右邊距40px

margin與padding：

設1個值，那就是上、下、左、右都用這個值。

設2個值，就是上、下用第1個，左、右用第2個。

設3個值，就是上用第1個，左、右用第2個，下用第3個。

設4個值，就是上用第1個，右用第2個，下用第3個，左用第4個。

95至100行

hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

hr還有人在用嗎？

設置橫線的高度height爲0，邊框和內添充都不計算到width的距離以內。

box-sizing有3個值：

一、content-box，width不包括padding和border

二、border-box，width不包括border

三、inherit，繼承自父元素

101至103行

pre {
  overflow: auto;
}

pre是說，我寫啥你給我顯示啥就好了。

這裏設置，溢出的模式爲須要滾動條再顯示。

待續 ...