CSS权威指南(六)文字属性

news2024/12/23 18:38:43

1.缩进和行内对齐

(1)缩进文本(text-indent

   text-indent属性把元素的第一行文本缩进指定的长度,缩进的长度可以可以是负值。这个属性通常用于缩进段落的第一行。text-indent作用于块级元素之上,缩进将沿着行内方向展开。text-indent属性的值可以是任意长度单位,包括百分数。百分数取值相对于父元素宽度。

ps.text-indent属性会继承

(2)文本对齐(text-align

   控制元素中各文本的对齐方式。作用于块级元素。text-align不控制元素的对齐方式,只影响元素中的内容。

(3)对齐最后一行(text-align-last

   控制块级元素最后一行的对齐方式

2.块级对齐

(1)行高(line-height

   line-height属性指行的基线之间的距离,与字号无关,决定着元素所在方框的高度是增是减。line-height并不会增加或减少行之间的纵向空间,它实际上控制的是行距,即line-height的值与字体高度之差。

image-20230107210805102

*ps.*line-height从父元素继承时,是根据父元素的font-size值计算的。

(2)纵向对齐文本(vertical-alig

  • baseline:强制元素的基线与父元素的基线对齐。如果目标元素没有基线,元素的底端与父元素的基线对齐。
  • sub:把元素放在下标上,即元素的基线低于父元素的基线。
  • super:与sub相反。
  • bottom:底端对齐,把元素所在行内框的底线与杭框的底边对齐。
  • text-bottom:相对行中文本的底边对齐。
  • top:与bottom相反。
  • text-top:与text-bottom相反。
  • middle:中线对齐,通常用在图像上,把行内元素所在方框的中线与父元素基线向上偏移0.5ex处的线对齐。

3.单词间距和字符间距

(1)单词间距(word-spacing

   用于设置单词间距。

(2)字符间距(letter-spacing

   用于修改字符或字母之间的距离。

4.文本转换

(1)text-transform

   用于转换文本的大小写。

5.文本装饰

(1)text-decoration

   可以为文本添加下划线、删除线、上划线和文本闪烁。

6.文本渲染

(1)text-rendering

   一个SVG属性,让创作人员指定用户代理在显示文本时应该优先考虑什么方面。

7.文本阴影

(1)text-shadow

   设置文本阴影

8.处理空白

(1)white-space

   影响浏览器对待单词之间及文本行之间空白的方式。

(2)tab-size

   设置制表符的宽度。

9.换行和断字

(1)hyphens

   可以在连字符的位置断字。

(2)word-break

   控制文本软换行的方式。

(3)line-break

   同样设置文本的软换行方式。

(4)overflow-wrap

   可以在单词之间换行。

10.书写模式

(1)writing-mode

   设置文章的书写模式,比如中文通常是从左往右,有些语言的书写模式是从右往左。

(2)text-orientation

   改变文本方向。

(3)direction

   设置文本的书写方向。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/147381.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

config:配置中心

Spring Cloud Config 为分布式系统中的外部配置提供服务器端和客户端支持。使用 Config Server,您可以集中管理所有环境中应用程序的外部配置。 Spring Cloud Config就是一个配置中心,所有的服务都可以从配置中心取出配置,而配置中心又可以从…

mmap(内存映射)、sendfile() 与零拷贝技术

内存映射(Memory-mapped I/O)是将磁盘文件的数据映射到内存,用户通过修改内存就能修改磁盘文件。 RocketMQ为什么快?kafka为什么快?什么是mmap?这些问题都逃不过一个点,就是零拷贝。 虽然还有其…

电脑不能开机的几个常见原因

现在手机已经将电脑取代了,用电脑的越来越少,因为一些原因上网课的多了起来,大家都将放置几年的电脑搬了出来,开不开机的大有人在,由于机器闲置很久大多都出现了各种各样的故障和问题,在这里总结了电脑台式…

C语言:浮点型存储方式

浮点型存储方式 任意一个二进制浮点数V可以表示成下面的形式 (-1)^S *M *2^E 1(S符号位) 8(E阶码) 23(M尾码)省略首位1 S:表示正负 只有0/1两个值 M:由浮点数转化成二进制数表示 在…

4.7、IPv4 数据报的首部格式

固定部分:每个 IP 数据报首部都必须包含的内容 某些 IP 数据报的首部除了包含 202020 字节的固定部分外,还包含一些可选的字段来增加 IP 数据报的功能 IP 数据报的首部常以 323232 个比特为单位进行描述 图中的每一行都由 323232 个比特(也…

小波分析——4.使用小波对信号成分进行分析

文章目录首先创建一个包含多频率成分的信号然后我们用数学实现一个墨西哥草帽小波然后我们开始对原始信号进行处理吧接下来可以把信号成分进行绘制在前面的章节里已经介绍过小波的理论、公式等知识点,现在我们来看看如何用小波来实现对复杂信号的成分分析。 在我们…

性能优化系列之『HTML5 离线化:主流的技术实现方案有哪些?』

文章の目录一、离线包类型二、离线包架构三、离线包下载四、离线包运行模式五、大厂离线包方案写在最后一、离线包类型 全局离线包:包含公共的资源,可供多个应用共同使用私有离线包:只可以被某个应用单独使用 二、离线包架构 三、离线包下载…

Fairness in Recommendation: A Survey 阅读笔记

论文链接 搁置了许久的毕设,又要开始重新启航。 2022年的最后一段时间过得真是很崎岖,2023希望大家平安喜乐。 课设还未结束,但是毕设不能再拖,开工啦!这又是一篇综述,有关推荐系统中的公平性,…

5.Isaac教程--创建Isaac应用

创建Isaac应用 本教程将指导您完成使用 Isaac SDK 创建机器人应用程序的过程,以视频输入的 OpenCV 边缘检测处理为例。 文章目录创建Isaac应用预安装显示相机源创建应用程序文件启用节点间通信配置组件创建 Bazel 构建文件运行应用程序查看相机源处理相机源添加边缘…

1.6日报

以redis为基础完成 addCacheData getCacheDataByUniqueId delCacheDataByUniqueId 并且测试通过。 升级getQRcodeAndScene接口,添加版本参数,实现“不同环境取不同小程序版本“功能 并添加扫码跳转页面功能。 遇到的问题及解决 加深对RequestBody…

性能优化系列之『HTTP-2 :升级HTTP-2的好处有哪些?如何升级?』

文章の目录一、HTTP/2 概念二、HTTP/2 优点三、HTTP/2 站点的优势四、在 Nginx 上启用 HTTP/21、升级 OpenSSL2、重新编译3、验证 HTTP/24、浏览器请求截图写在最后一、HTTP/2 概念 HTTP/2(超文本传输协议第2版,最初命名为 HTTP 2.0)&#x…

【Spring AOP】@Aspect结合案例详解(一): @Pointcut使用@annotation + 五种通知Advice注解

文章目录前言AOP与Spring AOPAspect简单案例快速入门一、Pointcutannotation二、五种通知Advice1. Before前置通知2. After后置通知3. AfterRunning返回通知4. AfterThrowing异常通知5. Around环绕通知总结前言 在微服务流行的当下,在使用SpringCloud/Springboot框…

分布式基础篇3——前端开发基础知识

前端技术对比一、ES61、简介2、什么是 JavaScript3、ES6新特性3.1 let3.2 const3.3 解构表达式3.4 字符串扩展3.5 函数优化3.6 对象优化3.7 map 和 reduce3.8 Promise3.9 模块化二、Vue1、MVVM 思想2、Vue 简介3、Vue 入门案例4、Vue 指令插值表达式v-text、v-htmlv-bindv-mode…

景区地图最短路径快速实现

1 前言以前粗略学习了一下在地图中实现最短路径,并在切图工具中实现了自动处理生成导航相关数据。https://blog.csdn.net/bq_cui/article/details/86795213最近发现工具实现的结果,错误一大堆。这次再详细捋一捋整个步骤,感兴趣的同学可以试一…

ctemplate 的安装和使用

ctemplate 用于linux下的web开发,可以动态生成一个html网页,这里的 “ 动态 ” 指的是网页的数据不是固定的,可以使用变量来填充网页内容。 目录 1、下载ctemplate 2、安装 ctemplate 3、使用ctemplate库 1、下载ctemplate 可以在gite…

前端对接微信公众号网页开发流程,授权对接

前面讲到 前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接。 一、引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性&#xff0…

如何在windows上使用VMware安装macOS虚拟机

如何在windows上使用VMware安装macOS虚拟机一、准备工作1.1 安装 VMware1.2 下载macOS的安装包1.3 下载VMware虚拟机解锁安装苹果系统工具二、解锁VMware支持macOS安装2.1 关闭已经打开的VMware软件2.2 安装VMware Workstation Unlocker三、VMware创建虚拟机3.1 解压缩macOS的安…

【蓝桥杯】X 进制减法

难点一&#xff1a;base base * s[i] % mod;//***当前位乘以x&#xff0c;x要*s[i],一直要乘到个位的进制难点二&#xff1a;当当前该位的的进制位&#xff0c;为max(max(a[i]1, b[i]1), 2)的时候&#xff0c;结果最小ACcode:#include<iostream>using namespace std;con…

性能优化系列之『混合式开发: React Native内核及优势介绍』

文章の目录一、React Native愿景二、技术优势1、技术2、效率3、发版三、底层内核1、RN&#xff1a;helloWorld.jsx2、iOS&#xff1a;helloWorld.m3、Android&#xff1a;helloWorld.xml4、Web&#xff1a;helloWorld.html四、行业背景五、选型建议写在最后一、React Native愿景…

【计算机体系结构基础】指令流水线

单周期处理器 简要描述单周期处理器的执行过程&#xff1a; PC从指令存储器中读取指令 取指后译码得出相关的控制信号读取regfile&#xff08;寄存器堆&#xff09; 运算器对regfile中取出的操作数进行计算&#xff0c;将计算的结果写回通用寄存器堆或者得到访存指令的地址或…