文档章节

Bootstrap 3.2.0 源码试读 2014/08/04

go_array
 go_array
发布于 2014/08/04 23:12
字数 775
阅读 328
收藏 20


第一部分 normalize.css

用于解决不同浏览器下显示不一致的问题


8至12行

html {
  font-family: sans-serif;    /* 设置默认字体为 sans-serif */
  -webkit-text-size-adjust: 100%;    /* 手机等设备转屏时,字体大小随着自动调整 */
      -ms-text-size-adjust: 100%;    /* 但是如果禁用了缩放功能,则此设置无效 */
}


text-size-adjust由于兼容性的问题,这里只有IE及Safari的前缀。

只所设置在html,因为body是继承,并且如果设在body上,那么页面的缩放功能将会失效。

禁用缩放功能,只需赋值none即可:

-webkit-text-size-adjust: none;
-moz-text-size-adjust:none; 
-ms-text-size-adjust: none;
text-size-adjust: none

13至15行

body {
  margin: 0;
}

清除body的margin默认设置。

16至29行

article,    /* 文章 */
aside,    /* 附注栏 */
details,    /* 附加信息 */
figcaption,    /* 独立流元素的标题 */
figure,    /* 独立的图片、表格等,删除了也不会对页面显示造成影响 */
footer,    /* 页脚 */
header,    /* 页眉 */
hgroup,    /* 组标题 */
main,    /* body里的主要内容,只能有一块 */
nav,    /* 导航 */
section,    /* 区块 */
summary {    /* 摘要 */
  display: block;
}

设置默认显示方式为块方式。

display的值有一大堆,常用的有

1、none,不显示。

2、block,块的方式显示,前后有换行符。

3、inline,显示在一行里,前后没有换行符,但是高,行高,边距都没方法设置。

4、inline-block,对inline的不同就是可以控制位置。

5、inherit,继承自父容器。


30至36行

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

设置音频,视频,进度条的默认显示样式为内嵌块。

垂直对齐vertical-align方式为相对于父元素的基线对齐,

看下面,直观明了

37至40行

audio:not([controls]) {
  display: none;
  height: 0;
}

如果音频audio没有controls属性(也就是没有控制栏那一条),则不显示,高度height值为0。

41至44行

[hidden],
template {
  display: none;
}

修正hideen属性的显示方式为不显示。

设置模板元素template在页面上不显示。

45至51行

a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}

设置链接a元素的默认背景颜色为透明,也就是显示父元素的颜色。

在链接获得焦点active及鼠标悬停hover时,去掉链接的外边框outline。

52至54行

abbr[title] {
  border-bottom: 1px dotted;
}

设置缩写元素abbr的标题属性title的下边框的宽度为1像素,样式为点划线。

55至58行

b,
strong {
  font-weight: bold;
}

设置b元素及strong元素的默认字体样式为加粗。

59至61行

dfn {
  font-style: italic;
}

设置术语标签dfn的字体显示样式为斜体。

62至65行

h1 {
  margin: .67em 0;
  font-size: 2em;
}

设置标题1的外边距为 上下 .67em,左右 0,字体大小为2em。

em是相对于父元素的大小,如果父元素的字体大小是16px,那么0.67em = 16 * 0.67 = 10.72px。

还有一个rem的单位,是相对于根元素html的,算起来更方便,不过现在并不是所有浏览器都支持。

66至69行

mark {
  color: #000;
  background: #ff0;
}

设置mark标签的默认显示颜色为黑色,背景颜色为洋红色。


待续 ...

© 著作权归作者所有

go_array

go_array

粉丝 4
博文 34
码字总数 29198
作品 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
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/09

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

潘金莲子羹
2014/08/09
172
0
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;} 表单分组标题的内添充为上 .2......

潘金莲子羹
2014/08/10
185
1
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; vertic......

潘金莲子羹
2014/08/07
177
0

没有更多内容

加载失败,请刷新页面

加载更多

redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
42分钟前
1
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
22
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部