标签：play msu color html gray img col 形式 图片
line-height
定义：
即行高，两行文字基线之间的距离
三问：
什么是基线？
形象可理解为字母x的下边缘
为什么是基线？
在css中基线乃各种线的基础
需要两行吗？
实例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .head{line-height:300px;background:gray;text-align: center;} /* 此时默认的font-size为浏览器的默认值，因为这个数值偏小，似乎是居中， 当拉大这个数值时，就会显示出问题，只有font-size为0时，才是真正的居中 */ .img{height: 200px;vertical-align: middle} </style> </head> <body> <div class="head"> <img src="123.jpg" class="img"> </div> </body> </html>
所有内联元素的样式表现都与行内框盒子模型有关！
行内盒子模型：
1.内容区域：内容区域的大小与font-size大小有关（表现形式为选中文字区域）
2.内联盒子：指不会让内容成块显示，而是排成一行。如果外部含inline水平的标签（span,a,em等），属于"内联盒子"
如果是光秃秃的文字，外面没有包裹标签，属于"匿名内联盒子"
3.行框盒子：每一行就是一个"行框盒子"，每个"行框盒子"又由一个一个"内联盒子"组成
4.包含盒子：此盒子由一行一行的"行框盒子"组成
内容区域高度+行间距=行高
1.内容区域高度只与字号以及字体有关，与line-height没有任何关系
2.在simsun字体下，内容区域高度等于文字大小值
标签：play msu color html gray img col 形式 图片
原文地址：https://www.cnblogs.com/BlogRegisterboby/p/9275075.html
