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)