首页 > 代码库 > CSS之浮动元素

CSS之浮动元素

2024-08-20 16:19:44   223人阅读

 <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之浮动元素


联系
我们