CSS中行间距问题示例探讨
2013-11-20 16:34
351 查看
高度给定的元素, 其内部单行文本垂直居中的一种实现方式为: 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值。
今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现两行文本的间距, 并非等于line-height的值.
浏览器计算和分配行间距的方法
间距 ="line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)
逻辑上如此无懈可击~ o.0
小知识点(济宁网站建设认为, 应该这样)
"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于,line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距。若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题。
看下边的例子
今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现两行文本的间距, 并非等于line-height的值.
浏览器计算和分配行间距的方法
间距 ="line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)
逻辑上如此无懈可击~ o.0
小知识点(济宁网站建设认为, 应该这样)
"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于,line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距。若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题。
看下边的例子
<!doctype html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ font-size:30px; font-family:Consolas,Microsoft Yahei,SimSun; margin:10px 10px 0px 10px; padding:10px; } #demo_1{ background:#EEE; border:solid 1px #CCC; line-height:12px; } #demo_2{ background:#333; border:solid 1px #000; line-height:2;color:#FFF; } </style> <title>Line-heighg demo</title> </head> <body> <div id="demo_1"> line-height:24px; line-height:24px; </div> <div id="demo_2"> line-height:2; line-height:2; </div> </body> </html>
相关文章推荐
- js关于字符长度限制的问题示例探讨
- CSS的执行顺序和优先级问题示例探讨
- 关于多个Ajax请求执行返回先后的问题示例探讨
- 火狐和谷歌兼容性问题示例探讨
- javascript函数中参数传递问题示例探讨
- js拼接html注意问题示例探讨
- 关于多个Ajax请求执行返回先后的问题示例探讨
- 使用Curl进行抓取远程内容时url中文编码问题示例探讨
- 关于jQuery判断元素是否存在的问题示例探讨
- js中符号转意问题示例探讨
- css 高度自适应的问题示例探讨
- html5在移动端的屏幕适应问题示例探讨
- 关于jQuery判断元素是否存在的问题示例探讨
- 关于jQuery判断元素是否存在的问题示例探讨
- IE7中绝对定位元素之间的遮盖问题示例探讨
- 关于多个Ajax请求执行返回先后的问题示例探讨
- javascript函数中参数传递问题示例探讨
- js拼接html注意问题示例探讨
- window.open()详解及浏览器兼容性问题示例探讨
- 使用Curl进行抓取远程内容时url中文编码问题示例探讨