line-height的认知
来源:互联网 发布:洗衣机选购 知乎 编辑:程序博客网 时间:2024/05/22 01:57
line-height的认知
之前对line-height的认知 大概就是 文字都贴在一起不好看,所以用line-height。没有对它有过研究,前几天遇到个 按钮中文字居中问题。也让我顺便学学 line-height。
- line-height是什么
- 属性有什么
- 属性值为数值和其它的差别
- line-height代替height
line-height是什么
它是 行间距离 也就是行高。
说到行高我们简单说下 baseline这个概念。图中显而易见,浅蓝色的基线。文本行的基线之间距离就是行高 line-height啦。
原文图片参考
行间距当然就是下面的概念:
line-height属性
line-height属性 如下表:
属性值为数值和其它的差别
设置 line-height:180%,和line-height:1.8 设置对于 class为word-wrap 这个div来说 行间距是 用font-size 24px 乘以 180% 或1.8 都没错。但问题会出现的是 行间距是继承的属性,对于p标签来说,它爸爸给它带来的影响就不同了。
数值的属性继承 有个缩放因子的概念。
p标签继承过来 继承的是缩放因子 1.8,而不是 计算后的数值 24*1.8,当然 设置180%,p标签继承过来的就是计算好的 line-height数值。
line-height代替height
html代码:
<div class="test1">测试</div><div class="test2">测试</div>
css代码:
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
另外,line-height还有居中属性。
阅读全文
0 0
- line-height的认知
- html的line-height
- line-height 的作用
- li的height 和 line-height 对比
- 关于height 和line-height的关系
- line-height和height的区别
- height和line-height的区别
- 关于line-height height的对比
- line-height:150%, line-height:1.5的区别
- line-height:150% 和 line-height:1.5的区别
- line-height:2;与line-height:2em的区别
- line-height:1.5和line-height:150%的区别
- CSS的line-height属性
- 对于line-height的理解
- line-height的继承问题
- line-height
- line-height
- line-height
- 想学H5的用哪些软件好
- 【DL--22】实现神经网络算法NeuralNetwork以及手写数字识别
- Android福利来了,很快Android手机能吃上「奥利奥」了
- 009
- set define off 在数据库脚本中的作用
- line-height的认知
- String、StringBuffer与StringBuilder之间区别
- zookeep单机模式安装及启动
- hdu 4858 图的模拟+vector 简单题
- 完数
- mysql 关于 不可重复读与幻读的解决方案
- ios百度地图定位实现
- linux中一些常用的命令总结
- exports 和 module.exports 的区别