• 布局的诡异bug合集+解决方法(更新中)


    1.元素内部子元素的margin的边界线基准点的问题

    论如何生硬起名字!!我反正已经被自己总结的题目绕晕了。。。

    “演员”介绍:

    外层父元素:蓝色边框;

    内部子元素:绿色区域;

    粉红色区域是元素内部绿色子元素的margin外边距;

    问题说明:

    就像上边这样,左边就是bug图,蓝色父元素里边的标签的border的外边距边线以父元素的padding内边线为准了。

    父元素在不设置padding的情况下,子元素的border外边界会与父元素的padding外边线重合。导致内部元素的margin会到物体的外边

    解决方案:

    以下三条任一条设给父元素

    1)Float:left

    2)display:inline-block;

    3)padding-top:npx;(n>=1即可)

    解决成果:

    内部子元素的margin的外边线是以父元素的padding的内边线为基准点的,这样整个子元素都包裹在了父元素里边,包括margin。

    2.元素内部子元素的padding撑不起其高度的问题

    如下结构:

     <div class="staff-btn">

      <a class="staff-btn-change">修改</a>

      <a class="staff-btn-del">删除</a>

    </div>

    现在谁也不设置样式(外观颜色样式忽略),只给内部a设置一个padding:10px 20px;

    其父亲div的高度依旧撑不起来,用firebug观察是这样的效果:

    也就是说子元素的padding-top / bottom对于撑起父元素的高度是没有用的,

     将父元素div的盒模型设置成内联元素inline-block / inline后,其宽度到时可以受到子元素padding-left / right的影响的。

     

    如果下边再给一行或者有其他的元素,就变成了这个鬼样子:

    给了margin也只能用一个人的,二者的margin还会叠加:

     当然,给父元素设置高度或者行高等于高度值是可以解决问题的,但是,高度怎么能确定呢?所以这个方法是不可以的。

    有时候,给li里边的a设置padding和margin等,就可以撑起li,究竟是怎么做到的呢?

    问题出在a身上,他是一个内联元素,只有内部的文字可以占据父元素的空间,自身的padding和margin虽然对自己起作用,对于父元素(尤其padding)是不太靠谱的

    所以改变他内联元素的命运就好了,但是如果设置为display:block;的话,你还得设置宽高,有时候根本就不能固定宽高的,所以pass

    那么内联元素进阶成内联块元素的方法无疑是最好的了。

    方法:

    display:inline-block;  ——缺点:需要兼容ie

    float: left;      ——缺点:需要清除浮动,有时候说不定还不需要这个技能

    -----------------------------------------------------------------------------------------------正经分割线!!!---------------------------------------------------------------------------------------------------------------------

    声明:

      请尊重博客园原创精神,转载或使用图片请注明:

      博主:xing.org1^

      出处:http://www.cnblogs.com/padding1015/

  • 相关阅读:
    数组的处理
    bootstrap 列的排序
    bootstrap 偏移
    mysql数据库创建、删除数据库
    Spring 加载配置文件的方式
    MyBatis DAO层传递参数到mapping.xml 几种方式
    Python 正则表达式
    Python 之定时器
    Python学习
    获取鼠标经过位置的X、Y坐标
  • 原文地址:https://www.cnblogs.com/padding1015/p/7365186.html
Copyright © 2020-2023  润新知