深入了解css的行高LineHeight属性.doc

深入了解css的行高LineHeight属性.doc

ID:49616632

大小:259.03 KB

页数:12页

时间:2020-03-02

深入了解css的行高LineHeight属性.doc_第1页
深入了解css的行高LineHeight属性.doc_第2页
深入了解css的行高LineHeight属性.doc_第3页
深入了解css的行高LineHeight属性.doc_第4页
深入了解css的行高LineHeight属性.doc_第5页
资源描述:

《深入了解css的行高LineHeight属性.doc》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、CSS浏览器什么是行间距?古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里。行间距,即传说中控制两行文字之间垂直距离的东东。在CSS,line-height被用来控制行与行之间的垂直距离。不过行间距与半行间距还是取决于CSS中的line-height。那么如何来使用line-height?默认状态,浏览器使用1.0-1.2line-height.这是一个初始值。你可以定义CSS里的line-height属性来覆盖默认值Css代码  p { line-height:140%; }p{line-height:140%

2、;}你可以用5种方式来定义line-height:1、line-height可以被定义为normal。Css代码  body { line-height:normal; }body{line-height:normal;}2、line-height可以被定义为继承p{line-height:inherit;}3、line-height可以使用一个百分比的值p{line-height:120%;}4、line-height可以被定义为一个长度值(单位px、em等)p{line-height:20px;}5、line-height也可

3、以被定义为纯数字(甚至没有单位)p{line-height:1.2;}缩写line-height那5种line-height值也可以在font属性里缩写line-height值紧跟着font-size值,使用斜杠隔开/举例来说......值normalbody{font:100%/normalarial;helvetica,sans-serif;}值百分比body{font:100%/120%arial;helvetica,sans-serif;}值长度body{font:100%/

4、20pxarial;helvetica,sans-serif;}值纯数字body{font:100%/1.2arial;helvetica,sans-serif;}计算line-height有些CSS属性是可继承(inherited)(从层叠的元素里传递下来)这样设计是为了方便开发者于是他们不用为所有后代元素再设置一次例如:color属性是可继承的。如果body被定义了color,那么它会传递给页面里的所有元素对于line-height继承会有一点复杂为了更好的演示line-height的各种用法使用如下的HTML代码

co

5、nsectetueradipiscing....

Loremipsumdolorsitamet....

Duisautemveleum....
这些代码有着如下文档树结构我们同时使用如下CSS(注:文字大小使用像素是为了看起来简单,尽管不推荐这么干!)Css代码  body { font-size:16px; line-height:XXX; }h1 {font-size:32px;}p {font-size:16px;} #footer {font-size:12px

6、;}body{font-size:16px;line-height:XXX;}h1{font-size:32px;}p{font-size:16px;}#footer{font-size:12px;}例1:值百分比line-height被设置为百分比(120%)Css代码  body { font-size:16px; line-height:120%; }h1 {font-size:32px;}p {font-size:16px;}#footer {font-size:12px;}body{font-size:16px;line

7、-height:120%;}h1{font-size:32px;}p{font-size:16px;}#footer{font-size:12px;}line-height的百分比(120%)和body的文字大小(16px)被用来计算值(16px*120%=19.2px)这个计算出来的值会被层叠下去的元素所继承所有继承下来的元素会忽略本身的font-size,而使用相同的,计算出来的line-height.line-height不会随着相关的font-size做相应的比例缩放例2、值:长度line-height被设置成一个长度值(

8、20px)Css代码  body { font-size:16px; line-height:20px; }h1 {font-size:32px;}p {font-size:16px;}#footer {font-size:12px;}body{f

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签