css世界读书笔记：
内联元素与流
块级元素负责结构，内联元素接管内容
x元素的下边缘就是我们的基线baseline
x-height就是x的高度
vertical-align：middle是x中点位置，所以那个不是严格的中间对齐
ex单位是一个x的高度
利用那个ex单位可以做不受字体和字号影响的内联元素的垂直居中对齐效果
z<i class="icon-arrow"></i>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(/images/5/arrow.png) no-repeat center;
}line-height
非替代元素的纯内联元素，其可视高度完全由line-height决定，替代元素则不行。
行距 = line-height - font-size
半行距就是行距/2，但是没有小数表达，所以，如果标注的是文字上边距，则向下取整，如果是文字下边距，向上取整。因为据大多数的文体在内容区域是都是偏下的。
单行垂直居中 也是近似
不需要设置height只用line-height就可以
.line-height{
line-height: 50px;
font-size: 12px;
margin-top: 16px;
}多行文本垂直居中
<style>
.box{
width: 280px;
line-height: 120px;
background-color: #f0f3f9;
margin: auto;
}
.content{
display: inline-block;
line-height: 20px;
margin: 0 20px;
vertical-align: middle;
}
</style>
<div class="box">
<div class="content">基于行高实现的多行文字垂直居中效果，需要vertical-align属性帮助。</div>
</div>line-height的默认值，在个浏览器默认值不一样需要重制。最好是1.5的设置。
body{
line-height: 1.5;
}
input, button {
line-height: inherit;
}内联元素line-height的最大值特性。
内联元素，自身有一个内联盒子，只用有内联盒子，就会有行框盒子，每个行框盒子前面都有一个宽度是0的具有该元素的字体和行高属性的看不见的幽灵空白节点
vertical-align
分4类：
- 线类：baseline（默认）/ top / middle/ bottom
- 文本类：text-top/text-bottom
- 上标下标类： sub/super
- 数值百分比类： 20px/2em/20%
在图文混排的页面中，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用本身的下边缘作为基线。我们可以通过数值或者百分比来调整位置。
兼容性好，支持ie67。可以精准的控制元素的垂直对齐位置。
html：
<p>请选择<i class="icon-arrow"></i></p>
<p>请选择<i class="icon-arrow valign-1"></i></p>
<p>请选择<i class="icon-arrow valign-2"></i></p>
CSS：
.icon-arrow {
display: inline-block;
width: 20px; height: 20px;
background: url(arrow.png);
}
.valign-1 {
vertical-align: middle;
}
.valign-2 {
vertical-align: -5px;
}vertical-align的作用前提
只能应用到内联元素以及display值为table-cell的元素。（display是inline，inline-block，inline-table或者tabel-cell的元素上，默认span，strong，em等内联元素，img，botton，input等替代元素，非html规范的自定义标签元素，以及td 单元格，都是支持vertical-align属性，其他的块级元素则不支持，float和position会破坏）
vartical-align属性的默认值baseline在文本之类的内联元素那里就是字符x的下边缘，对于替换元素则是替换元素的下边缘，但是，如果是inline-block元素，规则要复杂le：一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是margin底边缘，否则其基线就是元素里面最后一行内联元素的基线。
利用上面的原理20px图标实践。
<div class="box">
<h4>1. 空标签后面跟随文本</h4>
<p><i class="icon icon-delete"></i>删除</p>
<h4>2. 标签里面有“删除”文本</h4>
<p><i class="icon icon-delete">删除</i>随便什么文字</p>
<h4>3. 字号变大</h4>
<p class="large">
<i class="icon icon-delete"></i>删除
</p>
<p class="large">
<i class="icon icon-delete">删除</i>随便什么文字
</p>
</div>.icon {
display: inline-block;
width: 20px;
height: 20px;
white-space: nowrap;//不换行
letter-spacing: -1em; //
text-indent: -999em; //缩进 文字隐藏
}
.icon:before {
content: ‘\3000‘;//始终有内容，不让margin为下边距
}top与bottom属性
top就是垂直上边缘对齐
- 内联元素：元素底部和当前行框盒子的顶部对齐
- table-cell元素：元素底padding边缘和表格行的顶部对齐
middle是近似垂直居中
text-top与text-bottom
对于内联元素，如果大家遇到不太友好理解的现象，请一定要意识到，有一个“幽灵空白节点”以及无处不在的vertical-align属性。