zoukankan      html  css  js  c++  java
  • css margin相关问题及应用

    一、margin常见问题

    1、IE6下双边距问题

    margin双布局可以说是IE6下经典的bug之一。产生的条件是:block元素+浮动+margin。

    2、maring重叠的问题

    css2.0规范对margin重叠有如下描述:

    ->水平边距永远不会重合

    ->垂直边距可能在特定的框之间重合

    * 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距,则在最大的正边距中减去绝对值最大的负边距。如果没有正边距,则从零中减去绝对值最大的负边距。

    margin重叠的问题并不是经常遇到,有时即使遇到了造成的影响也很小,或是通过其他一些修改就可以轻松解决这个问题了。仔细想想,既然知道会发生margin重叠,写代码的时候势必会注意的,也就不会出现这些重叠的问题了,最好的解决margin重叠的方法就是了解它,避免它。2

    每枚硬币都有正反面,其实margin重叠也是有它的用处的。当垂直方向上有多个模块时,margin重叠正好可以让上中下都有一个margin值,而且由于margin重叠,所以margin值的表现都是一样的。例如:a,b,c三个垂直方向上的模块 都有margin:10px 0;则最后的表现结果是(如果其上下没有浮动元素干扰的话):上、中上、中下、下四处有10px的间距,正好完美定位。

    二、margin负值的相关应用

    1、在流动性布局中的应用

    流动性布局又称自适应布局,也称为宽度不固定布局。比如WordPress经典的两栏式不固定布局就是使用的margin负值实现的,属于左右margin负值在流动性布局中的应用。

    2、在选项卡等边框线的处理

    下图显示的一种比较常见的选项卡样式

    类似的,如果你要用4个div实现5条1px的左右边框,就像表格一样的效果,就可以让每个div都有左右1px的边框,然后margin-right:-1px或margin-left:-1px让之间的边框重叠,这样就实现了4个标签5边框的效果。

    3、图片与文字对齐

    图片与文字默认是居底对齐的,所以当图片与文字 一起的时候往往都是不对其的。尤其图片较小的时候就更加明显了,我看到很多人使用vertical-align:middle;对齐。在firefox效果是不错,但是IE下,虽然是效果好了些,但还是不够。

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

  • 相关阅读:
    html/form表单常用属性认识
    css复杂动画(animation属性)
    css样式水平居中和垂直居中的方法
    css简单动画(transition属性)
    html/css中map和area的应用
    html/css弹性布局的几大常用属性详解
    webpack优化配置
    webpack配置详解
    使用Node.js搭建一个简单的web服务器(二):搭建一个简单的服务器
    使用Node.js搭建一个简单的web服务器(一):Node.js入门
  • 原文地址:https://www.cnblogs.com/xuqiuyu/p/5805908.html
Copyright © 2011-2022 走看看