font-size:100%有什么作用
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%有什么作用的更多相关文章
- hiho #1288 微软2016.4校招笔试题 Font Size
#1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...
- height:100%不起作用(无效),div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
- LaTeX :font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- GetPropInfo Font Size
设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...
- unity UGUI text font size对性能影响较大
Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...
- XE6 c++builder 设置 font size GetPropInfo SetOrdProp
PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...
- UIAlertController custom font, size, color
本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...
- Phone Font Size
This table lists and describes the various font sizes that can be applied. Attribute = FontSize Na ...
- PyCharm Change Font Size
file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...
随机推荐
- angular下拉
<div class="form-group col-sm-4"> <label class="col-sm-5 control-label" ...
- 也学习Java/JVM/GC(四)
GC日志分析 程序代码: public class JvmTest { public static void main(String[] args) { int m = 1024 * 1024; by ...
- selenium 富文本框处理
selenium 富文本框处理, 网上有用API的解决方法1:参见:http://blog.csdn.net/xc5683/article/details/8963621 群里1位群友的解决方法2:参 ...
- Ms - Sql 定位附近的人
数据库结构: T_Users longitude decimal(6,0) latitude decimal(6,0) 经纬度:113.284137,23.184625 查出周围2公里以内的人: se ...
- 01 选择 Help > Install New Software,在出现的对话框里,点击Add按钮,在对话框的name一栏输入“ADT”,点击Archive...选择离线的ADT文件,contact all update ....千万不要勾选点击Add按钮,在对话框的name一栏输入“ADT”,点击Archive...选择离线的ADT文件,contact all update ....千万不要勾
引言 好久没碰过android,今天重新搭建了一次环境,遇到的问题记录下载.共以后使用. 安装 软件的软件有jdk+eclipse+adt+sdk 主要记录安装adt和sdk的过程,注意,adt和sd ...
- Online Judge中基本的输入输出
一.利用c语言处理输入和输出 1.输入: 在C语言中输入中stdin指针表示标准的输入,scanf默认读取的就是stdin指向的输入,在acm中我们可能需要不断的测试,最好将stdin重定向到某一个文 ...
- s:textarea中的文本内容在什么时候才能被赋值给Action中的属性?
下面是jsp程序片段: <s:form id="startForm" name ="startForm" action="/hall/hall_ ...
- 微信公共平台开发-(.net实现)1--成为开发者
刚换了个新环境,哎这都快一个月了,还没适应过来,还是怀念老地方呀.老板让开发一个基于微信平台的开发项目,而且是用net实现.当时就蒙了,微信就用了一会个人赶脚不好,所以果断不用,现在让开发,而且查了一 ...
- 《IO 系统性能》笔记
近期项目中涉及和别人谈存储架构及选型,将IOPS相关的内容学习下.参考网上资料<IO 系统性能之一:衡量性能的几个指标> 1. 基本概念 1)读写IO操作:对应磁盘的存数据.取数据: 2) ...
- Java多线程系列--“JUC锁”08之 共享锁和ReentrantReadWriteLock
概要 Java的JUC(java.util.concurrent)包中的锁包括"独占锁"和"共享锁".在“Java多线程系列--“JUC锁”02之 互斥锁Ree ...