zoukankan      html  css  js  c++  java
  • css整理-03 文本

    缩进和水平对齐

    缩进文本:text-indent

    • 可以设置为负值
    • 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素;

    水平对齐: text-align

    • left,center,right,justify
    • 只应用到块级元素

    垂直对齐

    行高: line-height

    • 指的是文本行基线之间的距离,而不是字体的大小;它确定了将各个元素框的高度增加或减少多少
    • line-height值和字体大小只差就是行间距

    文本行

    • 文本行中的每一个元素都会生成一个内容区,这由字体的大小确定;
    • 这个内容区会生成一个行内框(line-height),行间距会影响行内框高度
    • 行间距可以是负的,行间距+内容区=行内框

    垂直对齐文本: vertical-align

    • 值: baseline, sub, super, bottom, text-bottom, middle, top, text-top
    • 只应用于行内元素和替换元素; 不影响块级元素中的内容对齐,不过可以影响表单元素中元素的垂直对齐
    • 基线对齐: baseline: 子元素的基线和父元素的基线对齐;
    • 上标和下标:sub,super,相对于基线,并没有明确的定义;距离取决于用户代理
    • 底端对齐: bottom,将元素行内框的底端与行框的底端对齐;text-bottom: 指的事行内文本的底端;
    • 顶端对齐: top, text-top
    • 居中对齐: middle, 往往应用于图像
    • 百分数:会把元素的基线相对于父元素的基线升高或降低
    • 长度对齐: 同上,不过是具体的高度

    字间隔和字母间隔

    字间隔: word-spacing

    字母间隔:letter-spacing

    间隔和对齐

    • 如果一个文本设置两端对齐且没有设置letter-spacing或设置为normal,则字母和字的距离会调整
    • 如果设置了letter-spacing则不会受text-align影响

    文本转换, text-transform

    • uppercase, lowercase, capitalize

    文本装饰, text-decoration

    • underline,overline,line-through, blink,none
    • 不被继承,但仍可能会有‘穿过’的现象

    文本阴影

    • text-shadow: color offset-x offset-y [blur-radius]
    • color可以放在最前或最后
    • 可以重复

    处理空白符: white-space

    • nowrap: 不允许自动换行,除非使用了br元素
    • pre: 保留空格和换行,不允许自动换行
    • pre-wrap: 保留额外的空格和换行,不允许自动换行
    • pre-line: 保留换行,不保留额外空白,允许自动换行

    文本方向: direction

    • 值:ltr,rtl
    • 影响块级元素中文本的书写方向,表中列布局的方向,内容水平填充其元素框的方向以及两端对齐元素中最后一行的位置
    • 对于行内元素,只有unicode-bidi属性设置为embedbidi-override时才会应用direction属性;
  • 相关阅读:
    hadoop分布式搭建
    朴素贝叶斯算法
    python数组并集交集补集
    VMware Workstation下安装Linux
    决策树ID3算法
    微信小程序开发测试
    筛法求素数质数
    STL——heap结构及算法
    STL——序列式容器
    使用位图字体工具BMFont从图片生成自定义字体
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4497078.html
Copyright © 2011-2022 走看看