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个:

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

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

待续 ...

Bootstrap 3.2.0 源码试读 2014/08/07

时间: 2024-10-16 20:03:01

Bootstrap 3.2.0 源码试读 2014/08/07的相关文章

Bootstrap 3.2.0 源码试读 2014/08/09

第一部分 normalize.css 104至110行 code,    /* 编辑代码 */ kbd,    /* 键盘输入的文本 */ pre, samp {    /* 范例,sample的简写 */   font-family: monospace, monospace;    /* 这个地方应该是写错了,第二字体应该是serif */   font-size: 1em; } 设置字体的大小为1em,字体为monospace. 111至119行 button, input, optgro

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由

Bootstrap 3.2.0 源码试读 2014/08/11

第二部 @media print 212至217行   pre,   blockquote {    /* 块引用 */     border: 1px solid #999;     page-break-inside: avoid;   } 215行是个空格,是什么个意思?闲着蛋疼往前翻了翻,3.0.X版本没这个问题.根本没这行. 设置边框宽度为1px,实心,颜色#999,并且避免在内容里挺入分页符. page-break-inside据说只有opera支持,可用的值有3个 auto,默认值

Bootstrap 3.2.0 源码试读 2014/08/10

第一部分 normalize.css 167至171行 fieldset {   padding: .35em .625em .75em;   margin: 0 2px;   border: 1px solid #c0c0c0; } legend {   padding: 0;   border: 0; } 表单分组标题的内添充为上 .23em,下 .75em, 左右 .625em.外边距为上下0,左右2px,边框为#c0c0c0.实心的1px宽. 分组标题的内添充为0,边框为0. 176至1

Lua 源码试读

开始看 Lua 源码也有段时间了,由于尝试用各种方式切入,效果均不是很理想,应该是个人内功不做所致.加上先阶段个人时间有限,现记录下断点,待到来日能力足够有兴趣时再来看. 初期探索: 0.由于第一次尝试读源码,开始时竟将源码按大小顺序排列,从小文件看起. 1.尝试从数据结构看起,看完了 Lua 的数据结构后对 Lua 的数据结构还是有种朦胧的感觉.然后尝试看 Lua 的 GC 终止. 2.尝试把 Lua 当作一个程序来看,从 main 函数开始读,函数调用层层深入下去...作为一个菜鸟,这注定是

Redis源码试读(一)源码准备

这里开始查看Redis的源码,之前是在看Unix的环境编程,虽然这本书写的很好,但是只看这个感觉有点隔靴搔痒.你可以知道沙子.水泥.钢筋的特性,但是要想建一栋大楼仍然是另一回事.Unix环境编程要看,同时也要借助源码来看下大神的操作. Redis的版本:Redis 4.0.1下载地址:http://download.redis.io/releases/redis-4.0.1.tar.gz源码查看工具:Source InsightSource Insight的版本:Source Insight 4

Spring源码试读--BeanFactory模拟实现

动机 现在Springboot越来越便捷,如果简单的Spring应用,已无需再配置xml文件,基本可以实现全注解,即使是SpringCloud的那套东西,也都可以通过yaml配置完成.最近一年一直在用Springboot+JPA或者Springboot+MyBatis,基本上不用Spring和SpringMVC了,心血来潮想着趁国庆假期试着一点点实现一下Spring的基本功能(当然是会对照源码的,毕竟很多细节想不到,变量命名也会按照源码来),基本思路就是先按照Spring的类图试着自己写,争取实

Solr4.8.0源码分析(10)之Lucene的索引文件(3)

Solr4.8.0源码分析(10)之Lucene的索引文件(3) 1. .si文件 .si文件存储了段的元数据,主要涉及SegmentInfoFormat.java和Segmentinfo.java这两个文件.由于本文介绍的Solr4.8.0,所以对应的是SegmentInfoFormat的子类Lucene46SegmentInfoFormat. 首先来看下.si文件的格式 头部(header) 版本(SegVersion) doc个数(SegSize) 是否符合文档格式(IsCompoundF

[Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程

本文转载自:[Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程 1 前言 经过3天奋战,终于在Ubuntu 16.04上把Android 6.0的源码编译出来了,各种配置,各种error,各种爬坑,特写此博客记录爬坑经历.先上图,Ubuntu上编译完后成功运行模拟器,如图: 2 编译环境 UbuntuKylin 16.04 LTS Android 6.0_r1 Open JDK 7 3 准备工作 (1) 下载android 6.0源码.