line-height:150%与line-height:1.5的区别
今天看到一篇文章,说的是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的区别的更多相关文章
- jquery的height()和javascript的height总结,js获取屏幕高度
jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...
- obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')
相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- Bug整理——$(window).height()获取到$(document).height()的问题
想看解决方案不想看无聊乏味的bug解决过程的同学,请直接跳转到页面底部~ 今天在做项目的过程中遇到了一个BUG,项目中需要获取到浏览器客户区的高度以方便做一些适应性调整,代码如下: $(documen ...
- 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 ...
- 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 ...
- Go to the first line OR the last line of the file
(1) 跳到首行 :1 或 gg (2)跳到最后一行 :$ 或 G 或shift+g(大写.当前若大小写锁定直接按g,未锁定则按shift+g)
- [gym102412D]The Jump from Height of Self-importance to Height of IQ Level
考虑使用平衡树维护该序列,操作显然可以用fhq treap的分裂+合并来实现 进一步的,问题即变为维护哪些信息来支持push up的操作(并判定是否存在$a_{i}<a_{j}<a_{k} ...
- CSS3学习笔记--line-height:150%与line-height:1.5的真正区别
代码: <div style="line-height:150%;font-size:16px;"> 父元素内容 <div style="font-si ...
- 利用canvas图片剪切
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...
随机推荐
- 《高性能Mysql》解读---Mysql的事务和多版本并发
1.base:ACID属性,并发控制 2.MySql事务的隔离级别有哪些,含义是什么? 3.锁知多少,读锁,写锁,排他锁,共享锁,间隙锁,乐观锁,悲观锁. 4.Mysql的事务与锁有什么关联?MySq ...
- The type com.google.protobuf.GeneratedMessageV3$Builder cannot be resolved. It is indirectly referenced from required .classfiles
在做项目的时候,导入了几个类,导入了相关的jar. 结果在package处报了The type com.google.protobuf.GeneratedMessageV3$Builder canno ...
- Java stream的常见用法
不讲原理,只说用法. 1,集合遍历 public class StreamTest { public static void main(String[] args) { //1 遍历 List< ...
- luogu P1003 铺地毯
水题 #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; t ...
- struts2 在 Action 或 Interceptor 中获取 web.xml 中配置的 <context-param> 参数 (这是我的第一篇博文,哈哈。)
最近为了改一个问题,想加一个控制开关,就在web.xml 中配置了一个 <context-param> 参数,并在 Action 或 Interceptor 中获取参数值. 1.在 web ...
- IP通信基础学习第四周(下)
选择子网掩码时,不总是使用整个八位作为屏蔽位. 在每个子网中,子网掩码是相同的. 在划分子网的情况下,判断两台主机是不是在同一子网中,需看它们的网络号与子网地址是不是相同的. 变长子网掩码VLSM,无 ...
- CCF CSP 201604-1 折点计数
题目链接:http://118.190.20.162/view.page?gpid=T42 问题描述 试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0M ...
- TeamViewer连CentOS
用过TeamViewer的人都会感叹其远程连接的强大,昨天有将Windows和CentOS在同一网段内互相连接打通了,今天在外网环境下突然想到是否可以用TeamViewer在外网环境下连到CentOS ...
- iOS项目之iPhoneX遇到的坑
问题一: 今天升级到Xcode 9.0,里面多了iPhone 8,iPhone 8P,iPhone X三款手机模拟器,而且发现最多可以同时运行五个模拟器.但随之而来的问题也出现了,就是 iPhone ...
- js判断终端以及APP应用判断
**第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下:** <script type="text/javascript"& ...