首页
网站模板
整站模板
站群模板
应用中心
站群模板
插件
整站
云采集规则
建站软件
解决方案
帮助中心
教程中心
建站论坛
您现在的位置:
365建站网
>
365学习
> line-height的继承
line-height的继承
文章来源:365jz.com 点击数:
201
更新时间:2009-09-18 10:21
参与评论
看了玉伯的博客里关于line-height的一篇文章,http://lifesinger.org/blog/2009/08/line-height/ 。平时经常见到的line-height竟包含很多鲜为人知的事。line-height的值可以为:<
length
>|<
percentage
>|<
number
>| noromal | inherit。em,px和百分数都相对于元素的font-size值计算。
但是当一个块级元素继承另一个元素的line-height属性时,情况就会变得比较复杂。line-height值从父元素继承时,要从父元素那里计算,而不是在子元素上计算。
Code
1
<
body
style
="font-size:10px;"
>
2
<
div
style
="line-height:150%"
>
3
<
p
style
="font-size:15px;"
>
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字
</
p
>
4
</
div
>
5
</
body
>
这里的p的font-size是16px,但是它继承来的line-height只有15px,所以导致行挨得比较近。
解决办法:1.可以为每个元素显式的设置line-height属性,但是不太实用。
2.指定一个数,由它设置缩放因子。
Code
1
<
body
style
="font-size:10px;"
>
2
<
div
style
="line-height:1.5"
>
3
<
p
style
="font-size:15px;"
>
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字
4
</
p
>
5
</
div
>
6
</
body
>
指定一个数时,缩放因子将是继承值而不是计算值。这个数会应用到该元素及其所有子元素,所以各元素可以根据自己的font-size值来计算line-height。
所以这里的p的line-height为15*1.5px;
Tag标签: line-height继承
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!!
点击进入论坛
您可能感兴趣的文章:
win7浏览器访问https网站出现的Let‘sEncrypt证书无效安全证书有问题的解决方法
MYSQL解决where in过多值索引不生效的解决方法(强制索引force index)
Visual Studio Installer 2022 安装提示正在提取文件 进度条不动 0B每秒
Win10 这台计算机中已经安装了 .NET Framework 4.5.2 或版本更高的更新解决方法
Win10远程桌面连接出现身份验证错误,CredSSP加密Oracle修正解决方法
发表评论
(
201
人查看
,
0
条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
提交评论
最新评论
------分隔线----------------------------
上一篇:
从print css谈样式表的媒介(media)属性
下一篇:
javascript 触发事件列表
大家感兴趣的内容
1
win7浏览器访问https网站出现的Let‘sEncrypt证书无效安全证书有问题的解决方法
2
MYSQL解决where in过多值索引不生效的解决方法(强制索引force index)
3
Visual Studio Installer 2022 安装提示正在提取文件 进度条不动 0B每秒
4
Win10 这台计算机中已经安装了 .NET Framework 4.5.2 或版本更高的更新解决方法
5
Win10远程桌面连接出现身份验证错误,CredSSP加密Oracle修正解决方法
6
php8提示Array and string offset access syntax with curly braces is deprecated
7
VMware安装完后,没有虚拟网卡VMnet1和VMnet8的解决办法
8
如何解决WinForm窗体显示时黑屏或白屏反应慢问题
9
css3 动画与display:none冲突的解决方法
10
解决win10/Windows 10开机后磁盘占用100%的方法
最近更新的内容
1
win7浏览器访问https网站出现的Let‘sEncrypt证书无效安全证书有问题的解决方法
2
mysql中myisamchk: error: myisam_sort_buffer_size is too small错误的解决方法
3
MySQL中处理大数据的优化查询速度方法
4
MYSQL解决where in过多值索引不生效的解决方法(强制索引force index)
5
mysql数据库针对大数据备份及还原的方法
6
css中nth-of-type与nth-child的区别
7
mysql刚启动就停止是什么原因(localhost::1)
8
Visual Studio Installer 2022 安装提示正在提取文件 进度条不动 0B每秒
9
Win10 这台计算机中已经安装了 .NET Framework 4.5.2 或版本更高的更新解决方法
10
Win10远程桌面连接出现身份验证错误,CredSSP加密Oracle修正解决方法