CSS小知识点一
1. text-indent属性 缩进文本
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进,一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
注意:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
常见用法:
一、使用负值
text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}
二、使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。在下例中,缩进值是父元素的 20%,即 100 个像素: div {width: 500px;} p {text-indent: 20%;}
三、继承
text-indent 属性可以继承

以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
2.word-spacing 字间隔
可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近。

第一行 word-spacing 属性值为30px,第二行word-spacing属性值时-0.5em.
CSS小知识点一的更多相关文章
- Html + Css 小知识点
选择器 根据选择器来对html内的内容做css修饰 样式: 找到一个元素{ 样式:值: } 找到一个元素:选择器 css都在style标签内部写 1.标签选择器: 根据标签名查找. 小丽: 2.id选 ...
- js,css小知识点记录
JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值. ...
- css小知识点
1.div如何让背景是透明的 如:<div class="ha"></div> <style> .ha{ background:transpar ...
- 关于web前端中遇到的html,css小知识点
容器溢出: 语法:overflow: visible | hidden | scroll | auto | inherit; visible:默认值,溢出内容不会被裁剪,正常显示 hidden: 溢出 ...
- css 小知识点:inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
- 图片文字css小知识点
行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top
- css 小知识点
苹果浏览默认表单 单选 多选 下拉列表 效果的去除 提交按钮-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;ap ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
随机推荐
- Hdu 5446 Unknown Treasure (2015 ACM/ICPC Asia Regional Changchun Online Lucas定理 + 中国剩余定理)
题目链接: Hdu 5446 Unknown Treasure 题目描述: 就是有n个苹果,要选出来m个,问有多少种选法?还有k个素数,p1,p2,p3,...pk,结果对lcm(p1,p2,p3.. ...
- Backbone.js入门教程第二版笔记(2)
关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发, 还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上 ...
- Problem 2238 Daxia & Wzc's problem 1627 瞬间移动
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1627 http://acm.fzu.edu.cn/problem.php ...
- 04.NopCommerce启用MiniProfiler调试
最近在调试NopCommerce的时候,常遇到一个地址不知道请求哪个路由(比如http://localhost/apparel-shoes,比如http://localhost/login)您能快速说 ...
- Git之提交项目到远程github
1.在分支dev下,默认本地工作区有项目project 2. git add project [添加项目到暂存区] 3. git commit project -m "提交项目" ...
- canvas基础绘制-绚丽倒计时
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- android AutoCompleteTextView 实现手机号格式化,附带清空历史的操作
有个小伙伴遇到了这样一个问题,就是AutoCompleteTextView实现自动填充的功能.同时要具备手机格式化的功能.下拉列表最后一行是有个清除历史的功能.可是点击“清除历史”却把文字要设置进去A ...
- 生成hprof文件,用MAT进行分析
生成hprof文件可以在DDMS选中进程点击窗口左上角的"dump hprof file"按钮来直接生成,也可以通过在程序加代码中来生成 代码2: void generateHpr ...
- EF为什么向我的数据库再次插入已有对象?(ZT)
最近做了个多对多对实体对象,结果发现每次只要增加一个子实体,就会自动添加一个父实体进去,而不管该父实体是否已经存在. 找了好久,终于找到这篇文章,照文章内容来看,应该是断开连接导致的. 原文地址:ht ...
- 摄像头调用代码 笔记本的话,本身有一个摄像头,由于用的usb摄像头,需要把笔记本的摄像头禁用后,再使用
摄像头调用代码 笔记本的话,本身有一个摄像头,由于用的usb摄像头,需要把笔记本的摄像头禁用后,再使用 <!DOCTYPE html> <html lang="en&quo ...