CSS之浮动元素

 <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>
浮动元素例子
巴特西

CSS之浮动元素

最新文章

热门文章
