深入了解line-height
1.定义
行高:两行文字baseline(基线)之间的距离
示意图:
2.为何line-height可以让单行文本垂直居中
其实并没有垂直居中,除非将font-size:0;
3.line-height的高度原理(可以先看看行内盒子的原理)
* 行内元素的高度是line-height决定的,而不是由font-size决定的,
* 行高由于其继承性,影响无处不在,即使单行文本也不例外
* 行高只是幕后黑手,高度的表现不是行高,而是内容区域和行间距
* 内容区域高度+行间距 = 行高
内容区域高度至于字号以及字体有关,与line-height无关
4.比较有用的属性值
* line-height:1.5;line-height:150%;line-height:1.5em;
实际的line-height: font-size*1.5,适合页面自适应
* 区别:
* 1.5: 所有可继承元素根据自身的font-size重计算行高
* 150%/1.5em: 当前元素根据font-size计算行高,子元素继承该行高
分析:div的行高: line-height:24px*1.5,span的行高 line-height:60px*1.5
<div style="background:#eee;font-size:24px;line-height:1.5;">
<span style="font-size:60px;">测试1</span>
</div>
分析: div的行高: line-height:24px*1.5,span继承div的行高 line-height:24px*1.5
<div style="background:#eee;font-size:24px;line-height:150%;">
<span style="font-size:60px;">测试2</span>
</div>
* 继承性(IE8+)
input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强
* 使用经验
body{font-size:14px;line-height:1.4286} => line-height:20px;
5.line-height和图片的表现
* 行高不会影响图片实际占据的高度
* 消除图片底部间隙的方法
a.图片块状化 - 无基线对齐 img{display:block;}
b.图片底线对齐 img{vertical-align:bottom;}
c.行高足够小 - 基线位置上移 .box{line-height:0;}
6.line-height的实际应用
* 大小不固定的图片垂直居中(IE8+)
.box{height:300px;line-height:300px;text-align:center;}
.box>img{vertical-align:middle;/*基线网上1/2高度*/}
* 多行文本垂直居中(IE8+)
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;}
/* 重置外部继承的line-height、text-align */
* 代替height,避免IE6/IE7下的haslayout
<span class="out">
<span class="in1">height:36px;</span>
</span>
<span class="out">
<span class="in2">line-height:36px;</span>
</span> .out{display:inline-block;/*或float:left*/}
.in1{display:block;height:36px;}
.in2{display:block;line-height:36px;} /*结果:在IE6/IE7下,out容器的 inline-block,给变成了block*/
深入了解line-height的更多相关文章
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 微信小程序demo2
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 ...
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- 想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- 383. Container With Most Water
最后更新 一刷. 双指针夹逼. 容器的高度受限于较小的边,夹的时候底在变小,所以移动较大的边没有意义,最终高度还是小的那边:只能尝试移动小的那个边. public class Solution { p ...
- 从bug中学习怎么写代码
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:从bug中学习怎么写代码.
- Unicode和字符集小结
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Unicode和字符集小结.
- dublin core实例
<?xml version="1.0"?> <metadata xmlns="http://example.org/myapp/" xmlns ...
- 数字信号处理与音频处理(使用Audition)
前一阵子由于考博学习须要,看了<数字信号处理>,之前一直不清除这门课的理论在哪里应用比較广泛. 这次正巧用Audition处理了一段音频,猛然发现<数字信号处理>这门课还是很实 ...
- NGUI 3.5教程(六)Font字体
字体是UI很重要的一部分.今天用NGUI 3.5,制作一下字体. 以下是我做的一个射击游戏的DEMO.子弹数量,就使用了NGUI的字体显示.效果例如以下: 步骤: 1,寻找(或者制作)字体.我这里图方 ...
- 【点滴积累】通过特性(Attribute)为枚举添加更多的信息
转:http://www.cnblogs.com/IPrograming/archive/2013/05/26/Enum_DescriptionAttribute.html [点滴积累]通过特性(At ...
- GOOGLE------Reilly_Open_Source_Award
https://en.wikipedia.org/wiki/O%27Reilly_Open_Source_Award#2016
- setValue 和 setObject 的区别
在使用NSMutableDictionary 的时候经常会使用setValue forKey 与 setObject forKey,他们经常是可以交互使用的. 1.setValue forKey的定义 ...
- Java RMI详解
RMI:远程方法调用(Remote Method Invocation).能够让在某个java虚拟机上的对象像调用本地对象一样调用另一个java 虚拟机中的对象上的方法. RMI远程调用步骤: 1,客 ...