参考文献
学习笔记
- 行高定义。“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。
- 垂直居中的张鑫旭说法。“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中，height实际上是不必要的”。
-
基线。基线是a,c,z,x等字母的底边线。
vertical-align属性值的实际位置 -
vertical-align各个属性值详解。
张鑫旭对于vertical-align属性值的解释
自己实测以后的到的一些收获
1.子元素和父元素的垂直位置关系。浏览器是如何渲染元素的位置？（主要是判断元素底部所处的位置）
inline元素。当元素没有任何子节点的时候，宽高皆为0。但根据chrome浏览器中的位置，应该是与基线对齐。当元素有有大小的子节点的时候，元素的底部与父元素的bottom对齐，inline元素内部的文字底部与父元素的基线对齐。
inline-box元素。当元素没有任何子节点的时候，元素只根据height值显示高度，高度不受line-height影响，根据width、margin等显示宽度。随着元素的高度增加顶部会向上涨，当碰触到父元素的上边时，开始向下涨。当元素有有大小的子节点的时候，元素顶部与父元素顶部对齐，然后开始向下涨。
- line-height只会对元素中的文字有效只要它有子节点。
<span>123</span>
span{
display：block;
line-height:900px;/*无效，但如果把display设为inline就可以了，inline-block呢？？？*/
}
inlineline如果是block元素不会有效，但inline元素都可以。
实例应用
- 最常见的就是左上角一个icon图标和一个提示信息文字，他们如何垂直居中的问题。
通常我会把logo图标用<i></i>标签来表示，用background-image属性把图片贴上去。css伪代码如下：
i {
display：none；
width : image的长；
height : image的高；
}
inline-block元素能否单纯利用line-height属性进行垂直居中呢？
垂直居中的应用实例
不理解的部分，尚待深入学习
- 如下实验仅对block元素有效，line-height单独控制高度的实验对inline-block和inline元素均无效。
css代码：
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
html代码：
<div class="test1">测试</div>
<div class="test2">测试</div>
原始代码
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css" media="screen">
div{
height:45px;
line-height:45px;
background:red;
}
i{
display:inline-block;
background:pink;
width:32px;
height:32px;
}
.test{
display:inline-block;
background:pink;
}
</style>
<div>
<i></i>
<span class="test">testtest</span>
<span><!--永远形成不了框，无论套多少层-->
<span>
<span>
<span>
<span>testtest</span>
</span>
</span>
</span>
</span>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css" media="screen">
div{
background:green;
}
span{
display：inline-block;
line-height:900px;/*无效，但如果把display设为inline就可以了，inline-block呢？？？*/
}
/*img是inline元素*//*没有这个问题*//*换成文字又是另一个情况*/
</style>
<div>
<span></span>
<!--对比-->
<!-- <span><span> </span></span>
<span><span></span></span> -->
<!--对比-->
</div>
</body>
</html>
