Jquery: 100% 高度 (html, body) - 为程序员服务
为程序员服务
Jquery: 100% 高度 (html, body)
$(document).ready(sizeContent);
$(window).resize(sizeContent);
function sizeContent() {
var newHeight = $(&html&).height() - $(&#subtract-all-other-divs&).height() + &px&;
$(&#the-div-you-need-100%-height&).css(&height&, newHeight);
您可能的代码
相关聚客文章
荣誉：1292
相关专栏文章一、html,body{height:100%}
今天看到一个CSS样式：html,body{height:100%}，第一次看到，感觉挺奇怪，为什么html还需要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。然后就把html去掉只剩下body的height:100%，麻烦了，页面内容消失了(页面里只有一个空div通过百分比设置height)。
html代码：
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&type&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&text/css&&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
*&span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&0&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&padding&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&0&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&body&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&div&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-hexcolor& style=&box-sizing: border-&&#ddd&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&50&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&/ul&
然后在chrome下审查元素，发现如下图：
html标签：
body标签：
div标签：&
从图中可以发现，html、body、div三个标签宽、高一致，宽度全屏显示，高度都为0px；
我知道一个事实：一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。
还有，元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用，互相依赖，却都无法依赖，死循环了。
那如何解决这个问题呢，可以让子元素先定高，这样是可以解决；但是如果子元素一定要依赖父元素高度呢？
上面的html代码可以看出，div的父元素是body，body的父元素是html，通过height:100%层层向上，找到顶级获取定高。
所以出现了html和body同时设置height:100%，那html的上级是谁呢？
通过上面的事实知道，浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。
&code class=&hljs css has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&html&/span&,&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&body&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&
二、背景色
一般情况下，我们css控制的最高结点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是body标签下的背景色起作用了，我到不这么认为，这里不是body的background起作用，而是body作为一个根结点起作用了，html标签未被激活，body但当类似于根结点的结点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出来的，而是有一定的根据的。看下面的一段css代码：
&code class=&hljs css has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&
&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&body&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-hexcolor& style=&box-sizing: border-&&#069&/span&&/span&&/span&; &span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&px&/span&&/span&; &span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&30&/span&px solid &span class=&hljs-hexcolor& style=&box-sizing: border-&&#093&/span&&/span&&/span&;&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&/ul&
意思很简明：外边距100像素，边框30像素，背景色#069，按照对一般标签的理解，100像素的外边距应该不含有背景色的，然而显示的结果是（Firefox下表现与此类似）：
还有一点可以证明我上面的推论，就是一旦设置了html节点的background背景色之后，body的背景色将失效。例如下面的简短代码：
&code class=&hljs css has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&html&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-hexcolor& style=&box-sizing: border-&&#999&/span&&/span&&/span&;&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 0, 0); box-sizing: border-&&body&/span&&span class=&hljs-rules& style=&box-sizing: border-&&{&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-hexcolor& style=&box-sizing: border-&&#069&/span&&/span&&/span&; &span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&px&/span&&/span&; &span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&30&/span&px solid &span class=&hljs-hexcolor& style=&box-sizing: border-&&#093&/span&&/span&&/span&;&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&/ul&
跟上面的想比，就是添加了html的背景色，结果（截自IE6，Firefox浏览器下表现一致）：
结果是什么呢？body标签的满屏的背景色不见了，“失效”了。其实，在我看来，不是“失效”，是生效了。
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。
一旦html标签含有背景色，则body的背景色变成了正常的body标签自己的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。
文本转自：http://blog.csdn.net/javaloveiphone/article/details/ 谢谢~
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35728次
排名：千里之外
原创：40篇
转载：122篇
(5)(3)(12)(11)(14)(18)(31)(30)(43)font-size:100%有什么作用 - 王朝网络 -
分享&&&&&当前位置: &&&&&&&&font-size:100%有什么作用&&&　　font-size:100%有什么作用h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:}　　input,select,textarea,samp {font-size:100%;}　　看到一些CSS重设,请问设置font-size:100%的目的和作用是什么?　　---------------------------------------------------------------------------------------　　假如你设置body{font-size:12}　　但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: 32} h2 {font-size: 24} p {font-size: 16} 等等）？一方面，百分比显然更适合用来设置比例，另一方面，是因为几乎所有浏览器通常都提供了文本缩放功能（注意：非整页缩放），这是浏览器对网页可访问性提供的最基础的支持。而浏览器（尤其是 IE）的文本缩放功能在原理上，通常是通过重设 body 元素的字体大小来实现的&&当 body 的字体大小变化时，其后代元素通过 CSS 的层层继承和百分比的换算来呈现字体大小的比例关系。所以，浏览器自身的默认样式中是不会使用 px 这样的绝对单位的，否则文本缩放特性无法实现。（我们一定都有过这样的经验，一旦某个元素的字体大小使用了固定的 px 值，它就再也不受 IE 缩放设置的影响了。）罗嗦完了，回到问题本身：写 CSS Reset 的目的，就是把浏览器的默认样式覆盖掉。我最早看到的 CSS Reset，确实就是这么写的：　　h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:}甚至可能第一个写 CSS Reset 的人（Eric Meyer？）就是这么写的。这样写的&好处&在于，可以非常直观地把浏览器的默认样式（h1 {font-size: 200%;} 等）清零，用百分比干掉百分比，再合适不过。而后来人也一直沿用，可能是懒得去作改变，也可能是向前辈致敬。　　重设浏览器默认字体大小　　h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:}　　假如你设置body{font-size:12}但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显示指定font-size:100%;它就会继承body设定的字体大小。　　1. 它改变了默认的大小。　　当然除此以外，还有其它方法也可以实现 hx 字体大小清零的目的：　　{font-size:} 可是 IE 6,7 不支持。{font-size: 1} 这个貌似完美，且字节数更少。line-height : normal | length　　参数：　　normal : 默认行高　　length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位　　说明检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。　　如行内包含多个对象，则应用最大行高。此时行高不可为负值。　　对应的脚本特性为lineHeight。请参阅我编写的其他书目。　　示例div {line-height:6 }　　div {line-height:10.5; }　　注意1.用line-height只对文字起作用 对于图片时失效　　2.用Dreamweaver 可以看到即时的line-height 的效果　　3.用line-height 时可以使用负值　　需要注意的是,在各浏览器下对于line-height的解决也是有细微的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇数的话,有些浏览器会上比下多1px,而另一些浏览器会下比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数&&&&&今日推荐
&&&&&日版宠物情人2017的插曲，很带节奏感，日语的，女生唱的。
最后听见是在第8集的时候女主手割伤了，然后男主用嘴帮她吸了一下，插曲就出来了。
歌手：Def...老钟家的两个儿子很特别，就是跟其他的人不太一样，魔一般的执着。兄弟俩都到了要结婚的年龄了，不管自家老爹怎么磨破嘴皮子，兄弟俩说不娶就不娶，老父母为兄弟两操碎了心...把牛仔裤磨出有线的破洞
1、具体工具就是磨脚石，下面垫一个硬物，然后用磨脚石一直磨一直磨，到把那块磨薄了，用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...先来看下敬业福和爱国福
今年春节，支付宝再次推出了“五福红包”活动，表示要“把欠大家的敬业福都还给大家”。
今天该活动正式启动，和去年一样，需要收集“五福”...有时候我们打开冰箱就会闻到一股异味，冰箱里的这种异味是因为一些物质发出的气味的混合体，闻起来让人恶心。 产生这些异味的主要原因有以下几点。
1、很多人有这种习...简介
《极品家丁》讲述了现代白领林晚荣无意回到古代金陵，并追随萧二小姐化名“林三”进入萧府，不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...你就是我最爱的宝宝 - 李溪芮
(电视剧《极品家丁》片尾曲)
作词：常馨内
作曲：常馨内
你的眉 又鬼马的挑
你的嘴 又坏坏的笑
上一秒吵闹 下...乌梅，又称春梅，中医认为，乌梅味酸，性温，无毒，具有安心、除热、下气、祛痰、止渴调中、杀虫的功效，治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻，与干姜一起制...什么是脂肪粒
在我们的脸上总会长一个个像脂肪的小颗粒，弄也弄不掉，而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘，它就是脂肪粒。
脂肪粒虽然也是由油脂...来源：中国青年报
新的攻击方法不断涌现，黑客几乎永远占据网络攻击的上风，我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪，而不是处置和惩罚...夫妻网络直播“造人”爆红
　　1月9日，温岭城北派出所接到南京警方的协查通告，他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索，其中有一对涉案的夫妻主播...如何防止墙纸老化？
（1）选择透气性好的墙纸
市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等，相对而言，PVC材质的墙纸最不透气...观点一：破日本销售量的“鲜肌之谜” 非日本生产
近一段时间，淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液，号称是最近日本的一款推出的全新护肤品，产品本身所...系腰裙(北宋词人 张先)
惜霜蟾照夜云天，朦胧影、画勾阑。人情纵似长情月，算一年年。又能得、几番圆。
欲寄西江题叶字，流不到、五亭前。东池始有荷新绿，尚小如...关于女人的经典语句1、【做一个独立的女人】
思想独立：有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想，做一份自己喜爱的事业，拥有快乐和成就...你想体验机器人性爱吗？你想和性爱机器人结婚吗？如果你想，机器人有拒绝你的权利吗？
近日，第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...10.土耳其地下洞穴城市
变态指数：★★☆☆☆
这是土耳其卡帕多西亚的一个著名景点，传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人，......据英国《每日快报》报道，一位科学家兼理论家Robert Lanza博士宣称，世界上并不存在人类死亡，死亡的只是身体。他认为我们的意识借助我们体内的能量生存，而且...《我爱狐狸精》 - 刘馨棋
　　(电视剧《屏里狐》主题曲)
　　作词：金十三&李旦
　　作曲：刘嘉
　　狐狸精 狐狸仙
　　千年修...·&·&·&·&·&·&·&·&·&·&&&&&&font-size:100%有什么作用　　h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:}
　　input,select,textarea,samp {font-size:100%;}
　　看到一些CSS重设,请问设置font-size:100%的目的和作用是什么?
　　---------------------------------------------------------------------------------------
　　假如你设置body{font-size:12}
　　但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: 32} h2 {font-size: 24} p {font-size: 16} 等等）？一方面，百分比显然更适合用来设置比例，另一方面，是因为几乎所有浏览器通常都提供了文本缩放功能（注意：非整页缩放），这是浏览器对网页可访问性提供的最基础的支持。而浏览器（尤其是 IE）的文本缩放功能在原理上，通常是通过重设 body 元素的字体大小来实现的&&当 body 的字体大小变化时，其后代元素通过 CSS 的层层继承和百分比的换算来呈现字体大小的比例关系。所以，浏览器自身的默认样式中是不会使用 px 这样的绝对单位的，否则文本缩放特性无法实现。（我们一定都有过这样的经验，一旦某个元素的字体大小使用了固定的 px 值，它就再也不受 IE 缩放设置的影响了。）罗嗦完了，回到问题本身：写 CSS Reset 的目的，就是把浏览器的默认样式覆盖掉。我最早看到的 CSS Reset，确实就是这么写的：
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:}甚至可能第一个写 CSS Reset 的人（Eric Meyer？）就是这么写的。这样写的&好处&在于，可以非常直观地把浏览器的默认样式（h1 {font-size: 200%;} 等）清零，用百分比干掉百分比，再合适不过。而后来人也一直沿用，可能是懒得去作改变，也可能是向前辈致敬。
重设浏览器默认字体大小
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:}
假如你设置body{font-size:12}但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显示指定font-size:100%;它就会继承body设定的字体大小。
1. 它改变了默认的大小。
当然除此以外，还有其它方法也可以实现 hx 字体大小清零的目的：
{font-size:} 可是 IE 6,7 不支持。{font-size: 1} 这个貌似完美，且字节数更少。　　line-height : normal | length
　　参数：
　　normal : 默认行高
　　length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位
　说明　　检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
　　如行内包含多个对象，则应用最大行高。此时行高不可为负值。
　　对应的脚本特性为lineHeight。请参阅我编写的其他书目。
　示例　　div {line-height:6 }
　　div {line-height:10.5; }
　注意　　1.用line-height只对文字起作用 对于图片时失效
　　2.用Dreamweaver 可以看到即时的line-height 的效果
　　3.用line-height 时可以使用负值
　　需要注意的是,在各浏览器下对于line-height的解决也是有细微的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇数的话,有些浏览器会上比下多1px,而另一些浏览器会下比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数&&&&&　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。&&&&&&为你推荐&&&&&&转载本文&UBB代码&HTML代码复制到剪贴板...&更多内容··········&&&&&&&&&频道精选&&&王朝女性&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝分栏&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝编程&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝导购&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝其他&&|&&|&&|&&|&&|&&|&&&&2005-&&版权所有&}