zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    redis分布式锁原理
    设置linux源
    linux 设置固定ip 并且解决ping www.baidu.com不通问题
    java内存模型
    Messenger和MVVM中的View Services
    MVVMLight
    MVVMLight
    MvvmLight
    MVVM 事件转命令1
    Mvvm简介
  • 原文地址:https://www.cnblogs.com/lzp1103/p/7908039.html
Copyright © 2011-2022 走看看