h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

  input,select,textarea,samp {font-size:100%;}

  看到一些css重设,请问设置font-size:100%的目的和作用是什么?

  ---------------------------------------------------------------------------------------

  假如你设置body{font-size:12px;}

  但h1是不会继承这个12px,它会按照一定百分比增加字号,但如果给h1显试指定font-

  size:100%;它就会继承body设定的字体大小。

  1. 它改变了默认的大小。

  2. 这些元素本身不会继承父体的字体大小,设置了font-size:100%后就能自动继承。

  浏览器在给 hx 标题元素设定默认样式时,使用的是 h1 {font-size: 200%;} h2 {font-size: 150%;} 等等这样的规则来设定字体大小。浏览器通过这些样式来确保各级标题文本可以与普通文本呈现字体大小的固定比例关系。

那么浏览器为什么要通过百分比来固定这个比例,而不是用固定的 px 值来确定相对的比例关系呢(比如这样:h1 {font-size: 32px;} h2 {font-size: 24px;} p {font-size: 16px;} 等等)?

一方面,百分比显然更适合用来设置比例
另一方面,是因为几乎所有浏览器通常都提供了文本缩放功能(注意:非整页缩放),这是浏览器对网页可访问性提供的最基础的支持。而浏览器(尤其是
IE)的文本缩放功能在原理上,通常是通过重设 body 元素的字体大小来实现的——当 body 的字体大小变化时,其后代元素通过 CSS
的层层继承和百分比的换算来呈现字体大小的比例关系。

所以,浏览器自身的默认样式中是不会使用 px 这样的绝对单位的,否则文本缩放特性无法实现。(我们一定都有过这样的经验,一旦某个元素的字体大小使用了固定的 px 值,它就再也不受 IE 缩放设置的影响了。)

罗嗦完了,回到问题本身:

写 CSS Reset 的目的,就是把浏览器的默认样式覆盖掉。我最早看到的 CSS Reset,确实就是这么写的:

h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}


至可能第一个写 CSS Reset 的人(Eric Meyer?)就是这么写的。这样写的“好处”在于,可以非常直观地把浏览器的默认样式(h1
{font-size: 200%;} 等)清零,用百分比干掉百分比,再合适不过。而后来人也一直沿用,可能是懒得去作改变,也可能是向前辈致敬。

重设浏览器默认字体大小

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

假如你设置body{font-size:12px;}

但h1是不会继承这个12px,它会按照一定百分比增加字号,但如果给h1显示指定font-size:100%;它就会继承body设定的字体大小。

1. 它改变了默认的大小。

当然除此以外,还有其它方法也可以实现 hx 字体大小清零的目的:

    • {font-size: inherit;} 可是 IE 6,7 不支持。
    • {font-size: 1em;} 这个貌似完美,且字节数更少。

  line-height : normal | length

  参数:

  normal : 默认行高

  length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

 说明

  检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

  如行内包含多个对象,则应用最大行高。此时行高不可为负值。

  对应的脚本特性为lineHeight。请参阅我编写的其他书目。

 示例

  div {line-height:6px; }

  div {line-height:10.5; }

 注意

  1.用line-height只对文字起作用 对于图片时失效

  2.用dreamweaver 可以看到即时的line-height 的效果

  3.用line-height 时可以使用负值

  需要注意的是,在各浏览器下对于line-height的解决也是有细微的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇数的话,有些浏览器会上比下多1px,而另一些浏览器会下比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数

font-size:100%有什么作用的更多相关文章

  1. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  2. height:100%不起作用(无效),div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  3. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  4. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  5. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  6. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

  7. UIAlertController custom font, size, color

    本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...

  8. Phone Font Size

    This table lists and describes the various font sizes that can be applied. Attribute = FontSize   Na ...

  9. PyCharm Change Font Size

    file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...

随机推荐

  1. Redux-Form学习笔记

    总结下使用Redux-Form的步骤,基本的Form使用我分为一下5步: 安装Redux-Form npm install --save redux-form 创建reducer import {re ...

  2. Eclipse配置PHP及自动提示功能

    Eclipse是一个开发工具,具有强大的插件功能,虽然用于Java理所当然,但为PHP所用,也为尝不可.虽然我一直用的是notepad,但发现开发工具也可以省去一些不必要的记忆. 言归正传,下面就来实 ...

  3. yii2 mpdf

    安装 php composer.phar require kartik-v/yii2-mpdf "*" 或者把 "kartik-v/yii2-mpdf": &q ...

  4. 用canvas制作酷炫射击游戏--part1

    好久没写博客了,因为过年后一直在学游戏制作方面的知识.学得差不多后又花了3个月时间做了个作品出来,现在正拿着这个作品找工作. 作品地址:https://betasu.github.io/Crimonl ...

  5. hosts文件的一个小发现

    今天才发现原来同一个ip可以在hosts文件中配置多个域名.之间老是换一个网站就改一下,现在终于不用这么麻烦了 127.0.0.1 gg.pclady.com.cn 127.0.0.1 gg.pcon ...

  6. dbca静默建库和删除库

    dbca查看帮助: [oracle@wen ~]$ dbca -help 1).运行静默建库语句 [oracle@wen ~]$ dbca -silent -cloneTemplate -gdbNam ...

  7. Python札记 -- MongoDB模糊查询

    最近在使用MongoDB的时候,遇到了使用多个关键词进行模糊查询的场景.竹风使用的是mongoengine库. 查了各种资料,最后总结出比较好用的方法.先上代码,后面进行详细说明.如下: #!/usr ...

  8. [后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs

    一.引言 之前这个系列文章已经介绍Bootstrap.由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看 ...

  9. 循序渐进做项目系列(1):最简单的C/S程序——让服务器来做加法

    (本文是专门针对未接触过C/S开发的初学者而写的,C/S开发高手请自动忽略啊~~) 还在写“Hello world!”式的单机程序吗?还在各种拖控件吗?是否自己都觉得有点low呢?来个质的飞跃吧!看看 ...

  10. js中的深复制和浅复制

    在实际情况中经常会遇到对对象复制的问题.比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义.其中最常见最普遍的是对对象的复制,重 ...