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是说，我写啥你给我显示啥就好了。

这里设置，溢出的模式为须要滚动条再显示。

待续 ...