line-height这个样式相信大家一定不会陌生,我们经常用它来让文本上下居中,这样做一般不出出现什么问题,但是如果对这个属性不是很熟悉的话,可能会踩到一些坑,今天亲自去试验了一下,并总结了一下line-height的几个特性。

首先line-height有以下几种标准的写法:

写法1、line-height:normal;     //等价于写法5,固定值为数字1.2,默认为normal

写法2、line-height:inherit;    //父元素继承

写法3、line-height:24px;      //通过像素px或者em等单位赋值

写法4、line-height:150%;    //line-height=font-size*1.5

写法5、line-height:1.5;      //line-height=font-size*1.5

首先看一下写法3可能存在什么问题,如图:

    

可以看出,父元素设置行高,而子元素如果没有设置行高,那么子元素会采用父元素设置的line-height,不管子元素的font-size多大,都不会改变行高,所以当子元素font-size>父元素line-height的时候,会出现字体重叠或者其它不想看到的样式。

其次写法4和5看起来虽然一样,却有不同之处,如下图:

          

上面两种写法都会得到同样的效果,如图:

现在把子元素字体增大一倍

通过百分比设置的行高,line-height = 200%*父元素 font-size = 32px,子元素行高不会发生变化,导致字体重叠

通过数字设置的行高,子元素的行高会重新计算,line-height=父元素行高比例因子*子元素font-size=2*64=128px;子元素行高会重新计算

到这总结有以下几点

  line-height具有继承性(inherited)。

  元素设置了line-height等于像素值px或者em时,那么他的子元素(没有设置行高的子元素)会采用父元素的line-height,并且不会因为字体大小而改变本身的行高。

  line-height会根据父元素设置的方式,确定自身行高是否重新计算。即写法4和5的区别

相信到这里你已经对line-height有一定的了解了

说一说line-height的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  5. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  7. 微信小程序demo2

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现   ...

  8. 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. 想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  10. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. MFC 单文档消息执行顺序。

    theApp构造, InitInstance void CMyFrameWnd::OnGetMinMaxInfo(MINMAXINFO* lpMMI) BOOL CMyFrameWnd::OnNcCr ...

  2. Spark Streaming资源动态申请和动态控制消费速率剖析

    本期内容 : Spark Streaming资源动态分配 Spark Streaming动态控制消费速率 为什么需要动态处理 : Spark 属于粗粒度资源分配,也就是在默认情况下是先分配好资源然后再 ...

  3. oracle的over函数应用(转载)

    摘自: http://www.poluoluo.com/jzxy/201004/81921.html 百度文库也记载了Oracle中over()分析函数的用法 在泡坛子的时候中无意中发现了这个函数,才 ...

  4. background-size拉伸背景图片

    在制作页面中常需要对背景图片在容器中进行平铺,可用background-size属性对背景编辑:拉伸,压缩等~ background-size:contain; 将背景扩展到整个容器大小. 较为实用的 ...

  5. 我现在的vimrc配置文件

    runtime! debian.vim "设置编码 set encoding=utf- set fencs=utf-,ucs-bom,shift-jis,gb18030,gbk,gb2312 ...

  6. Android IOS WebRTC 音视频开发总结(八十六)-- WebRTC中RTP/RTCP协议实现分析

    本文主要介绍WebRTC中的RTP/RTCP协议,作者:weizhenwei ,文章最早发表在编风网,微信ID:befoio 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID ...

  7. 在VS中操作Mysql数据库

    1.实现mysql数据库与VS的连接,需要安装两个插件,作者装的是mysql-connector-net-6.9.9.msi和 mysql-for-visualstudio-1.2.6.msi. 2. ...

  8. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  9. Mac下命令行中用sublime打开指定文件 设置方法

    sublime2版本 官网提供的方法:sublime2 官网提供的方法是:ln -s "/Applications/Sublime Text 2.app/Contents/SharedSup ...

  10. "递归"实现"约瑟夫环","汉诺塔"

    一:约瑟夫环问题是由古罗马的史学家约瑟夫提出的,问题描述为:编号为1,2,-.n的n个人按顺时针方向围坐在一张圆桌周围,每个人持有一个密码(正整数),一开始任选一个正整数作为报数上限值m,从第一个人开 ...