今天看到一篇文章,说的是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. 浅谈Linux文件与目录权限

    作为一个程序员,在工作的过程中或多或少都会接触都Linux,那么对于权限这块肯定有所了解,今天有空想谈谈觉得比较绕的权限问题,即文件权限与目录权限 1.文件权限,对于文件权限这个是比较简单的,也很容易 ...

  2. 畅捷通T+12.2升级时发生的错误及处理方法图解

    前言:最近处理一个客户单位的财务数据,需要从2004年的U820版本的数据升级到畅捷通T+12.2版本.经查,该升级先要将原数据升级到T6,再从T6升级到畅捷通T+12.2版本.U820升级到T6很简 ...

  3. 转载 usb_alloc_coherent 和 usb_free_coherent

    今天做移植的时候,随手记录一下,今天所遇到的问题解决方法. 在linux2.6.34和之前的代码中还可以使用usb_buffer_alloc 和 usb_buffer_free 这两个函数,在2.6. ...

  4. python locust 性能测试:HttpSession

    官网解释:用于在请求之间执行Web请求和保留(会话)cookie的类(以便能够登录和退出网站):记录每个请求,以便locust可以显示统计信息: from locust import TaskSet, ...

  5. mysql:数据库备份方案

    1. 数据库备份方案     1)没备份,跑路~     2)全量备份+增量备份 如果不小心“删库”,可以这么恢复: a. 将最近一次全量备份的全库找到,拷贝回来(文件一般比较大),解压,应用: b. ...

  6. java集合类学习笔记1

    一.集合的接口 java集合类库也将接口与实现相分离.首先看一下大家都熟悉的数据结构-队列是如何分离的.队列接口指出可以在队列的尾部添加元素,在队列的头部删除元素,并且可以查找队列中元素的个数.当需要 ...

  7. 移动端与pc端如何用localStorage实现历史纪录?

    1.使用jq完成localStorage实现历史纪录版. 代码如下: <!DOCTYPE html> <html> <head lang="en"&g ...

  8. 使用Semaphore同步,经典银行账户问题

    1.新建Account类,使用Semaphore同步增加和减少金额方法. package com.xkzhangsan.semaphorepack.bank; import java.util.con ...

  9. 论文阅读笔记 Word Embeddings A Survey

    论文阅读笔记 Word Embeddings A Survey 收获 Word Embedding 的定义 dense, distributed, fixed-length word vectors, ...

  10. 一个基于nuxt的基础架子,支持aixos,sass,es6,elementUI

    nuxt官网:Nuxt.js docs github: 项目地址 项目版本说明 package 版本号 "babel-cli" "^6.26.0" " ...