zoukankan      html  css  js  c++  java
  • css的float和position属性

    (1)float的简单用法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
                 200px;
                height: 50px;
                background-color: aqua;
            }
            .div2{
                 250px;
                height: 100px;
                background-color: red;
                float: left;
             } /*如果加了float,则div3会被div2覆盖,因为div2设置了向左漂浮,会接着找上一个div1的尾部进行漂浮,叫重叠样式表*/ .div3{ 300px; height: 150px; background-color: violet; } .div4{ 450px; height: 250px; background-color: blue; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> </html>

      结果如图

    如若div2和div3都设置了向左浮动,结果如图

     

    如果div3加了clear:left,则不会放在div右边了,会在下面,也就是当div2不是浮动对象了

    (2)position属性

    1、fixed表示固定位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
                 200px;
                height: 50px;
                background-color: aqua;
                position: fixed;
            }
            /*static一般情况都是默认按这种情况,所以加不加都没影响这里*/
            /*fixed表示固定位置,也是脱离了文档流,覆盖别的标签*/
            .div2{
                 250px;
                height: 100px;
                background-color: red;
    
            }
    
            .div3{
                 300px;
                height: 150px;
                background-color: violet;
    
            }
            .div4{
                 450px;
                height: 250px;
                background-color: blue;
            }
    
        </style>
    </head>
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    
    </body>
    </html>


      效果如图

     

     2、relative表示根据自己之前的位置进行调整

    如图

     

  • 相关阅读:
    assert用法,原理,改编(C++)
    使用临界段实现优化的进程间同步对象原理和实现 (转)
    去除表达式里面多余的()
    为什么C++编译器不能支持对模板的分离式编译
    python试题[转]
    从CSDN的趣味题学Python
    即时战略游戏中如何协调对象移动
    贪心算法精讲
    游戏引擎大全
    I/O 完成端口( Windows核心编程 )
  • 原文地址:https://www.cnblogs.com/xiaobeibei26/p/6529646.html
Copyright © 2011-2022 走看看