一、图文混排与题图文字布局1.图文混排一张图片和一段文本段落：img标签在前，p标签在后，两者都是块级元素，它们是彼此分开的两个部分；实现图文混排：<img src="1.jpg" alt="picture" align="right">align属性：定义了图像与文本的相互排列方式，将其设置为right时，使得图片右对齐，与文字混排；但是align属性在html5中已经不推荐使用，最好的方式是用css实现图文混排；去除img的align属性，为img属性添加样式：img{float:right;margin:30px;}为图片设置设置了右浮动，一旦设置了浮动，img这个块级元素就被从整个文档中抽取出来，根据浮动的方向重新定位；因此img原有的位置空了出来，被下方的段落所取代，两者从上下排列变成了“排排坐”；最终实现图文混排效果；可以为img设置margin值，使得文字与图片之间保持一定的距离；如果再加一张图片，代码如下：<img src="1.jpg" alt="picture1"><img src="2.jpg" alt="picture2">样式中为所有img元素设置左浮动，因此两个图片都左浮动，并且两个图片紧挨形成从左到右的并排关系；2.实现题图文字布局（代码如下）：<div class="sec"> <img src="../images/penguin.png" alt="picture1"> <p>With no change in the rule, the more you grow the more envious you become, the other courtiers like Rama Raja Bhushana were against the growth of Ramalinga’s association with the King Rayalu. Whenever there is a possibility, those courtiers, and Rama Raja Bhushana had been working out for damaging Ramalinga’s image and sling mud on him before the King.</p></div>给div设置样式：.sec{background:#eee;padding:90px 50px 30px;/*内边距：顶部为90px，左右两侧为50px，底部30px,*/margin-top:150px;position:relative;border-top:10px solide #399;}设置div的内边距，一方面使文本内容与边界保持一定的距离，另一方面使得顶部的内边距较大，以便留出一定空间来容纳悬浮图片；设置顶部的外边距为悬浮图片预留上方的空间；设置div为相对定位，为下一步悬浮图片的绝对定位做准备；最后设置顶部边框修饰；设置img的样式：img{margin-top:-220px;}使用带有负值的margin-top属性来使得图片向上推出，可以理解为在整个文档流中，上方突然腾出了220像素的空间，在这种情况下，图片向上移动230像素，紧跟着的段落也将向上移动相应距离来填充这个空间；此处220像素算法：图片本身为250像素，我们希望他向上移动到边框位于其垂直中线的位置，由于边框为10px，则图片加边框总高度的一般为130px,加上顶部内边距的90px，则总共将向上移动220px;最终效果：
