line-height与vertical-align

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属性。

posted @ 2018-02-24 22:08 快乐~ 阅读(249) 评论(0) 编辑收藏举报

刷新页面返回顶部