Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

本文转载自查看原文 2017-08-10 20:21 4514 CSS（样式）

1、div层的浮动

1）div向左浮动、向右浮动

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>

    <style type="text/css">        
        #div{
            width:400px;
            height:300px;
            border:1px solid #888484;
        }
        .div1{
            width:150px;
            height:150px;
            background-color:red;
            float:left;        /*向左浮动:对父类div为对象*/
        }
        .div2{
            width:150px;
            height:150px;
            background-color:yellow;
            float:right;  /*向右浮动：:对父类div为对象*/                
        }
        
    </style>
    <body>
         <div id="div">
            <div class="div1">
                 向左浮动测试                  
            </div>
            <div class="div2">
                     向右浮动测试               
            </div>
        </div>
    </body>
</html>

2）浮动后效果

2、div的相对定位和绝对定位

1）div的绝对定位、相对定位

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>

    <style type="text/css">        
        #div{
            width:400px;
            height:300px;
            border:1px solid #888484;
        }
        .div1{
            width:150px;
            height:150px;
            background-color:red;
            float:left;        /*向左浮动:对父类div为对象*/
        }
        .div2{
            width:150px;
            height:150px;
            background-color:yellow;
            float:right;  /*向右浮动：:对父类div为对象*/                
        }
        #span1{
            width:100px;
            height:80px;
            background-color:blue;
            position:absolute;    /**绝对定位**/
            margin-top:25px;    /**对于屏幕边进行定位**/
            margin-left:30px;
        }
        #span2{
            width:100px;
            height:80px;
            background-color:red;
            position:relative;    /**相对定位**/    
            margin-top:25px;   /**对于第一层div进行定位**/
            margin-left:40px;
        }

    </style>
    <body>
         <div id="div">
            <div class="div1">
                 向左浮动测试 
                 <div id="span1">绝对定位测试</div>                 
            </div>
            <div class="div2">
                     向右浮动测试
                  <div id="span2">相对定位测试</div>               
            </div>
        </div>
    </body>
</html>

2）定位后的效果：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css 浮动相对定位绝对定位区别 CSS中的浮动和定位 CSS浮动与绝对定位小记 css 浮动和定位谈谈前端中的浮动，绝对定位，相对定位解析什么是绝对定位，相对定位与浮动 CSS小随笔（三）浮动与定位浮动与定位浮动与定位 CSS 浮动(float)与定位(position)