CSS 1.css介绍 css指的是层叠样式表(cascading style sheets) 官方文档:https://www.w3school.com.cn/css/index.asp为什么需要c
顺晟科技
2021-08-19 11:33:51
60
line-height属性用于设置行间的距离(行高),例如文本。对于块级元素来说,它指定元素中线框的最小高度,对于未被替换的内联元素来说,line-height没有影响,如button或者其他input元素。(原文未提到,对于部分替代元素,line-height依然可以影响元素的样式布局)。
行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半,分别加到一个文本行内容的顶部和底部,可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)
1.normol---默认值,设置合理的行间距(可自动调整行间距)
2.number---设置数字,此数字会与当前的字体尺寸相乘来设置行间距(这个可实现行间距永远等比例适应字体高度)
3.length---设置固定的行间距(将行间距设置为固定尺寸,无法随字体高度变化而变化,单位可以是px,em)
4.%---基于当前字体尺寸的百分比行间距(与字体高度等比例调整行间距)
5.inhert---规定应该从父元素继承line-height属性的值。
首先,设置了line-height的行框line-box,具有的特性:
垂直居中:由定义可知,line-height是通过line-box行框来体现,line-box所包含的内容应为“文本+文本顶部+文本底部”,其中,文本顶部和文本地鼠是line-height与font-size差值得一半,所以,line-box与文本共用中基线,这也就是行高的垂直居中性。
import!
单行文字的垂直居中对齐,将line-height属性设置为所需要的行框高度,即line-height=height
多行文字的垂直居中对齐,若容器高度已知,也可直接通过设置上下padding相等就可以,但是当容器高度未知时,需要借助line-height来实现。需要将行框内的多行文本转化为内联元素,(设置display:inline-height),然后再单独设置内联元素的行间距,整个内联元素就在行框内垂直居中对齐了。
150%时会根据父元素的字体大小先计算出行高然后再让子元素继承,而1.5是根据子元素的字体大小动态计算出行高值让子元素继承
09
2022-11
09
2022-11
09
2022-11
09
2022-11
19
2022-10
19
2022-10