• CSS文本相关之垂直排列[5]


    行内元素的垂直布局跟font-sizeline-heightvertical-align有很大关系,理解它们之间的关系才能更好理解行内元素的垂直布局。

    1. 内容区(font-size)

    对于匿名文本或非替换元素,font-size的值表示内容区的高度;

    font-size: 14px;
    
    1. 行内框(line-height)

    行高(line-height)减去字体大小(font-size)的值,在平均分配给文字的上下,称之为行间距;行高表示行内框的高度;

    // 内容区高度14px,行内框高度14px,行间距4px
    font-size: 14px
    line-height: 18px;
    
    1. 行框

    最高行内框到最低行内框的区域,称之为行框,但要注意:

    • 外边距(margin)、边框(border)、内边距(padding)不影响行高;
    • 行内框由font-size控制;
    • 上外边距(margin-top)和下外边距(margin-bottom)无效
    • 边框、内边距和其他外边距有效,内容区位置
    • 当文字有多行时,paddd-left、border、margin-left应用于框的开始位置,padding-right、border-right、margin-right应用于框的结束位置;
    1. 垂直排列(vertical-align)

    垂直排列,跟行内替换元素有很大关系。

    行内替换元素,默认位于基线上,而其基线为正常流中最后一个行框的基线,如果该元素为空或overflow不为visible,则基线为margin-bottom的底边。同时,外边距、内边距和边框会影响替换元素内容区的位置;

    // 基于基线对齐(默认)
    vertical-align:baseline
    // 上标
    vertical-align:sub
    // 下标
    vertical-align:super
    // 与行框底部对齐
    vertical-align:bottom
    // 对齐父元素内容区底部
    vertical-align:text-bottom
    // 与行框顶部对齐
    vertical-align:top
    // 对齐父元素内容区顶部
    vertical-align:text-top
    // 父元素+1/2字母X的高度
    vertical-align:middle
    // 相对于基线上移或下移
    vertical-align:(+-n)px
    // 百分比相对于元素的line-height值
    vertical-align: x%
    // 继承父元素的vertical-align属性值
    vertical-align:inherit
    
  • 相关阅读:
    [Link]TCPDF组件
    MySql排名查询
    PHPUnit安装
    [Link]使用HAProxy、PHP、Redis和MySQL支撑10亿请求每周架构细节
    同比和环比的计算
    jquery fullPage
    [转]php socket编程通信
    [转]抢先Mark!微信公众平台开发进阶篇资源集锦
    不越狱安装破解软件,iResign重签名方法
    【转】搜狗开源内部项目管理平台Cynthia意欲何为
  • 原文地址:https://www.cnblogs.com/juetan/p/13137683.html
Copyright © 2020-2023  润新知