• [css] 认识margin


    原文链接http://www.zhangxinxu.com/wordpress/2009/08/css-margin%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%EF%BC%8C%E9%97%AE%E9%A2%98%E5%8F%8A%E5%BA%94%E7%94%A8/

    1、ie6下margin双边距问题

    产生问题条件:margin + folat + block

    解决问题的办法: inline 并 去掉float

    为什么能解决 :

    本身inline元素是不支持宽高及垂直paddign、margin的,但是有了float可以让inline haslayout,所以让inline元素支持宽高及垂直padding、margin。

    2、margin 重叠问题

    表现:css 2.0规范对margin重叠有如下的描述:
    1.水平边距永远不会重合。
    2.垂直边距可能在特定的框之间重合:
    * 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距,则在最大的正边距中减去绝对值最大的负边距。如果没有正边距,则从零中减去绝对值最大的负边距。
    * 在一个浮动框和其它框之间的垂直边距不重合。//这句话是不够严谨,在IE浏览器下确实如此,但是Firefox等浏览器下依旧重合。
    * “绝对定位的框”与“相对定位的框”边距不重合。//这句话有待斟酌,我在Firefox等浏览器下测试,效果貌似很糟糕的。

    解决办法

    http://www.zhangxinxu.com/study/200908/margin-overlap.html

    3、margin负值的相关应用

    图片与文字对齐问题

    图片和文字默认是底部对齐,

    解决方法一:vertical-align:middle;对齐。在火狐下效果是不错,但是IE下,虽然是效果好了些,但还是不够。

    方法二:如果,图片是个20像素*20像素左右的小图片,文字也差不多12px大,则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽,兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签,支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话,img{margin:0 3px -3px 0;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。

  • 相关阅读:
    202104-2 邻域均值
    202104-1 灰度直方图
    1384. 饲料调配
    1381. 阶乘
    264. 丑数 II
    1380. 邮票
    42 新安装的idea必备设置
    41 cmd中解除被占用的端口
    40 文件在线预览
    39 进度条使用
  • 原文地址:https://www.cnblogs.com/wxiaona/p/5748345.html
Copyright © 2020-2023  润新知