zoukankan      html  css  js  c++  java
  • CSS margin属性取值

    margin表示一个元素的外边距。取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近

    但是,设置margin后,四个方向的表现形式不同

    自身发生移动:top、left

    • margin-top
    <div id="negtive_top">
    <div>margin-top: -50px;自身向上移动50px</div>
    </div>

    CSS

    #negtive_top{
        background-color: green;
        border: 2px solid red;
    }
    #negtive_top div{
        background-color: yellow;
        border: 2px solid red;
        opacity: 0.5;
        margin-top: -50px;
    }
     
    • margin-left
    <div id="negtive_left">
    <div>margin-left: -50px;自身向左移动50px</div>
    </div>

    CSS

    #negtive_left{
        background-color: green;
        border: 2px solid red;
    }
    #negtive_left div{
        background-color: yellow;
        opacity: 0.5;
        margin-left: -50px;
        border: 2px solid red;
    }

    邻近元素移动:right、bottom

    • margin-right
    <div id="negtive_right">margin-right: -50px;右边的元素向左移动50px</div>
    <div></div>

    CSS

    #negtive_right{
        background-color: green;
        border: 2px solid red;
        float: left;    
        margin-right: -50px;
    }
    #negtive_right+div{
        background-color: yellow;
        opacity: 0.5;
        border: 2px solid red;
        float: left;
    }
    • margin-bottom
    <div id="negtive_bottom">margin-bottom: -50px;下方的元素向上移动50px</div>
    <div></div>

    CSS

    #negtive_bottom{
        background-color: green;
        border: 2px solid red;    
        margin-bottom: -50px;
    }
    #negtive_bottom +div{
        background-color: yellow;
        opacity: 0.5;
        border: 2px solid red;
    }

    参考

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

  • 相关阅读:
    HTTP BIN测试
    JavaMail
    Linux内存分析
    HDU 4118 树形DP Holiday's Accommodation
    线性方程组的求解(C++)
    线性方程组的求解(C++)
    区间树(segment tree)
    区间树(segment tree)
    同余定理在算法求解中的应用
    同余定理在算法求解中的应用
  • 原文地址:https://www.cnblogs.com/coolqiyu/p/7258086.html
Copyright © 2011-2022 走看看