文档章节

Bootstrap 3.2.0 源码试读 2014/08/07

go_array
 go_array
发布于 2014/08/07 17:45
字数 732
阅读 177
收藏 9

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

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


待续 ...


© 著作权归作者所有

go_array

go_array

粉丝 4
博文 34
码字总数 29198
作品 0
沈阳
部门经理
私信 提问
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版本没这个问...

潘金莲子羹
2014/08/11
133
0
Bootstrap 3.2.0 源码试读 2014/08/04

第一部分 normalize.css 用于解决不同浏览器下显示不一致的问题 8至12行 html { font-family: sans-serif; / 设置默认字体为 sans-serif / -webkit-text-size-adjust: 100%; / 手机等设备转屏...

潘金莲子羹
2014/08/04
328
0
运行job 出现下面的错误java.net.SocketExceptionMESSAGE

pentaho data integration 3.2 当运行数据量比较大时出现下面的error,如果数据量较小时,Job是可以成功运行。 出现这种情况是什么原因? 2012/08/07 16:35:56 - Table output FACT_R077_PAR...

yuetushen
2012/08/07
1K
2
Bootstrap 3.2.0 源码试读 2014/08/09

第一部分 normalize.css 104至110行 code, / 编辑代码 /kbd, / 键盘输入的文本 /pre,samp { / 范例,sample的简写 / font-family: monospace, monospace; / 这个地方应该是写错了,第二字体应...

潘金莲子羹
2014/08/09
172
0
Ubuntu虚拟机中编译运行cgminer挖矿软件

蔡清华 版权所有 未经允许不得转载。 编译cgminer cgminer github代码: https://github.com/ckolivas/cgminer If building on Ubuntu:sudo apt-get install build-essential autoconf auto......

蔡清华
2014/04/16
3.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部