微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

文本属性

1. 属性简介

序号	属性	描述
1	`text-indent: 50px;`	文本缩进
2	`text-align: left\center\right;`	文本行内对齐, left:左对齐, center:居中对齐, right:右对齐
3	`line-height: 20px\50%;`	行高
4	`vertical-align: top\middle\bottom;`	文本垂直对齐, top:顶部对齐, middle:中间对齐, bottom:底部对齐
5	`word-spacing: 20px;`	单词间距
6	`text-transform: uppercase\lowercase\capitalize ;`	大小写转换,uppercase:全部字母大写, lowsercase:全部字母小写, capitalize:单词首字母大写
7	`text-decoration: overline\line-through\underline\none;`	文本修饰,overline:上划线, line-through:中划线, underline:下划线, nong:无任何划线
8	`text-shadow: 2px 3px 5px #ccc ;`	文本阴影, 第一个参数水平阴影, 第二个参数垂直阴影, 第三个参数模糊距离, 第四个参数阴影颜色
9	`white-space: nowrap;`	文本空白处理, 规定段落中的文本不进行换行
10	`overflow-wrap: normal\anywhere\break-word;`	文本溢出换行
11	`writing-mode: horizontal-tb\vertical-lr\sideways-lr\sideways-rl ;`	文本书写模式, 分横向模式和竖向模式
12	`letter-spacing: 10px;`	文本每个字体的间距

2. 文本缩进与行内对齐

缩进与行内对齐: 控制文本在一行内的位置
块级方向: 块级元素排列方向(垂直排列)
行内方向: 行内元素排列方向(水平排列)
2.1 text-indent 文本缩进
属性: text-indent
text-indent只能用在块级元素上上, 控制段落首行文本的缩进长度, 允许负值
如果想缩进行内元素首行, 只能使用margin | padding来实现
该属性常用值

序号	属性值	描述
1	`length`	绝对值, 如: `30px`, `2em`
2	`percentage`	相对父元素宽度的百分比, 如: `10%`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-indent 文本缩进</title>
    <style>
        p {
            color: #666;
            font: 16px/1.5 Helvetica;
            width: 300px;
            background-color: lavender;
            border-radius: 10px;
            padding: 20px;
            text-indent: -6em;
        }
        p img {
            width: 90px;
            height: 65px;
            margin-top: 25px;
            margin-right: 5px;
            float: left;
        }
    </style>
</head>
<body>
    <p>
        <img src="./test.jpg" alt="童趣">
        余忆童稚时，能张目对日，明察秋毫，见藐小之物必细察其纹理，故时有物外之趣。
　      夏蚊成雷，私拟作群鹤舞于空中，心之所向，则或千或百，果然鹤也；昂首观之，项为之强。又留蚊于素帐中，徐喷以烟，使之冲烟而飞鸣，作青云白鹤观，果如鹤唳云端，为之怡然称快。
　      余常于土墙凹凸处，花台小草丛杂处，蹲其身，使与台齐；定神细视，以丛草为林，以虫蚁为兽，以土砾凸者为丘，凹者为壑，神游其中，怡然自得。
　      一日，见二虫斗草间，观之，兴正浓，忽有庞然大物，拔山倒树而来，盖一癞虾蟆，舌一吐而二虫尽为所吞。余年幼，方出神，不觉呀然一惊。神定，捉虾蟆，鞭数十，驱之别院。
    </p>
</body>
</html>

2.2 `text-align` 文本行内对齐

该属性也是设置父元素上, 如: <p>
该属性用于控制父元素中每一行文本的对齐方向
常用的属性值如下

序号	属性值	描述
1	`left`	左对齐: 默认值
2	`right`	右对齐
3	`center`	居中对齐

以上属性值,都是以常见的英文书写模式定义的,即从左到右书写
实际上还有其他的书写模式, 如阿拉伯语, 希伯来语, 它们是从右往左书写
所以, css3 对以上属性值进行规范,语义化更强

序号	属性值	描述
1	`start`	对齐到起始边: 默认值
2	`end`	对齐到终止边
3	`justify`	两端对齐

两端对齐: 文本之间空白会自动调整, 确保文本每一行长度一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-align 文本行内对齐</title>
    <style>
        p {
            color: #666;
            font: 16px/1.5 Helvetica;
            width: 300px;
            background-color: lightcoral;
            border-radius: 10px;
            padding: 20px;
            text-indent: 2em;
        }
        p {
            /* 左对齐: 可以看出没变化因为默认是left */
            text-align: left; 
            /* 右对齐 */
            text-align: right;
            /* 居中对齐 */
            text-align: center;
            text-align: start;
            /* text-align: end; */
            /* 两端对齐它要保证每一行的长度是完全一样 */
            text-align: justify;
            /* 此属性仅设置文本最后一行的 left right center | start end justify */
            text-align-last: center;
        }
    </style>
</head>
<body>
    <p>
        I like reading books so much. My parents have bought me a lot of books when I was three years old. 
        They want me to be interested in reading. With my parents’s education, I am very interested in novel 
        books and I want to write novels someday. I have come up with some idea, soon I can finish one. 
    </p>
</body>
</html>

3. 块级对齐

文本在一行内, 除了水平对齐外, 还有垂直/纵向对齐, 即沿块级方向对齐
块级对齐, 必须要有布局的空间, 即高度
如果想实现文本在行内垂直方向的对齐, 必须先要掌握行高的概念

序号	术语	描述
1	文本行	垂直排列的一行或多行文本
2	内容区	文本中的每个元素(行内元素)
3	行内框	包裹内容区的元素框
4	行距	行距都是相同的,不同的是字体高度
5	行框	行框是行内框的集合

行内框 = 字体高度 + 上下行距
行框 = 由多少个行内框组成
行框高度 = 行内框中最高和最低的端决定

/* 内容框: 内容区高度 */
font-size: 14px;
/* 设置行框 */
/* 行高 */
line-height: 18px;
/* 行距 = 行高 - 字体高度 = 4px */
/* 上行距 = 下行距 = 4/2 = 2px */

3.2 `line-height`设置文本行的高度

序号	属性值	描述
1	`normal`	默认值,由浏览器自动计算, 约`font-size = 1.2`
2	绝对值	如: `px`, `em`, `rem`, 推荐`px`
3	正数	相对`font-size`的换算系数, 可以是小数, 推荐
4	百分数	依据字体大小进行计算,可能具有不确定性

line-height在继承时,子元素是依据父元素的font-size计算,要特别注意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height 块级对齐</title>
    <style>
        body {
            background-color: #ccc;
            font-size: 16px;
            line-height: 20px;
        }
        p:nth-of-type(2) {
            /* 父元素的font-size: 16px; * line-height: 1.5em; = 24 */
            /* 行高继承的时候,并不是依据父元素的line-height, 而是font-size */
            line-height: 1.5em;
        }
        p:last-of-type {
            line-height: 8px;
            /* 1的意思是 1*父级的font-size:16px; (1*16=16) */
            line-height: 2;
            background: red;
        }
    </style>
</head>
<body>
    <p>这个段落继承了body中的字体大小与行高</p>
    <p>这个段落行高是父级的1.5倍</p>
    <p>行高小于字体大小</p>
</body>
</html>

3.3 文本纵向对齐

vertical-align: 设置行内元素纵向对齐
该属性只适用于”行内元素”或”置换元素”(<img>, <input>…)

序号	适用元素	描述
1	行内元素	文本, `<span>`
2	置换元素	`img`, `<input>`…
3	单元格	`td`, `th`

提示: 该属性不能用于”块级元素”垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align 纵向对齐</title>
    <style>
        div:first-of-type {
            background-color: cyan;
        }
        div:first-of-type p {
            vertical-align: baseline;
            vertical-align: bottom;
        }
        div:nth-of-type(2) {
            background-color: wheat;
        }
        div:nth-of-type(2) img {
            vertical-align: baseline;
            /* vertical-align: middle; */
            vertical-align: bottom;
        }
        .up {
            vertical-align: 10px;
        }
        .down {
            vertical-align: -10px;
        }
        td {
            height: 100px;
            border: 1px solid;
            /* 默认是 middle */
            vertical-align: middle;
            vertical-align: top;
            vertical-align: bottom;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /* 将这个块改成表格的单元格显示 */
            display: table-cell;
            /* 垂直居中 */
            vertical-align: middle;
        }
        .box2 {
            width: 100px;
            height: 100px;
            /* 水平居中 */
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <p>I like reading books so much</p>
    </div>
    <div>
        <img src="./test.jpg" width="100" alt="">
    </div>
    <p>
        PHP中文网
        <span class="up">php.cn</span>
        PHP爱好者的选择
        <span class="down">海量资源</span>
    </p>
    <table>
        <tr>
            <td>CSS</td>
        </tr>
    </table>
    <!-- 2个div嵌套关系 -->
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

该属性常用值

序号	属性值	描述
1	`baseline`	默认值, 使元素的基线与父级元素的基线对齐
2	`sub`	使元素的基线与父级元素的下标基线对齐
3	`super`	使元素的基线与父级元素的上标基线对齐
4	`text-top`	使元素的顶部与父级元素的字体顶部对齐
5	`text-bottom`	使元素的底部与父元素的字体底部对齐
6	`长度值`	使元素的基线对齐到父级元素的基线之上的给定长度, 允许负值
7	`百分比`	使元素的基线对齐到父级元素基线之上的给定百分比(相对于`line-height`)
8	`top`	使单元格内边距的上边缘与该行顶部对齐
9	`middle`	使单元格内边距盒模型在该行内居中对齐
10	`bottom`	使单元格内边距的下边缘与该行底部对齐