负margin新解
第一篇
我知道你不知道的负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新解的更多相关文章
- 负margin的移位参考线
同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...
- 负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
- 负margin小记
static元素 margin-top/left负值,元素向指定方向移动, margin-bottom/right负值,元素不动,后续元素前移 float元素 左浮, ...
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
- css布局之负margin妙用及其他实现
相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...
- 京东区块排版负margin用法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题
突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...
随机推荐
- nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示,如何传递GET参数等。
ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...
- centos 安装amp 运行环境+配置虚拟地址
一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...
- MFC 遍历FTP服务器目录中文乱码问题
在编写FTP客户端的时候我用的是server u来做我的测试服务器,而server u 默认使用utf-8作为默认字符集,vs则使用unicode作为默认字符集,所以会产生乱码,将server u的默 ...
- unity3D 锁屏再开程序崩溃
在Uniyt3d 调用Android Plugin 的时候,会出现锁屏后再开,程序就崩溃的的现象,解决办法就是在 AndroidManifest.xml 加入 android:configChang ...
- HDOJ-1002 A + B Problem II (非负大整数相加)
http://acm.hdu.edu.cn/showproblem.php?pid=1002 输入的数都是正整数,比较好处理,注意进位. //非负大整数加法 # include <stdio.h ...
- POJ 1724 最短路费用限制
迪杰斯塔拉裸题 最大花费 n个点 m条有向边 起点终点 路径长度 路径花费 问:在花费限制下,最短路径的长度 #include <iostream> #include <string ...
- 甲骨文推动Java进军“物联网”
该公司希望在嵌入式设备开发项目上Java可以取代C 随着周二宣布对嵌入式的Java版本进行升级,甲骨文希望扩展该平台到新一代连接设备,又名物联网.甲骨文还希望,Java可以在一些嵌入式开发项目 ...
- Js节点属性与方法
属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以D ...
- 【MFC初学】
void CMy322Dlg::OnButton1() { UpdateData(TRUE); m_crypt=m_plaintxt; for(int i=0;i<m_plaintxt.GetL ...
- ADO.Net两种访问数据库模式
在连接模式下的数据库访问通常包括以下几个步骤: 1.通过数据库连接类(DbConnection)链接类指定到数据库服务器的数据库 2.通过数据库命令类(DbCommand)在数据库上执行SQL命令,可 ...