网页中图片的常见问题：文字代替图片、图片间隔问题
在企业中，有时会遇到网速很低加载不出图片的情况，这时候不能影响顾客购物，所以我们需要一个文字代替图片的功能。
（一）文字代替图片：
想让css没有的时候文本展示出来。
方法一：首先将“淘宝网”字样写在html里。
1.首行缩进：text-indent：200px;（缩进的长度大于等于整个容器的宽），这样可以先把文字缩进到容器外面。
2.此时会发生，第一个文字出去了，但第二个文字继续换行，用强制性不换行：white-space：noerap，这时候缩进出去的文字就都在一行了。
3.将容器外的文字隐藏：overflow：hidden。
当能加载出图片时：
代码示例：
效果：
当加载不出图片时：
代码示例：
效果：
方法二：
盒子的三部分：边框、内边距、内容区
padding上可以加背景颜色和图片的，不能写内容。
1.首先将容器高度设置为0，容器会变成一条线，文字就在容器外面。
2.接下来加一个padding-top：90px，因为padding里面不能写内容，所以此时容器大了，但文字还是在外面。而padding里面是可以加图片的。
3.加overflow：hidden。
图示：
代码示例：
特殊点：
我们在元素嵌套时，有这样的规则：
1.行级元素只能嵌套行级元素
2.块级元素可以嵌套任何元素
但有个别特殊的：
1.p标签里不能套块级元素
<p>
<div></div>
</p>
是不行的：p标签里不能套块级元素。
2.a标签里不能套a标签
<a href="">
<a href=""></a>
</a>
是不行的：a标签里不能套a标签。
（二）图片间隔问题
讲解之前，先要明确几个知识点：
1.
往div里面放置背景图片：background-image:url(fy.jpj)括号里面为图片的地址。
图片的大小：background-size
默认为重复出现，使其不重复出现：background-repeat：no-reprat
设置图片位置：background-position：100px 100px
或者top center 上居中
left center 左居中
center center 居正中心
50% 50% 也是居于正中心，这与内容中不一样，内容为左顶点居于最中心。
2.
display分三种：
inline block inline-block
行级元素 块级元素 行级块元素
inline、inline-block-->文本类元素
1）当使用<span>，因他是行级元素，所以是不可以改变宽高的，但是当加上posotion：sbsolute和float：left/right时，会在内部将其display属性改变为display：inline-block。
2）当放入图片时，因为图片带有inline-block属性，所以带有文本类特点：能被文字分隔符分割。所以当你这样写时，等于给他加了很多个空格，所以在每张图片之间就都会有一部分间隔，这时只要挨着写就会解决这个问题。
这样写每张图片之间有很多空格：
挨着写消除了空格：
在一行里，文本和文本是底对齐的；图片（文本类元素）和文本也是底对齐的。
但是当一个行级元素或者块级元素里面包含文本类元素了，外面的文字就会和里面的文字底对齐。
当我们想让文字有其他的对齐方式时，可以用对齐线来调整：
调对齐线：vertical-align:10px/middle。