探究CSS line-height属性
来源:互联网 发布:mysql 分散 编辑:程序博客网 时间:2024/06/05 06:02
1、line-height 属性设置行间的距离(行高),而行间距的尺寸分配是line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box),
2、可能的值有:
注:行间距自动适应行高的方式,最好用的是采用number数值的方式。
3、设置了line-height的行框line-box,具有的特性:
1)、垂直居中性:由上面对line-height定义可知,line-height是通过line-box行框体现的,而行框包括文本+文本顶部+文本底部,文本顶部和文本底部是line-height 与 font-size差值的一半,所以,line-box与文本共用中基线,这就是行高的垂直居中性。
单行文字的垂直居中对齐,将line-height属性设置为所需要的行框高度:
对于多行文本垂直居中对齐,只需要将行框内的多行文本转换为内敛元素,比如设置display:inline-height或inline,然后单独设置内敛元素的行间距,整个内敛元素就在行框内垂直居中对齐了:
<style type="text/css">.mulit_line{line-height:150px; border:1px dashed red; padding-left:5px;}.mulit_line span{display:inline-block;line-height:1.4em;}</style><p class="mulit_line"> <span style="font-size:12px;"> 这是一段非常长的文字,将会出现多行显示; 这是一段非常长的文字,将会出现多行显示; 这是一段非常长的文字,将会出现多行显示; 这是一段非常长的文字,将会出现多行显示; 这是一段非常长的文字,将会出现多行显示; </span></p>
注:通过line-height设置文本垂直对齐,如果设置元素垂直对齐,需使用vertical-align:middle;
2)、使用行高代替高度避免haslayout
在某些情形下,line-height可以和height互换,因为实现的效果一样。都能撑开一个高度,然而这两个css属性有一个较隐蔽的差异,就是使用height会使标签haslayout,而使用line-height则不会。以前只有IE6的时候曾流行使用height清除浮动,就是利用了IE下height使haslayout的属性。但有时候,haslayout并不需要,反而要避免。
读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height,其原因在于:IE6,IE7下,类似inline-block属性的元素里如果有block属性的元素,如果该block haslayout,则该标签会冲破外部inline-block的显示而宽度100%显示,从使按钮自适应文字大小的效果失效,解决方法就是使用line-height代替height。
上图中第一个标签使用height定高,结果宽度直接100%显示;第二个标签使用line-height定高,结果很规矩,自适应与内部文字大小。其代码如下:
css部分:
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}.in1{display:block; height:20px;}.in2{display:block; line-height:20px;}
html部分:
<span class="out"> <span class="in1">height:20px;</span></span><span class="out"> <span class="in2">line-height:20px;</span></span>
本文部分参考:http://www.zhangxinxu.com/wordpress/?p=384
- 探究CSS line-height属性
- css line-height 探究
- CSS line-height 属性
- CSS line-height 属性
- CSS line-height 属性
- 【css-基础-属性】 line-height
- css属性之line-height
- CSS的line-height属性
- CSS line-height height 属性 ()
- CSS属性line-height新解
- 深入CSS属性(三):line-height
- 深入CSS属性(三):line-height
- css的行高Line Height属性
- css line-height记录
- CSS line-height
- css之line-height
- CSS line height 介绍
- line-height 属性介绍
- Ubuntu14.10 下live555 的编译
- iOS开发面试题目(高级向)
- Kafka在大数据生态系统中的价值
- Android-studio遇到的一些问题
- Liferay Portal 6.2 GA6 SDK Plugin Maven开发
- 探究CSS line-height属性
- 欢迎使用CSDN-markdown编辑器
- CSS之可收缩的底部边框
- mysql运行sql文件出错
- Uber无模式数据存储
- SpringMvc入门
- HTML5 - 使用<audio>播放音频
- 限制输入框只能输入11位数字
- Java的类加载机制