line-height属性技巧
来源:互联网 发布:windows 输出到文件 编辑:程序博客网 时间:2024/05/16 05:17
line-height属性技巧
使只含一行内容的段落的文字内容水平居中
line-height是一种文本属性,指示行高,浏览器默认的行高较小,通常使段落文字显得比较密集,增加行高可以使段落看上去更加舒服。行高可以以像素作为单位,如(px,em),也可以以百分比作为单位,如下设置行高为基准值的1.5倍
p{ line-height:150%}
除了疏松文字在高度之间的距离的用途外,行高还可以附带的实现垂直居中文字的作用,如:
p{ height:50px; line-height:50px;}
如上所示,在块级元素中只要将行高即line-height属性值,设置为等于height即高度值即可居中块级元素内的文字,前提是改块级元素的内容只有一行,否则行高等于高度也不现实,所以应用于h1,h2等标题类元素比较多。
另一个居中文字(内联元素)的属性是 text:align?
百分比与小数点(系数)的差别
将line-height设置为150%或1.5有什么差别吗?
其实,两者的差别在于属性的继承性,使用百分比时,会首先计算父元素的line-height值,直接将这一像素值传递继承给子元素,而使用无单位的1.5时,则会直接将1.5这个系数传递继承给子元素,而后子元素再按照该系数计算自己对应的像素值。
阅读全文
0 0
- line-height属性技巧
- line-height 属性介绍
- CSS line-height 属性
- line-height属性
- CSS line-height 属性
- line-height 属性
- CSS line-height 属性
- CSS line-height height 属性 ()
- 【css-基础-属性】 line-height
- line-height 行间距属性
- 行高Line Height属性
- IE6 line-height属性失效
- css属性之line-height
- 探究CSS line-height属性
- CSS的line-height属性
- 7.3 行高:line-height属性[1]
- 7.3 行高:line-height属性[2]
- 7.3 行高:line-height属性[3]
- 学习心得
- 04-树6 Complete Binary Search Tree(30 分)
- [贪心] 51Nod1380 夹克老爷的逢三抽一
- Redis缓存服务器缓存数据
- Go 多值函数和string练手
- line-height属性技巧
- 获取网络数据工具类
- all:用途
- 详解 Tomcat 配置文件 server.xml
- count(列名)与count(*)说明
- webview 的网页显示
- DHT应用于区块链概要
- 【动态规划】[luoguP1681]最大正方形II
- 这家公有云公司如何帮助AI商业变现?