静态页面制作:8HTML浮动腾挪概念(铺垫二:图文混排)

　　　　现在那我们来说说第二个铺垫。

 

 

　　　　第二个铺垫叫做图文混排。什么是图文混排呢，这个东西我们还需要花些时间来分析一下的。首先看下图：

 

 

　　　　其实上图就是一个例子，然而这个例子其实在我们浏览网页，或者看一些微博、博客等文章时，我们发现这种格式很常见。

 

　　　　这种有内容、有图片并且又在一个区域中，这种情况我们就叫做图文混排。

 

 

　　　　既然说到图文混排，现在文字我们已经接触过了，但是图片该怎么弄还没说。

　　　　

　　　　我们现在就说说这个图片怎么弄？如果说你想让浏览器中有图片的话，

 

　　　　那你就需要加一个<img>，其实全拼就是image，图片的意思。img是一个单标签，它是行内元素，

 

　　　　如果只写单标签其实是没有实际含义的。因为浏览器根本不知道你要显示那张图片。

 

　　　　所以我们需要为img添加一个src这么一个属性，src其实就是source的缩写，指的是源头。

 

　　　　通过这个属性就可以指定图片源在哪里。

 

　　　　这里我们可以通过<img src=“图片名称”>这种引用，就可以把图片放到浏览器里了，

 

　　　　那么关于图片的相关知识，我们就说到这，后面我们在详细说。

 

 

　　　　我们在p标签中写一段文字，就达到了上图的一个效果。由于p标签是一个块元素，所以是不会和图片在一行的，

 

　　　　那更别提混合在一起了。根据我们现在所学的内容，我们想要达到混合在一块的效果，那就是给p标签添加样式。

 

 

　　　　当我们给p标签添加样式之后，会按照基线排列文字，基线也就是图片的底端的部分，

 

　　　　所以文字在书写的时候，会从底端开始排列文字。并不会从图片的顶端开始书写。

 

　　　　那我们可能会想到在方法一种我们使用了一个叫做vertical-aling:top的。

　　　　

　　　　由于图片他本身是一个行内元素，所以无论如何他也只能和一行文字摆在一起，

 

　　　　你想跟多行在一块显示，那不可能，如果那样图片就不是行内元素了，行内元素只能在一行显示，

 

　　　　那么其他的文字就得从图片底端下面进行展示，这样的效果并不是我们想要的。

 

　　　　我们需要一个真正的图文混排，图片不能局限于某一行，但我们又需要遵循block和inline的原则。

 

　　　　那么我们就需要开辟新战场！

 

　　　　那么开辟什么心战场又是我们需要解决的一个问题，我们需要通过三维的角度去观察，其实我们刚刚所看到的效果都知识三维中的一层。

 

　　　　但是三维中的一层，并不能满足我们的要求，那我们需要像个办法，

 

　　　　什么办法呢，就是让这张图片在文字的基础上浮动起来，我们来看看效果。

 

 

　　　　让图片不在受一层行的局限，让图片飘起来。浮动起来之后，我们发现，一层就留下了空挡。

 

 

　　　　我们使用深红色来标识出来，流出空挡的这部分，那么有了空挡之后会发生什么事情呢，这里会发生两件事情。

　　　　

　　　　第一件事是：块元素会填充空挡。

 

　　　　第二件事是：行内元素会绕着浮动元素的边框走。

　　　　

　　　　我们对这两件事进行解释。首先我们说块元素填充空挡。那会达到一个什么样的效果呢？

 

 

　　　　发现此时背景绿色的p标签填充到图片留下来的空挡中了。那么第二件事就是行内元素环绕浮动元素边框。

　　　　

　　　　这个好像有点不太好理解，我们在来解释一下。大家可能会想，此时的图片已经飘起来了，

 

　　　　那么p标签只需要占满整行就好了，那有什么行内元素环绕浮动元素边框啊。我们现在来回想一下之前说的铺垫一。

 

　　　　p标签是块元素，但是文字是行元素。所以我们说的行内元素环绕浮动元素，意思就是图片中的文字会绕开图片的区域。

 

　　　　就变成了这个样子。

 

 

　　　　其实这样的效果就是我们想要的了，这里我们写的文字比较少。如果多写几行就会环绕图片进行排列。例如这样！

 

　　　　从平面的角度看，这个就是我们需要的图文混排了。在这里我们整理一下我们这节课所涉及到的知识点。

 

　　　　这节内容我们主要涉及到两个方面：

　　　　

　　　　1.我们说文字是行内元素。所以在标签中的内容，通属于文字类型。那么标签与文字实际上是嵌套关系。

 

　　　　2.我们了解了图文混排，由于图片是行内元素，当图片和文字混在一起的时候，只有图片的最顶端有文字，

 

　　　　当然这里我们使用了vertical-align：top; 如果我们想要达到行内文字元素环绕浮动元素，就需要将图片漂浮起来，

 

　　　　腾出来的空挡由行内元素填充，就可以达到真正意义上的图文混排。

 

　　　　以上就是我们这节主要涉及的内容，下一节我们将浮动腾挪应用于代码中。