今天看到一篇文章，说的是CSS学习中的瓶颈，我最近也发现自己css很薄弱，写的样式总是有兼容性问题，要写很久，发现了一个问题，我从来没有用过line-height:150和line-height:1.5，都是直接用xxpx的，所以一直不知道这2者竟然有区别，长见识了。下面说下2者的区别：

  • 父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
  • 父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

如：

父元素设置属性：font- size:14px;line-height:1.5,child设置font-size:26px;

那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。

父元素设置属性：font-size:14px;line-height:150%,child设置font-size:26px;

那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。

-----------------------------------------------------------------------------------------------------------------

最近的自己有点浮躁，在学习的道路上任重而道远啊。。。

line-height:150%与line-height:1.5的区别的更多相关文章

  1. jquery的height()和javascript的height总结，js获取屏幕高度

    jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...

  2. obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')

    相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...

  3. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. Bug整理——$(window).height()获取到$(document).height()的问题

    想看解决方案不想看无聊乏味的bug解决过程的同学,请直接跳转到页面底部~ 今天在做项目的过程中遇到了一个BUG,项目中需要获取到浏览器客户区的高度以方便做一些适应性调整,代码如下: $(documen ...

  5. error: OpenCV Error: Assertion failed (0 <= roi.x && 0 <= roi.width && roi.x + roi.width <= m.cols && 0 <= roi.y && 0 <= roi.height && roi.y + roi.height <= m.rows) in cv::Mat::Mat

    问题原因: You are probably working outside of the image dimensions. Does any of the values you pass to t ...

  6. How to Get Vertical Line from Point and Line

    Description How to get vertical line cross one point which out of line in line. QPoint Line::Vertica ...

  7. Go to the first line OR the last line of the file

    (1) 跳到首行 :1 或 gg (2)跳到最后一行 :$ 或 G 或shift+g(大写.当前若大小写锁定直接按g,未锁定则按shift+g)

  8. [gym102412D]The Jump from Height of Self-importance to Height of IQ Level

    考虑使用平衡树维护该序列,操作显然可以用fhq treap的分裂+合并来实现 进一步的,问题即变为维护哪些信息来支持push up的操作(并判定是否存在$a_{i}<a_{j}<a_{k} ...

  9. CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

    代码: <div style="line-height:150%;font-size:16px;"> 父元素内容 <div style="font-si ...

  10. 利用canvas图片剪切

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

随机推荐

  1. laravel 自动加载 自定义的文件/辅助函数

    需求 在 laravel 中自定义了一些 辅助函数,想要laravel框架自动加载这些函数 实现 将自定义的辅助函数放在helpers.php文件中,如下: 在compsoer.json 的 auto ...

  2. TTL和COMS电平匹配以及电平转换的方法

    一．TTL TTL集成电路的主要型式为晶体管-晶体管逻辑门(transistor-transistor logic gate),TTL大部分都采用5V电源.1.输出高电平Uoh和输出低电平UolUoh ...

  3. SQL Server 复制表结构以及数据，去除表中重复字段

    --复制另一个数据库中的某张表的结构及数据--select * from Test.dbo.TestTable(查询表中所有数据) --into [表名] 插入当前数据库新表,如果没有该表就创建 se ...

  4. linux 网络设置

    centos7 ifcfg-ens33静态ip地址配置 vim /etc/sysconfig/network-scripts/ifcfg-ens33  TYPE=EthernetPROXY_METHO ...

  5. webServices接口开发过程中项目启动遇到的错误org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read schema document 'http://www.springframework.org/schema/beans/spring-bean

    org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read ...

  6. IP通信第四周作业

    一.选择交换机的主要技能指标是什么? a.背板带宽.二/三层交换吞吐率. b.VLAN类型和数量. c.交换机端口数量及类型. d.支持网络管理的协议和方法.需要交换机提供更加方便和集中式的管理. e ...

  7. 在java中使用ssm框架的定时的实现

    1.首先需要在application.xml里面配置如下的代码: xmlns:task="http://www.springframework.org/schema/task http:// ...

  8. webservice生成客户端代码

    wsimport -d C:\Other\WSDL_JAVA_Code -keep -verbose -Xauthfile C:\Other\.txt http://XXXXXX

  9. 5.list集合添加姓名{张三,李四,王五,二丫,钱六,孙七},将二丫替换为王小丫, 写入到"D:\\stuinfo.txt"

    package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...

  10. Flutter 数据存储 加权限 sharedpreference, sqflite, file

    要访问SD卡,首先读取权限肯定是要有的,不然写再多代码都是无用功.在AndroidManifest.xml文件中添加 <uses-permission android:name="an ...