css笔记 - 张鑫旭css课程笔记之 line-height 篇

一、line-height

line-height: 指两行文字基线之间的距离。

行高200px表示两行文字基线之间的距离是200px;

二、基线:baseline

字母x下边缘的位置

基线是任意线定义的根本(底线,中线,顶线,文本上边缘线,文本下边缘线等)

不同语言体系,基线位置不一样。

相同语言的不同字体,基线位置也不一样

三、行高让单行文本垂直居中

并不是真的垂直居中!!只有字体大小为0的时候,才能真正的垂直居中。

四、行内框盒子模型

1. 内容区域(content area)

围绕文字看不见的盒子,其大小跟字体大小有关。范围大概就是选中单行文本后,你选中的区域了。

2. 内联盒子(inline boxes)

  • a) 内联盒子

就像span、a、em、图片按钮等这些inline水平的标签一样,内联盒子会排成一样显示。区域大小是文字内容的范围。

  • b) 匿名内联盒子

内联盒子的一种,当纯文本没有内联标签环绕的时候,就是匿名内联盒子。

3. 行框盒子(line boxes)

文字每一行就是一个行框盒子。

每个行框盒子又是由一个一个的内联盒子组成。

4. 包含盒子(containint box)

每个包含盒子由一行一行的包含盒子组成。

就像一个block水平的元素

5. 总结:

包含盒子
行框盒子
内联盒子+内容区域

五、内联元素的高度是由行高决定的

内容区域(单行文字)高度【即字体大小】 + 行间距 = 行高;

即高度的表现准确来说不是行高,而是内容区域和行间距。

行高决定内联盒子高度。

行间距可大可小,甚至可为负值。

多行文本的高度由单行文本高度累加

六、line-height的各类属性值

1. normal 默认属性值

跟着用户的浏览器走。与元素字体关联

以上原因,不推荐使用。因为在不同人的电脑上会有不同的高度差距表现。

input框等元素默认行高是normal

2. 数值。比如1.5。

根据当前元素文字的font-size大小计算

假设当前元素文字大小设置为20px,那么当前元素或者继承的父元素的行高是1.5,则当前元素实际行高值为1.5*20 = 30px;

3. 带长度单位的数值。

比如1.5em、1.5rem、20px、20pt等

4. 百分比单位的数值。比如150%

注意:使用百分比值作为行高值,相对于设置了该line-height属性的元素的font-size大小计算。

也就是说,line-height百分比值在哪个元素身上,那么最终值就是这个元素的字体大小*这个元素的行高值。其他元素继承了这个元素的行高时,不管你的字体多大都没用。

假设当前元素文字大小设置为20px,那么当前元素或者继承的父元素的行高是150,当前元素父元素的字体大小是14,则当前元素实际行高值为150% * 14 = 自己算,结果不重要,注意理解他的计算方式。

与line-height: 1.5;的区别就是:150%计算行高值时,任何元素中,都是乘与固定的父元素文字大小值。

5. inherit 继承

ie8+以上浏览器支持。

特殊点的,input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强。尽量别用normal,因为normal也是根据不同浏览器不同元素不同字体大小实现的。非常不可控。

八、语言苍白无力,line-height数值和百分比值区别如下:

比较行高设置为1.5倍数值或150%/1.5em时的具体区别:

css笔记 - 张鑫旭css课程笔记之 line-height 篇

对于我们理论计算出来的行高值,支撑的事实如下图:

第一张图的:

css笔记 - 张鑫旭css课程笔记之 line-height 篇

第二张图的:

css笔记 - 张鑫旭css课程笔记之 line-height 篇

150%和1.5em的一致,这里只实验了150%。事实证明,直接将150%改成1.5em。原有效果也灭有变化。

九、line-height与图片的表现

1. 行高不会影响图片的实际占用高度。而改变的是与行高在同一个元素中的文字的行高(也就是文字占据的内容高度)。如果没有文字那就有一个匿名内联幽灵元素存在(比如换行就会有看不见的空格元素)

css笔记 - 张鑫旭css课程笔记之 line-height 篇

另外,图片属于内联块元素,在不做设置的情况下,其对齐方式是baseline基线对齐,也就是和文字x的下边缘对齐。

css笔记 - 张鑫旭css课程笔记之 line-height 篇

2. 消除图片底部和父元素的间距方法:

a). 图片设置display: block; //因为基线对齐的原则只适用于内联元素及内联块元素。

css笔记 - 张鑫旭css课程笔记之 line-height 篇

b). 图片设置vertical-align: bottom;

css笔记 - 张鑫旭css课程笔记之 line-height 篇

c). 父元素设置line-height: 0;

css笔记 - 张鑫旭css课程笔记之 line-height 篇

十、利用line-height实现垂直居中效果

1. 大小不固定的图片 垂直居中效果

做法:

<div class="box">
<img src="https://img3.mukewang.com/57a6f85b00013c7202090209-100-100.jpg" alt="">
</div>
/*核心代码*/
.box{
line-height: 300px;
text-align: center;
}
.box>img{
vertical-align: middle;
}

缺点描述:这种代码实现的居中效果,middle并不是绝对居中的。而是**基线往上1/2x高度的位置。

css笔记 - 张鑫旭css课程笔记之 line-height 篇

经过试验我发现,将after伪类的行高/高度设置为91px,其上边线就能和图片下边线重合了,也就是说,图片虽然看上去垂直居中了,但其实稍稍往下偏移了 4像素

所以,要想绝对的垂直居中,有了上边的核心代码设置外,还要加一个margin-top: -4px;就可以啦!

css笔记 - 张鑫旭css课程笔记之 line-height 篇

并且,这个-4值是通过我本案例中计算出来的,仅适用于本案例,body是默认字体16px的情况下。其他情况估计还要具体测量计算。但是总之margin-top:负值;这个思路是没错的了。

css笔记 - 张鑫旭css课程笔记之 line-height 篇

根本的解决方法是父元素字体大小设为0,让基线、中心线、行高线浑然一条即可。

另外,这种写法只兼容到ie8+

css笔记 - 张鑫旭css课程笔记之 line-height 篇

2. 多行文本水平垂直居中

多行文本水平垂直居中的原理跟上一页图片的实现是一样的,区别在于要把多行文本所在的容器的display水平转换成和图片一样的,也就是inline-block,以及重置外部继承的text-align和line-height属性值。

css笔记 - 张鑫旭css课程笔记之 line-height 篇

<div class="content-box">
<div class="content">
我是多行文本。多行文本水平垂直居中的原理跟上一页图片的实现是一样的,区别在于要把多行文本所在的容器的display水平转换成和图片一样的,也就是inline-block,以及重置外部继承的text-align和line-height属性值。
</div>
</div>
.content-box{
/* 核心: */
line-height: 300px;
text-align: center;
}
.content{
/* 核心: */
display: inline-block;
vertical-align: middle;
/* 覆盖:继承自父元素、用于布局的代码 */
line-height: 21px;
text-align: left;
/* 具体情况具体分析,本案例字体是16px,差距就是4像素。 */
margin-top: -4px;
}

完整代码:

css笔记 - 张鑫旭css课程笔记之 line-height 篇

css笔记 - 张鑫旭css课程笔记之 line-height 篇

总结:要想绝对的垂直居中,有了上边的核心代码设置外,还要加一个margin-top: -4px;就可以啦!不过具体情况具体分析,换个页面,字体大小不一样,对行高的影响也不一样,自然偏差也不一定是4像素,新的负数值再重新计算即可。

十一、line-height代替height,避免ie6/7下触发haslayout

即在ie6/7下,设置元素的高度属性会触发haslayout。

但是行高设置值不会触发。

元素一旦触发haslayout,子元素会冲破父元素的宽度限制,全屏100%宽度展示。父元素包裹性收到破坏。

这个我就偷懒不自己写代码了,直接截图:

css笔记 - 张鑫旭css课程笔记之 line-height 篇

其实设置了line-height后,height就不用设置了!

上一篇:【python游戏编程04--加载位图与常用的数学函数】


下一篇:迭代器和增强型for循环