1：定位+margin负值实现元素水平垂直居中

　

div{

    position: absolute;

    z-index: 1;

    left: 50%;

    margin-left: -50px;

    width: 100px;

    height: 100px;

}

2: margin-top: -1px解决border多一像素的问题

3，圣杯布局（两边固定，中间自适应）

　

margin负值的几种妙用的更多相关文章

  1. margin负值5种应用

    最近做的项目中经常会用到margin的负值,这里就总结一下关于margin负值的5种使用及相关bug的解决. 1. 在流动性布局中的应用 如WordPress的两栏式不固定布局就是使用margin负值 ...

  2. 初探Margin负值(转)

    相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negativ ...

  3. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  4. margin负值 – 一个秘密武器

    CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

  5. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  6. 微吧里的各种margin负值

    直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...

  7. margin负值的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  9. margin负值的相关应用

    1.页面上实现css sprite背景定位效果   其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就 ...

随机推荐

  1. 【Python扩展阅读【转】】字符串的方法及注释

      capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写   center(width)   将字符串居中,并使用空格填充至长度wi ...

  2. oracle 递归应用（挺复杂的）

    最近做数据过滤觉得很有必要记录下整个过程,说不定下次就不知道了. 废话不多说开始: 表结构: 企业表(自关联,采用树的形式记录分子公司) 区域表(自关联,采用树的形式记录省/市/县/乡,数据量大) 公 ...

  3. 如何导出FlashFXP的站点配置文件

    打开FlashFXP安装文件的目录,找到Sites.dat文件,将其复制出来,放到你新的FlashFXP安装的目录即可

  4. wordpress及其simple_press插件完成 的中文论坛

    wordpress 及 其simple_press插件的论坛功能 开发准备: 一直从事java及as3方面的开发,首次听同事提起PHP的wordpress,于是上网查了下, 才知道这款软件的强大,转而 ...

  5. [SCOI2007] 修车

    属于我的费用流版本终于诞生了!想来还有点小激动呢…看了下模板,之后完全按照自己的想象来写,这样在考场上也不怕啦~ 某人说其实费用流就是把Dinic里的BFS换成SPFA,似乎还是比较有道理的,就是ad ...

  6. jdbc escape

    假如有这样1个查询请求,模糊查询标题中包含a%b_cc’d的记录,正确的sql应该是下面这样的:      select * from t_sch_work_info t where  t.title ...

  7. 百度前端技术学院2015JavaScript基础部分-BOM

    5.1 任务描述 实现以下函数 // 判断是否为IE浏览器,返回-1或者版本号 function isIE() { // your implement } // 设置cookie function s ...

  8. 文本过滤工具之AWK

    一.AWK简介 AWK三大文本处理工具之一,是一个非常强大的文本处理工具.它不仅是 Linux 中也是任何环境中现有的功能最强大的数据处理引擎之一.这种编程及数据操作语言(其名称来自于它的创始人 Al ...

  9. Jacoco入门

    Jacoco介绍 转自:wangmuming 的博客 Jacoco是一个开源的覆盖率工具.Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件,也可以使用JavaA ...

  10. ldap + kerberos + google authentication 实现两步验证

    第一步:ldap + kerberos 整合  ,参考之前的文章 第二步:google authentication 安装配置,参考之前的文章 第三步:整合 ldap + kerberos + goo ...