深入理解CSS行高line-height

html-css020

深入理解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标签或伪元素

、 、使用缩放因子

line-height:1.5

这个的意思是行高是字体高度的1.5倍,因此它相当于多少px,取决于字体的大小,比如说字体是20px,那么行高就是30px(也就是说行距是10px)

1.粗细 font-weight作用:设置文字是否加粗显示。属性名:font-weight(属于 font 属性的一个单一属性)

2.字体风格 font-style作用:设置文字是否斜体显示。属性名:font-style(属于 font 属性的一个单一属性)

3.行高 line-height作用:设置的是一行文字实际占有的高度,文字字号在行高中是垂直居中的。属性名:line-height,属于 font 属性的一个单一属性。

4.字体综合 font字体、字号、行高、加粗、斜体都是font综合属性的单一属性。font属性五个单一属性的值可以进行合写,属性值可以有2到多个,值之间用空格进行分隔。

5、水平对齐 text-align作用:设置文本水平方向的对齐。在盒子中,不论文本是单行还是多行,都会对应方向对齐。

6、文本修饰 text-decoration作用:设置文本整体是否有线条的修饰效果。

7、文本缩进 text-indent作用:设置段落首行是否进行缩进。