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. javascript如何用户的判断操作系统

    <script> alert(window.navigator.userAgent); if(window.navigator.userAgent.indexOf("Window ...

  2. ROS语音交互——科大讯飞语音合成TTS(二)

    之前我用过科大讯飞的语音包,为了记录一下我重新使用一下 首先注册科大讯飞账号及应用,以后每个下载的在线使用SDK都是以此账户ID登录讯飞语音服务器. 下载科大讯飞在线合成包. $ unzip Linu ...

  3. 白皮 Chapter 1

    6.29 今天主要做了一些1.5中的小结和练习,果然换语言思路也要跟着变么…各种不爽啊不爽… scanf各种忘记&,还有各种忘记return 0… average temperature su ...

  4. 嵌入式Linux的调试技术

    本节我们研究嵌入式Linux的调试技术,对于复杂的Linux驱动及HAL等程序库,需要使用各种方法对其进行调试.刚开始讲了打印内核调试信息:printk,这个函数的用法与printf函数类似,只不过p ...

  5. 如何将两个json合并成一个

    //调用方法: var targetObject = [{name:"11",age:11}]; var sourceObject = [{name:"22", ...

  6. 修改加粗cmd和powershell命令行的中文字体

    powershell 传教士 原创文章 2016-06-20 允许转载,但必须保留名字和出处,否则追究法律责任 ---[前言]--- 1 环境: win10 10586 powershell 5.0 ...

  7. JAVA 中文转GBK内码方法

    不能谷歌,百度了很久,没有直接的转换方法,参考 byte[]数组与十六进制字符串与字符串的互相转换 http://blog.163.com/roadwalker@126/blog/static/113 ...

  8. 黑马程序员——C语言基础 函数

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)函数的定义 1> 任何一个C语言程序都是由一个或者多个程序段( ...

  9. 进程间通信--pipe

    管道的两种局限性: 历史上,他们是半双工的(即数据只能够在一个方向上流动). 现在某些系统也提供全双工管道,但是为了最佳的移植性,我们决不应该预先假定系统使用此特性 他们只能够在具有公共祖先的进程间使 ...

  10. Android --AsyncTask异步任务(一)

    1.为什么要异步任务 Android单线程模式 耗时操作放在非主线程(UI线程)中执行 我们都知道Android是单线程模式,只有主线程才能对UI操作,简称UI线程.当然这样的好处是:保证UI的稳定性 ...