<html> <head> <meta charset="utf-8"> <title></title> <style> clear:right; </style> </head> <body> <!--浮动元素float--> <img src="./111.jpg" alt="美女2" style="float:right"/> <!-- .clear{clear:left;} 清楚浮动后,则变成块标签 --> <p>11111111<p> <p>11111111<p> <table border="1" cellspacing="0" width="40%" height="100%" align="center"> <tr> <td>测试浮动元素</td> <td>测试</td> </tr> </table> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <!--使用<div>布局页面,产生三列的效果--> <img src="./111.jpg" alt="美女2" style="float:right"/> <img src="./111.jpg" alt="美女2" style="float:right"/> <img src="./111.jpg" alt="美女2" style="float:right"/> <!-- 定位元素 将浏览器窗口看做一个坐标系统,以左上角为坐标原点 (0,0),横坐标为x轴,纵坐标为y轴。 absolute(绝对定位) 通过属性left、right、top和bottom来定位元素。 h1 { position: absolute; top: 20px; left: 60px; } 绝对定位不占据页面空间。 --> <!-- relative(相对定位) 采用相对定位的元素,其位置是相对于它在文档中的原始位置计算而来的(top,left)。 采用相对定位的元素会获得相应的空间。 即是相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。 例子: <div class="center"> <div class="content"> 美国两位总统候选人7日晚在田纳西州贝尔蒙特大学举行了第二场辩论,金融危机成为双方攻守的主打牌。 </div> </div> .center{ position: absolute; top: 50%; left: 50%; border: solid 1px green; } .content{ position: relative; top: -50px; left: -100px; width: 200px; height: 100px; border: solid 1px red; 解析: 1. 绿色边框是center元素所在的位置,其左上角处于页面的正中心。 2. 红色边框的是content元素所在的位置,其左上角相对center元素向上移动了50px,向左移动了100px,从而使其位于页面的中心。 --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)