• DIV+CSS布局(二)


    布局相关的属性

      1.position定位方式

        a.正常定位 relative

        b.根据父元素进行定位   absolute

        c.根据浏览器窗口进行定位  fixed

        d.没有定位  static

        e.继承 inherit

      2.定位

        left(左),right(右),top(上),bottom(下)离页面顶点的距离

      3.层覆盖先后顺序(优先级)z-index 层覆盖先后

      4.display 显示属性

        display:none 层不显示

        display:block  块状显示,在元素后面换行,显示下一个块元素

        display:inline 内联显示,多个块可以显示在一行内

    eg:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Div+Css布局(布局相关的属性)</title>

        <style type="text/css">

            body{

                padding: 0;

                margin: 0;

            }

            .div{

                300px;

                height: 300px;

                background-color: green;

                position: relative;

                left: 0px;

                top: 10px;

            }

            span{

                position: absolute;

                background-color: #ff6600;

                color: #fff;

                top: 10px;

                right: 0px;

            }

            .fixed{

                position: fixed;

                background-color: #ff6600;

                color: #fff;

                top: 100px;

                display: none;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <span>浏览次数:222</span>

        </div>

    <div class="fixed">

        <p>联系电话:23423423</p>

        <p>联系QQ:234324657</p>

        <p>联系地址:5676575</p>

    </div>

    <br/>

    </body>

    </html>

  • 相关阅读:
    PAT1065. A+B and C (64bit)
    PAT1064. Complete Binary Search Tree
    PAT 1063. Set Similarity
    CodeForces
    Golang在京东列表页实践总结
    asp.net 5 如何使用ioc 以及在如何获取httpcontext对象
    陨石坑之webapi 使用filter中如何结束请求流
    陨石坑之webapi使用filter
    Socket通信前必须考虑的几件事
    ZeroMQ的进阶
  • 原文地址:https://www.cnblogs.com/lzp1103/p/7908039.html
Copyright © 2020-2023  润新知