Bootstrap 3.2.0 源碼試讀 2014/08/07

標籤：http   os   io   strong   2014   ar   line   size   

第一部分 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個：

1、static，這個是預設的設定，位置是基於文檔流的。

2、relative，如標籤預設是放在位置A的，如果你設定他的postion為relative，那它新的位置是基於A的位移。

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

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

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

如果parent根本沒設定postion屬性，那它的位置就和設定fixed一樣

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

1、normal，預設值，字型大小的1倍或1.2倍，取決於字型的大小
2、數字(不帶單位)，用你給的數字乘字型大小
3、數字(單位)，你給多少，設多少，可以是負數
4、百分比，百分數乘字型大小
5、inherit,繼續自父容器

86至88行

img {  border: 0;}

設定圖片預設沒邊框。

89至91行

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

如果svg不是根項目的話，顯示的內容溢出的話，隱藏掉溢出的內容。

overflow可選的值有5個：

1、visible    預設值。即使內容溢出了，也原樣顯示。
2、hidden    多出的內容不顯示
3、scroll    總是顯示捲軸
4、auto    溢出的時候才顯示捲軸。
5、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個值：

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

2、border-box，width不包括border

3、inherit，繼承自父元素

101至103行

pre {  overflow: auto;}

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

這裡設定，溢出的模式為需要捲軸再顯示。

待續 ...