饥人谷_李栋
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也可以达到同样效果
因为课上看到相关问题，所以写了来自张鑫旭的视频笔记，供以后参考
网友评论