css常用属性总结:文本属性中的text-indent
2024-09-21 01:04:21
在网页中的文本格式中最重要的效果之一就是段落的首行文本缩进,尤其在新闻类页面,使用text-indent,任何元素都可以让首行以给定的长度缩进,
长度甚至可以是负数,这一属性的最常用方式就是段落的首行缩进;
p{text-align:2em;}
这条规则使任何段落的首行缩进2个字符大小。
通常,text-indent可应用于任何块级元素,但不能应用于内联元素,也不能用于替换元素,如<img />,但是,如果段落首行有一个图像,那么它将随文本一起移动。
text-indent支持负的文本缩进,如
- p{text-indent:-2em;}
这里所有的段落的首行就会向前移动2个文字大小。不过使用负的text-indent时要注意文字跑出元素外面,这样你要的效果可能反而就得不到了。
这里需要注意的是百分比的使用,百分比是指相对于父元素的值,如果设置5%的缩进值,那么此元素的首行将按其父元素的宽度的5%进行缩进。如:
- div{width:400px;}
- p{text-indent:5%;}
<div><p>这是一段文字,测试文本缩进百分比的使用</p></div>
我们可以看到首行文字缩进了20px,计算原理就是父元素400x5% = 20px,当然这里得注意p元素没有设置宽度,设置了宽度就按本身宽度的百分比来计算。
然而,text-indent中最有趣的估计是继承,它继承的是计算值,而非声明值。如
- body{width:500px;}
- div{width:400px;text-indent:10%;}
- p{width:200px;}
<div>
这是外面的文字
<p>这是里面的文字</p>
</div>
这里便可以看到两段文字的首行都缩进了50px,而不是外面的文字50px,p元素中的文字缩进40px,可见它继承的是计算值,而不是声明值。
今天的内容就这么多,写的挺粗糙的,惭愧啊。
最新文章
- Leetcode 笔记 117 - Populating Next Right Pointers in Each Node II
- Python:XXX missing X required positional argument: &#39;self&#39;
- 讲讲HashCode的作用
- 【python】传入函数
- vue model双向绑定
- js中的prototype和constructor
- nyoj71--独木舟上的旅行
- C语言基础程序设计
- 【转】纯 CSS 实现高度与宽度成比例的效果
- poj1833 排列
- Java I/O流-PipedInputStream、PipedOutputStream
- 通过 itms:services://? 在线安装ipa ,跨过app-store
- 第一章:pip 安装 tar.gz 结尾的文件 和 .whl 结尾的文件
- Springboot 系列(十)使用 Spring data jpa 访问数据库
- Scrapy:配置日志
- Learning-Python【16】:模块的导入使用
- python自动化运维笔记2 —— IP地址处理模块IPy
- mastering elasticsearch
- Python爬虫学习——获取网页
- winform npoi excel 样式设置
热门文章
- 记c#中构造函数中this的用法
- PHP中实用的模式之【门面模式】
- 最终还是迁移到github
- W: GPG error: http://dl.google.com/linux/chrome/deb stable Release: The following signatures couldn'
- Zabbix(Windows)
- nsq 安装试用
- flash exe to flv swf
- oracle之 Oracle LOB 详解
- CentOS 下tomcat安装
- Windows应用程序的VC链接器设置