第一篇

我知道你不知道的负Margin

分类: Html/CSS | 转载请注明: 出自 海玉的博客 
本文地址: http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/

核心内容:

为了形象、易懂的解释负margin,我们将引入W3C上没有的参考线的说法。何谓参考线?参考线就是 margin移动的基准点,此基准点相对于box(自身)是静止的。而margin的数值,就是box相对于参考线的位移量。

一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。top和left是以外元素为参考,right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形,如果是负值则位移方向相反。

根据上文的参考线原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素为参考,所谓外元素就是本元素的边界元素(再白话点的解释就是元素的紧邻元素,这里涉及到containing block知识,可自行网上搜索)。example元素上边和左边的边界元素即为wrap父元素,wrap父元素为基准点,example的margin-top为-10px,想象下如果这里margin-top为+10px会什么情况,没错如果为+10px,example元素相对于wrap父元素边缘为基准,那么example元素会同wrap父元素10px产生间隙边距,那么反过来,margin-tip:-10px;还是与wrap父元素边缘为基准,反过来向上推10px的距离位置。example元素的margin-left为40px,这里就按照正常逻辑相隔40px边距,同理如果为-40px,那么就是反方向向左推进40px的距离位置。

由浅入深漫谈margin属性

http://www.planabc.net/2007/03/18/css_attribute_margin/

负margin新解的更多相关文章

  1. 负margin的移位参考线

    同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...

  2. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  3. 负margin小记

    static元素  margin-top/left负值,元素向指定方向移动,               margin-bottom/right负值,元素不动,后续元素前移 float元素   左浮, ...

  4. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  5. 负margin一些奇葩的布局技巧

    copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...

  6. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

  7. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  8. 京东区块排版负margin用法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

随机推荐

  1. Lind.DDD.RedisClient~对StackExchange.Redis调用者的封装及多路复用技术

    回到目录 两雄争霸 使用StackExchange.Redis的原因是因为它开源,免费,而对于商业化的ServiceStack.Redis,它将一步步被前者取代,开源将是一种趋势,商业化也值得被我们尊 ...

  2. EF optimize the perfermance

          参考 Three steps for fast entityframework 6.1 code-first startup performance Managing DbContext ...

  3. 线程的创建pthread_create.c

    #include <stdio.h> #include <pthread.h> #include <stdlib.h> #include <errno.h&g ...

  4. git强制覆盖本地文件

    git fetch --all git reset --hard origin/master

  5. WordPress Design Approval System插件‘step’参数跨站脚本漏洞

    漏洞名称: WordPress Design Approval System插件‘step’参数跨站脚本漏洞 CNNVD编号: CNNVD-201309-084 发布时间: 2013-09-11 更新 ...

  6. C# 通过hessian调Java注意事项

    照理说C#可以通过标准的web服务可以轻松地调用Java,但是鉴于hessian的高性能及开发效率,个人认为C#通过hessian调用java是很值得提倡的.之前完成的一个比较大型的企业应用项目就是采 ...

  7. jdbc_odbc SQLserver 驱动安装及测试

    有2次被问到同一个问题,尽管博客园是.net的园子,我还是分享下吧.PS:我现在做的.net,以前学过点java.献丑了. ------------------ 原始邮件 -------------- ...

  8. Java的结构之美【2】——销毁对象

    先来看一段代码: import java.util.Arrays; import java.util.EmptyStackException; /** * 2014年6月28日09:31:59 * @ ...

  9. axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...

  10. Maven-12: 插件解析机制

    1. 插件仓库 2. 插件的默认groupId 3. 解析插件版本 4. 解析插件前缀