zoukankan      html  css  js  c++  java
  • 详解CSS中的margin负值

    前言: 

     margin作为一个在平常工作中高频出现的属性,其合并规则和负值的使用却总是让人头大,本文就margin的负值和重叠进行梳理,如有错误,欢迎指正(反正我是菜鸡,手动滑稽)

    1.display对margin的影响

      当元素的display属性不同时,margin在元素上的表现形式也不同

      【1】display:block   四个方向的margin均有效

      【2】display:inline  上下方向的margin无效

      【3】display:inline-block

        由于vertical-align属性的默认值为baseline(该元素相对于所在行的基线垂直对齐),因此在视觉上display:inline-block无效,设置vertical-align为其他值时,会有效果。

    2.重叠

      margin负值的重叠也和display属性有关

      【1】两个block元素重叠时,后面的元素可以覆盖前面元素的背景,但是无法覆盖其内容

      【2】当两个元素都是inline或inline-block的元素时,后面的元素会覆盖前面元素的背景和内容

      【3】当inline(inline-block)元素与block元素重叠时,inline(inline-block)元素的背景会覆盖block的背景,但是元素内容会以后面的元素为准。

    3.浮动

      【1】当block元素与浮动元素重叠时,其边框和背景在浮动元素下显示,内容在浮动元素之上显示

      【2】当inline或inline-block元素和浮动元素重叠时,其边框、背景和内容都在浮动元素之上显示

    4.定位

      【1】定位元素(position不为默认值)会覆盖其他元素的背景和内容

      【2】将relative应用于inline元素上时,由于无法改变其行内元素本质,上下margin仍存在问题

      

  • 相关阅读:
    go 接收发送文件
    【0031】反转整数/判断回文
    【003】链表或字符串的【反转】【左旋转】
    【002】链表或字符串模拟加法/加一/乘法
    【01】数组中只出现一次的数字
    【面试题050】树中两个结点的最低公共祖先
    【面试题049】把字符串转换成整数
    【面试题048】不能继承的类
    【面试题047】不用加减乘除做加法
    【面试题046】求1+2+...+n
  • 原文地址:https://www.cnblogs.com/controlms/p/7760906.html
Copyright © 2011-2022 走看看