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. 面试复习（C++）之基数排序

    #include <iostream> using namespace std; int maxbit(int *a,int n) { ;//一位 ;//十进制 ;i<n;i++) ...

  2. JSOI2016R3 瞎BB题解

    题意请看absi大爷的blog http://absi2011.is-programmer.com/posts/200920.html http://absi2011.is-programmer.co ...

  3. webpack初学

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...

  4. Tomcat配置错误导致Quartz执行两次问题

    以下基于tomcat服务器 我们通常将域名映射到指定服务器的端口上,以通过域名直接访问服务,如http://www.abc.com域名已绑定到本机的80端口,项目名wechat,则直接访问http:/ ...

  5. Android 查缺补漏之Adapter 和 LayoutInflater

    在之前的博客我也讲过 Adapter 和 inflater,但发现讲的不够清楚,好多读者看后有疑问,今天就结合API单独讲一次. Adapter : An Adapter object acts as ...

  6. CIImage实现滤镜效果

    Core Image also provides autoadjustment methods that analyze an image for common deficiencies and re ...

  7. Python基础知识之排序法

    在Python开发中,我们会经常使用到排序法,排序的最简单的方法是用sort(list)函数,它接受一个列表并返回与有序的元素一个新的列表. 原始列表不被改变. a = [5, 1, 4, 3]    ...

  8. lightoj1348

    //Accepted 6004 KB 924 ms /* source: lightoj1348 time :2015.5.29 by :songt */ /*题解: 树链剖分 */ #include ...

  9. 静态变量static和extern外引用

    静态变量--加static关键字的变量,特点: (1)在全局数据区中分配内存,每次对其值得修改都会保留结果,直至程序结束. (2)若静态变量没显示初始化,那会被自动初始化为0,并且只能初始化一遍. 1 ...

  10. Linux下PHP的完全卸载

    如果想把PHP彻底的卸载干净,直接用yum的remove命令是不行的,而需要查看有多少rpm包,然后按照依赖顺序逐一卸载,在网上查了好多,都是通过  "rpm -qa | grep php& ...