zoukankan      html  css  js  c++  java
  • CSS 文本样式

      文本样式主要涉及多个字符的排版效果。

    一、定义文本水平对齐

      text-align 属性来定义文本的水平对齐方式。

      语法:

    text-align: left | right | center | justify
    •   left 表示默认值,左对齐;
    •        right 表示右对齐;
    •        center 表示居中对齐;
    •        justify 表示两端对齐;

     Tips: CSS3 新增了4个属性:start | end | match-parent | justify-all ,由于浏览器支持不是很好,暂不介绍,可以去 W3C 官网上进行了解和学习。

    二、定义文本垂直对齐

      使用 vertical-align 属性设置或检索对象内容的垂直对其方式。

      语法:

    vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
    
    •   auto:根据 layout-flow 属性的值对齐对象内容;
    •      baseline:表示默认值,表示将支持 valign 特性的对象内容与基线对齐;
    •      sub:表示垂直对齐文本的下标;
    •      super:表示垂直对齐文本的上标;
    •      top:表示将支持 valign 特性的对象的内容对象顶端对齐;
    •      text-top:表示将支持 valign 特性的对象的文本与对象顶端对齐;
    •      middle:表示将支持 valign 特性的对象的内容对象中部对齐;
    •      bottom:表示将支持 valign 特性的对象的内容对象底端对齐;
    •      text-bottom:表示将支持 valign 特性的对象的文本与对象顶端对齐;
    •      length:表示由浮点数和单位标识符组成的长度值或者百分数,可为负数,定义由基线算起的偏移量;

      vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐

      

        1、图片、表单和文字对齐

          可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

        2、去除图片底侧空白缝隙

          图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。

         解决方法a:(推荐使用)

          给 img vertical-align:middle | top 等等。 让图片不要和基线对齐。

         解决方法b:

          给 img 添加 display:block; 转换为块级元素就不会存在问题了。

    三、定义行高

      行高也称为行距,是段落文本行与行之间的距离。使用 line-height 属性定义行高。

      语法:

    line-height: normal | length
    
    •   normal:表示默认值,一般为 1.2em;
    •       length:表示百分比数字,也可以为单位标识符组成的长度值;常用的属性值单位有三种,分别为像素px,相对值em和百分比%,使用最多的是像素px;

    四、定义字距和词距

      1、字距

        使用 letter-spacing 属性定义字距,所谓字间距就是字符与字符之间的空白,取值为长度值,由浮点数字和单位标识符组成,默认为 normal,表示默认间隔。

        语法:

    letter-spacing: 2em;

      2、词距 (对中文无效)

        word-spacing 属性用于定义英文单词之间的间距,对中文字符无效。和 letter-spacing 一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。

        word-spacing 和 letter-spacing 均可对英文进行设置。不同的是 letter-spacing 定义的为字母之间的间距,而 word-spacing 定义的为英文单词之间的间距。

        语法:

    word-spacing:2em;

    五、定义缩进

      text-indent 属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,, 建议使用em作为设置单位。

      允许使用负值,使用复制,代表悬垂缩进。

      1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度。

      Demo:

    text-indent: 2em;
    

      

     

  • 相关阅读:
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    flowable 获取当前任务流程图片的输入流
    最新 接口api插件 Swagger3 更新配置详解
    springboot 集成 activiti 流程引擎
    java 在线考试系统源码 springboot 在线教育 视频直播功能 支持手机端
    阿里 Nacos 注册中心 配置启动说明
    springboot 集成外部tomcat war包部署方式
    java 监听 redis 过期事件
    springcloudalibaba 组件版本关系
    java WebSocket 即时通讯配置使用说明
  • 原文地址:https://www.cnblogs.com/niujifei/p/11107963.html
Copyright © 2011-2022 走看看