• 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
    
  • 相关阅读:
    XML和HTML中常用转义字符:
    特殊符号大全
    CSS规范
    兼容ie6,ie7,ie8,firefox,chrome浏览器的代码片段
    模拟select选择器
    一行代码解决IE6/7/8/9/10兼容问题
    响应式页面之秘籍
    Global 全局样式基本设置
    webAPP meta 标签大全
    随笔小计 --
  • 原文地址:https://www.cnblogs.com/juetan/p/13137683.html
Copyright © 2020-2023  润新知