小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
问题描述：
写拜访记录，前边需要一个竖杠，发现竖杠无法对齐，设置vertical-align：bottom之后问题得到解决。
`<body>`
` ``<P>拜访记录x</P>`
`</body>`
`<style>`
` ``p {`
`font-size: 16px;`
` ``line-height: 16px;`
` ``}`
` `
` ``p:before {`
` ``content: ``''``;`
` ``width: 5px;`
` ``height: 16px;`
` ``display: inline-block;`
` ``background: red`
` ``}`
`</style>`
vertical-align
1.作用范围：
- Inline元素
- inline-block元素
- table-cell元素
- float,position:absolute元素的 display 值被忽略，强制当成 block 方式处理，因此，vertical-align 也就失去了作用
2.取值
- baseline(默认)
- top: 与行中的最高元素的顶端对齐，一般是父级元素的最顶端对齐
- bottom
- middle（近似为字母x的中间部分）
- text-top
- super
- sub
- 数值类百分比,如4px;50%（正值表示由基线往上偏移，负值表示由基线往下偏移。2、百分比则是基于 line-height 来计算的）
- inherit
- initial
- unset
3.vertical-align对齐的依据
（1）行内元素
span {`
` ``font-size: 50px;`
` ``line-height: 100px;`
` ``}`
红线是line-height,表示行高，绿线是font-size表示字体高度，蓝线是文本的基线，近似为小写字母x的下边缘位置, 内联元素（display:inline）的外边缘与其行高的顶部和底部边缘对齐，行高可以小于字体的高度。随着行高和font-size的改变，基线位置也会改变。
（2）inline-block的基线
inline-block的基线是正常流中最后一个line box的基线，但是，如果这个line box里面没有inline boxes或者其overflow属性值不是visible，那么其基线就是margin bottom的边缘。
补充inline boxes
`<div>`
` ``这里是一个div，里面包含了独立的文字，`
` ``<span>span标签</span>`
` ``<em>em标签</em>，`
` ``以及其他的一些文字。`
`</div>`
《1》 左右inline-block均有有正常流inline boxes
`<body>`
` ``<div ``class``=``"left"``>aBqxmmxxhu</div>`
` ``<div ``class``=``"right"``>cghijknbvx</div>`
`</body> `
`<style>`
` ``div {`
` ``display: inline-block;`
` ``width: 100px;`
` ``height: 100px;`
` ``border: 1px solid red;`
` ``} `
` ``.right {`
` ``margin-bottom: 50px`
`}`
都有inline-boxes，默认基线对齐
《2》左边Inline-block有正常流文字，右边盒子没有文字
`<body>`
` ``<div ``class``=``"left"``>aBqxmmxxhu</div>`
` ``<div ``class``=``"right"``></div>`
`</body>`
`<style>`
` ``div {`
` ``display: inline-block;`
` ``width: 100px;`
` ``height: 100px;`
` ``border: 1px solid red;`
` ``}`
` `
` ``.right {`
` ``margin-bottom: 50px`
` ``}`
左边inline-block盒子为正常流，盒子的基线为文字的基线
右边inline-block盒子没有内容，盒子的基线为下边缘,margin-bottom的位置
默认inline-block的对齐方式为基线对齐
==>设置对齐方式vertical-align:top
==>设置对齐方式vertical-align:bottom
第二个盒子有margin-bottom,所以这样呈现
《3》左边有非正常流文字，右边没有文字
`<body>`
` ``<div ``class``=``"left"``>aBqxmmxxhu</div>`
` ``<div ``class``=``"right"``></div>`
`</body>`
`<style>`
` ``div {`
` ``display: inline-block;`
` ``width: 100px;`
` ``height: 100px;`
` ``border: 1px solid red;`
` ``}`
` `
` ``.left {`
` ``overflow: hidden`
` ``}`
` `
` ``.right {`
` ``margin-bottom: 50px`
` ``}`
左边有文字，但是为overflow:hidden，基线为下边缘，右边没有文字，但是有margin-bottom,显示基线对齐
3.常见问题
（1）图片有间隙
`<body>`
` ``<div>`
` ``<img src=``"cat.png"``>`
` ``</div>`
`</body>`
`<style>`
` ``div {`
` ``width: 200px;`
` ``border: 1px solid red;`
` ``}`
` ``img {`
` ``width: 100px;`
` ``height: 100px;`
` ``}`
`</style>`
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，与有实体的文字节点效果类似
`<body>`
` ``<div>`
` ``<img src=``"cat.png"``>`
` ``<span>x</span>`
` ``</div>`
`</body>`
`<style>`
` ``div {`
` ``width: 200px;`
`border: 1px solid red;`
` ``font-size: 16px;`
` ``line-height: 32px`
` ``}`
` `
` ``img {`
` ``width: 100px;`
` ``height: 100px;`
` ``}`
` `
` ``span {`
` ``display: inline-block;`
` ``background: green;`
` ``}`
`</style>`
文字的inline-block的高度是line-height的高度
默认图片与父元素的基线（也就是字母x的下边缘线对齐）
解决思路：
- 破坏vertical-align作用条件：图片display:block
- 破坏baseline对齐方式：vertical-align:top/bottom/middle
- 修改line-height的值 line-height:5px/0px(在外部盒子里设置)
（2）垂直居中不完全
`<body>`
` ``<div>`
` ``<img src=``"cat.png"``>`
` ``<span>xxxxx</span>`
` ``</div>`
`</body>`
`<style>`
` ``div {`
` ``width: 200px;`
` ``height: 200px;`
` ``border: 1px solid red;`
` ``}`
` `
` ``img {`
` ``width: 100px;`
` ``height: 100px;`
`vertical-align: middle;`
` ``}`
` `
` ``span {`
` ``display: inline-block;`
` ``background: green;`
` ``}`
`</style>`
垂直居中：middle设置之后，表示中线对齐，此时对齐的是父元素基线往上1/2x的距离，近似为x的中间位置，此时设置line-height:200px,对应基线位置偏移，也就能近似垂直居中
