font-size:100%有什么作用

Posted 2020-06-24

　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,对于有些要求比较严格的网站,建议行高设计时用偶数