line-height笔记

饥人谷_李栋

---

1.基线
2.行内框盒子模型
3.行内框盒子模型的应用
4.line-height属性
5.行高的应用

---

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

一、基线

英文四线格

英语本第三条红线，或字母x的下边缘
使用不同字体，基线位置不同
//微软雅黑就正好
//arial、宋体 (simsun)偏上

行高可以使单行文本垂直居中
//看上去居中了
//只有字体大小为0的时候才绝对垂直居中 ，字体越大，文字越偏下

二、行内框盒子模型

<p>这是一行文字<em>你好<em>再见</p>

1. 内容区域 content area
//围绕文字 与字号、字体相关
//可以理解为选中文字后的蓝色背景
//宋体下 内容区域=fontsize

2. 内联盒子 inline boxes
//从名字就可以看出什么意思
//内联盒子：被inline标签包裹；匿名内联盒子：只有文字

3. 行框盒子line boxes
//每一行
//包含内联盒子

4. 包含盒子containing box
//由行框盒子组成

三、行内框盒子模型的应用

• 内联元素的高度是由line-height决定的
  //line-height= 内容区域+行间距

• 内联元素内包含多个不同行高的元素
  高度不等于最大的行高

• 行半间距
  //行间距/2
  //可负值---文字重叠的时候

四、 line-height属性

• normal
• 数字 //数字*fontsize
• 长度值//em px
• 百分比//百分比*fontsize
• 继承
  //input的行高默认是normal设置成inherit可控性更好
  //数字的话 所有元素都会重新计算行高
  //百分比和em 父容器重新计算 其结果所有元素共用

五、行高的应用

• body里面的行高设置
  blog类重阅读的至少1.5、1.6
  正常网页匹配20px line-height=20/14=1.42857 无限接近20
  但是， chrome向下取值=19px 所以我们要取1.4286

• 行高与图片

<p><img src=...></p>

我们会发现 图片与p底部有一段间隙
//行高不会影响图片实际占据的高度

这是因为inline元素默认是基线对齐的 vertical-align=baseline
改变行高之后图片的位置也变了
是vertical-align和行高共同影响的结果
那为什么没文字也有空隙类

• 隐匿文本节点
  //故名思意

• 怎么消除间隙
  块状化 display：block
  底线对齐 vertical：bottom
  行高够小 line-height：0；

• 图片水平垂直居中

外层容器设置行高text-align：center 图片vertical-align：middle//近似做到垂直居中//ie8以下不兼容

• 如果图片小文字大的话

可以调 行高进行设置//非ie6 图片由vertical-align设置

• 多行文字水平居中

除了上面的设置外 需要改变他的基线对齐方式（垂直）+行高继承+文本对齐（水平）//兼容问题

• 避免 ie6、ie7下height的haslayout

//冲破父容器的自适应束缚（inline-block、float） 把父容器撑满

可以用行高代替height

• ps:不要再css里面设置{height：20px;line-height:20px;}
  //因为你不设height也可以达到同样效果

---

因为课上看到相关问题，所以写了来自张鑫旭的视频笔记，供以后参考