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. Java parseInt()方法

    1.Java parseInt()方法 使用此方法得到的原始数据类型的一个特定的字符串. parseXxx()是一个静态方法,可以有一个参数或两个. java parseInt() 语法:   sta ...

  2. hadoop机架感知与网络拓扑分析：NetworkTopology和DNSToSwitchMapping

    hadoop网络拓扑结构在整个系统中具有很重要的作用,它会影响DataNode的启动(注册).MapTask的分配等等.了解网络拓扑对了解整个hadoop的运行会有很大帮助. 首先通过下面两个图来了解 ...

  3. ZOJ 3817Chinese Knot(The 2014 ACM-ICPC Asia Mudanjiang Regional First Round)

    思路: 将4个串每个串都反向这样得到新的四个串一共8个串,对于母串每个位置检测这个串能不能放进去,hs或者后缀数组都可以.然后dp[i][j]  (0<i<len  0<=j< ...

  4. 高性能javascript（记录一）

    脚本位置:将js脚本放置在body底部,由于脚本会阻塞页面渲染,导致明显延迟,通常表现为空白页面,用户无法游览页面的内容,也无法与页面进行交互.故因此推荐js脚本放在body底部,尽可能减少对整个页面 ...

  5. 在centos环境安装mysql

    在Linux上安装mysql数据库,我们可以去其官网上下载mysql数据库的rpm包,http://dev.mysql.com/downloads/mysql/5.6.html#downloads,大 ...

  6. asp.net webForm登录授权

    HttpCookie cookie; cookie = FormsAuthentication.GetAuthCookie(W3Account, isRemberMe); if (isRemberMe ...

  7. 一款新的PYTHON数据科学利器：yhat

    偶然看文章发现的一个新的python IDE,外表很清新,也很新颖. https://www.yhat.com/products/rodeo 看图说话,软件的布局确实很新颖,和Notebook类似,也 ...

  8. 区分PC端与移动端代码，涵盖C#、JS、JQuery、webconfig

    1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...

  9. knockout.js 简介

    Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要概念: 声明式绑定 (Declarative Bindings):使用 ...

  10. mvc 导入,导出excel

    最近主要做导入excel 在网上查询了代码 public FileResult DownLoadExcelJiZuChaXunGenRenXiaoFeiJiLu() { DataTable dt = ...