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小知识点一的更多相关文章

  1. Html + Css 小知识点

    选择器 根据选择器来对html内的内容做css修饰 样式: 找到一个元素{ 样式:值: } 找到一个元素:选择器 css都在style标签内部写 1.标签选择器: 根据标签名查找. 小丽: 2.id选 ...

  2. js,css小知识点记录

    JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值.       ...

  3. css小知识点

    1.div如何让背景是透明的 如:<div class="ha"></div> <style> .ha{ background:transpar ...

  4. 关于web前端中遇到的html,css小知识点

    容器溢出: 语法:overflow: visible | hidden | scroll | auto | inherit; visible:默认值,溢出内容不会被裁剪,正常显示 hidden: 溢出 ...

  5. css 小知识点:inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

  6. 图片文字css小知识点

    行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top  

  7. css 小知识点

    苹果浏览默认表单 单选 多选 下拉列表 效果的去除 提交按钮-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;ap ...

  8. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  9. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

随机推荐

  1. Android SDK Manager 无法下载Android8.1.0(API 27) SDK Platform

    在Android SDK Manager 中安装Android 8.1.0 SDK Platform时报错导致无法安装. 错误信息:Downloading SDK Platform Android 8 ...

  2. 二分查找 BestCoder Round #42 1002 Gunner II

    题目传送门 /* 题意:查询x的id,每次前排的树倒下 使用lower_bound ()查找高度,f[i]记录第一棵高度为x树的位置,查询后+1(因为有序) */ #include <cstdi ...

  3. iOS面试题之内存管理

    本文围绕内存管理的几种方法展开叙述. 1.内存管理是什么? 内存管理,就是对内存资源进行优化. 2.内存管理的三种方法? Objective-C的内存管理主要有三种方式ARC(自动内存计数).MRC( ...

  4. [转]IntelliJ IDEA 自定义方法注解模板

    IntelliJ IDEA 自定义方法注解模板 置顶2017年08月02日 18:04:36 阅读数:32592 最近没啥事开始正式用Eclipse 转入 idea工具阵营,毕竟有70%的开发者在使用 ...

  5. python中一些函数应用

    items将一个字典以列表的形式返回,因为字典是无序的,所以返回的列表也是无序的. 例如:a = {"a":1,"b":2}    a.items  就是 a ...

  6. canvas基础绘制-arc

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 动态栅格(DEM)图层实现服务端渲染

    PS:此处动态图层指,图层文件都放在经过注册的文件目录里,可以通过文件名动态加载图层 动态加载的矢量图层,可以实现客户端和服务端的定制渲染,但栅格一般是不能再渲染的,以下介绍可行的方法 建立一个很简单 ...

  8. JAVA之NIO按行读取大文件

    做项目过程中遇到要解析100多M的TXT文件,并入库.用之前的FileInputStream.BufferedReader显然不行了,虽然readLine这方法可以直接按行读取,但是去读一个140M左 ...

  9. zc.buildout构建项目时报错‘AttributeError: '_NamespacePath' object has no attribute 'sort'’

    在使用zc.buildout构建项目时如果碰到‘AttributeError: '_NamespacePath' object has no attribute 'sort'’报错: An inter ...

  10. linux 复制文件夹内所有文件到另一个文件夹

    cp -Rf /home/user1/* /root/temp/将 /home/user1目录下的所有东西拷到/root/temp/下而不拷贝user1目录本身.即格式为:cp -Rf 原路径/ 目的 ...