溢出打点
我们首先来介绍几个属性构成的文字溢出打点的功能。溢出打点就是当文字超过我们所规定的范围之后，后面的全部文字就会变成“…”的形式来出现。
• 单行文字溢出打点
单行文字的溢出打点需要三个属性来配合使用。
<div>
单行文字溢出测试单行文字溢出测试单行文字溢出测试单行文字溢出测试单行文字溢出测试单行文字溢出测试单行文字溢出测试单行文字溢出测试
</div>
1. div {
2. width: 300px;
3. height: 20px;
4. background-color: red;
5. color: black;
6. }
本来的效果是这样的：
我们现在给div增加属性：
1. div {
2. width: 300px;
3. height: 20px;
4. background-color: red;
5. color: black;
6. overflow: hidden;
7. white-space: nowrap;
8. text-overflow: ellipsis;
9. }
现在的效果就变成了我们想要的溢出打点的样子：
现在介绍一下这三个属性的意思。
1.overflow:hidden;实现的是让文字溢出容器的部分隐藏起来，方便后面的打点功能。
2.white-space:nowrap;让文字不换行。文字的默认状态是换行的，当到达容器壁之后自动换到下一行
，这个属性让文字一直在一行显示，即使到了容器壁也不换行。
3.text-overflow:ellipsis;文字溢出之后，怎么处理。这里的处理方式是以点状显示。
这样三条属性配合起来使用，就可以达成单行文字溢出打点的功能了。
• 多行文字溢出打点
其实现在虽然有属性可以达到多行文字溢出打点的功能，但是兼容性十分不好，除了移动端的网页——因为移动端的浏览器一般版本都比较高——之外，pc端的网页一般都是用其他的方式来实现。像百度就是通过计算文字的宽高，然后在最后手写“…”来实现的多行文字溢出打点效果。
而如果我们想要以属性的方式来完成溢出打点的功能的话，就要用到以下的属性了：
1. white-space: normal;
2. -webkit-line-clamp: 3;
3. text-overflow: ellipsis;
4. display: -webkit-box;
5. -webkit-box-orient: vertical;
这里的-webkit-前缀的意思是兼容webkit内核的浏览器，现在还有很多浏览器不支持line-clamp这个属性，只有webkit的较高的版本勉强支持。
box-orient也是非常勉强的，因此这个功能虽然存在，但是由于兼容性的问题，很少有公司会使用。
• line-clamp属性的意思是让文字显示几行。
display: -webkit-box;是css3.0里面的一个属性，这里暂时不过多介绍，大家了解这一种打点方式即可。
背景图片属性
我们知道<img>标签可以来展示图片，但是如果我们想要在图片上面写字的话，这个标签就不好用了，这个时候就需要用到一个属性叫做background-image背景图片属性。
1. background-image: url();
url里面放本地绝对地址或者本地相对地址或者网上的链接都可以，这样我们就可以给一个元素设置背景图片了，然后元素里面正常写文字就可以。
还有一些其他的属性专门用来修饰背景图片的样式的：
• background-size属性
这个属性可以让我们设置背景图片的大小。
它的值有很多种书写方式：
1.cover覆盖
这个属性值可以让浏览器以一张图片尽可能填充满我们的容器，当图片大的时候会截掉多余的部分。
它的填充机制是：先找图片宽或者高的其中的一个，固定这一个宽或者高变成容器的宽或者高之后，让另一边等比例的放大或者缩小，当这个另一边可以填充满容器的时候，就把多余的部分裁掉，然后采用这一种方式，如果这种方式填充不满的话，如果刚才固定的宽，那么这一次就固定高度，让宽度变化。这两种方式里面一定会有一种方式是可以使用的。
2.contain包含
这个属性值是让浏览器尽可能展示出来图片的全部信息。如果还剩余很多空间的话，那么就填充相同的图片。
它的填充机制和cover是一样的，不过它固定一条边之后，是让另外一条边可以全部显示，而不是可以填充满容器。
3.设置x y 像素值
1. background-size:50px 50px;
这样会让浏览器强行把图片压缩成50*50的比例大小。
4.百分数
1. background-size: 50% 50%;
这样会让图片占容器宽高的50%——记住，子级元素的百分比相对的数值是父级里面的这个属性的值，比如父级的高度是100px，那么子级的50%就是50px。
• background-repear属性
这个属性可以设置背景图片是否可以重复显示，默认是重复的repeat。也就说默认状态下，容器空余很多的时候，就会有相同的图片来填充容器剩余空间。
而值为no-repeat的时候，不论容器剩余多少空间，都不会进行图片复制填充了
• background-size属性
这个属性可以设置背景图片开始的位置，它的值同样有很多种：
1.像素
1. background-position: 50px 50px;
这样背景图片就会从容器的x轴50px y轴50px的位置开始显示。
2.百分比
1. background-size:50% 50%;
百分比一定要把两个值都写上！
值得注意的是：百分比的基准点是图片的中心点，当时50% 50%的时候，图片刚好会在容器的正中央显示。像素的基准点是图片的左上角的点。
• 有一点比较抽象的定义需要记住：图片是用来展示图片信息的，如果这个图片不是用来展示这个图片的内容而是用来修饰一些东西，比如网站的logo，这起到类似艺术字的作用的图片，的时候，一般是用作背景图片的。
如何让背景图片出不来的时候显示文字
有的时候我们的网页会被用户禁止加载图片和css样式，如果我们没有给背景图片设置任何信息的话，那么用户就会完全不知道这个空白的地方是什么东西，所以我们要让图片加载不出来的时候能够有文字展示出来，告诉用户这里是什么东西。
我们有两种方法可以实现这种效果：
1.利用text-indent属性
我们利用首行缩进，然后配合让white-space:nowrap和overflow:hidden;让元素内部的文字在有css的时候，会被缩进到元素外面并且被隐藏起来。当css不能加载的时候，文字不会被缩进，所以可以展示出来。
这是比较传统的做法。
2.背景图片放到padding里面，高度强制为0
1. padding-top: 100px
要知道background-image是可以放到padding里面的，我们利用padding-top撑起来元素的内容区，然后元素本身的高度为0，这样当有css样式的时候，我们配合overflow:hidden一起使用，就可以让文字隐藏，没有css样式的时候，文字就会正常显示出来。
这种方式现在用的更多一些。