CSS之⾏⾼(line-height)详解
⾏⾼(line-height)
1.浏览器中默认⽂字⼤⼩为16px;
2.浏览器中默认⽂字⾏⾼为18px;
⾏⾼=⽂字⼤⼩+上下间距
1.通过设置⽂字的⾏⾼,改变的就是⽂字的上下间距。
2.如果不设置⾏⾼,⽂字的⼤⼩可以影响⾏⾼值
3.⽂字的字体也可以影响⾏⾼值。
作⽤:
1.通过设置⾏⾼,改变⽂字之间的间距,使外观更美观。
2.可以通过设置⽂字⾏⾼,实现⽂字在容器中垂直居中(只要将⾏⾼值设置等于容器的⾼度记即可[实际⾼度])⾏⾼实际上是俩条基线之间的距离等同于⽂字⼤⼩+上下间距
⾏⾼单位问题(最后都会转换为px)
px | em | % | 不写单位
如果单独给⼀个标签设置⽂字⾏⾼
px:
该标签中的⽂字⾏⾼与⽂字⼤⼩⽆关,⾏⾼设置为多少,那么⽂字的实际⾏⾼就是多少。
em:
⽂字⾏⾼=⽂字的⼤⼩设置的⾏⾼值。
不带单位:
⽂字⾏⾼=⽂字的⼤⼩设置的⾏⾼值。
%:
⽂字⾏⾼=⽂字的⼤⼩*设置的⾏⾼值。
如果给⽗元素设置⾏⾼,⼦元素中的⾏⾼如何表现
⽗元素的⾏⾼em:
⼦元素的⾏⾼=⽗元素⽂字⼤⼩⽗元素设置的⾏⾼(与⼦元素的⽂字⽆关)先计算后继承
⽗元素的⾏⾼px:
⼦元素的⾏⾼=⽗元素的⾏⾼(与⽂字⼤⼩⽆关,继承性)
css设置文字垂直居中⽗元素的⾏⾼%:
⼦元素的⾏⾼=⽗元素⽂字⼤⼩⽗元素设置的⾏⾼(与⼦元素的⽂字⽆关)先计算后继承
⽗元素不带单位:
⼦元素的⾏⾼=⼦元素⽂字的⼤⼩*⽗元素设置的⾏⾼值(先继承后计算)
⾃⼰可以通过浏览器查看相关属性值
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论