深入理解CSS行高line-height

html-css012

深入理解CSS行高line-height,第1张

基线并不是汉字的下端沿,而是英文字母"x"的下端沿

对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。

img元素会影响行高

证明撑开div高度的是line-height而不是font-size

内联盒子/匿名内联盒子inline-boxes

行框盒子line-boxes  每一行就是一个“行框盒子”,每“行框盒子”由一个个“内联盒子组成”

包含盒子containing-box,由一行行的“行框盒子”组成

内容区域content-area,一种围绕文字看不见的盒子,大小与font-size大小有关

1.行高的垂直居中性

、、在单行或多行或图片垂直居中实现上的应用

单行文字的垂直居中对齐: line-height值设置为height一样大小的值可以实现单行文字的垂直居中;height值可以省略

多行文字的垂直居中对齐 : 要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。

、 、图片的垂直居中

类似上面处理的方法,借助 i标签或伪元素

、 、使用缩放因子

min-height就是你的层的最小高度,如果该层中的元素内容高度小于这个高度,就将层显示为min-height的值,超过的话,就撑破层,使层的高度与元素内容高度一样。

max-height就是和这个相反了,不超出的话,层高度就和层中内容元素高度一样,否则就截断内容,显示max-height的高度。

line-height是行高,就是针对文本的,即一行文字的行高,是以该标签中文字大小font-size做比较的,例如line-height=200%;就是让行高是文字大小的两倍。

看我的例子

<p class='text'>爱微网欢迎您!打造最好的PHP学习PHP技术网页前端网页特效交流学习网</p>

那么我要想让这些字上下居中那么可以用宽度和行高控制

.text{

      height:25px

      line-height:25px

}

什么是行高?

行高不是每行直接的间距

行高指的是文本行的基线间的距离。

就是每行文字下边与下一行文字的下基线之间距离

希望对你有启发 不懂可以HI我