[关闭]
@EncyKe 2015-10-28T15:11:36.000000Z 字数 1388 阅读 1539

CSS:行高特辑

前端 CSS


1. 简介

定义:行高即是两行文字基线之间的距离。一行文字也有行高。

行内框盒子模型:所有内联元素的样式表现都与行内盒子模型有关!

注意:
段落p的高度并非文字撑开的,而是由行高决定的。
内联元素的高度是由行高决定的。
多行文本的高度就是单行文本高度累加。

高度表现不是line-height,而是内容区域和行间距(可为负):

content area + vertical spacing = line-height
内容区域高度 + 行间距 = 行高

其中:a. 内容区域高度只与字号以及字体有关,与行高没有任何关系;b. 在simsun字体下,内容区域高度等于文字大小值。

2. 行高属性值

1.5、150%、1.5em区别:
1.5倍重新计算 150% 1.5EM当前行高继承下面

body全局数值行高经验:

3. 图片与文字

div>img下,行高不会影响图片实际占据的高度。
只是为了实现div中隐匿文本节点与img基线对齐(内联元素、内联块状元素才有),文字的行高会产生影响使得divimg底部有一小段空白间隙。

消除底部间隙:

小图片+大文字:基本上高度受行高控制;

图片的水平垂直居中:

  1. div{
  2. text-align:center;
  3. line-height:;
  4. }
  5. div > img{
  6. vertical-align:middle;
  7. }

注意:vertical-align:middle;只能实现近似垂直居中,middle的定义是基线往上1/2x。

多行文本实现水平居中:

  1. div{
  2. text-align: center;
  3. line-height:;
  4. }
  5. div>.text{
  6. display: inline-block;
  7. line-height: normal;
  8. text-align: left;
  9. vertical-align: middle;
  10. }

注意:.text封装文本,其内行高和文本对齐需重置。

注意:设置height会导致IE 6/7浏览器下haslayout,用line-height代替height则没有这样的情况。line-heightheight相同时取其一即可。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注