初探Margin负值(转)
相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料:
- 它是一个有效的属性,至少w3c中明确描述如下:”Negative values for margin properties are allowed…”;
- margin负值并非hack,正因为不熟悉所以有时候会避而远之,甚至误解;
- margin负值遵循文档流;假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移。
- 良好兼容,甚至是ie6也能支持。
- 配合浮动精彩不断;
- DW的视图模式下看不到它的英姿。
原理
margin负值提供两种模式:
- 当给一个元素设置margin 负值(top/left),该元素将在该方向上产生位移。例如:
/* 元素向上位移10px */
.demo {margin-top:-10px;} - 当给一个元素设置margin负值(bottom/right),这个元素并不会像你所预想的产生位移,而是将任何紧随其后的元素“拉”过来,覆盖在自己的上边。例如:
/* 所有紧随元素demo之后的元素向上位移10px */
.demo {margin-bottom:-10px;}
如果元素没有设置宽度,那么给该元素设置margin负值(left/right)将会在两个方向增大其宽度,看起来就好像给该元素添加了padding。
精彩实例
三栏显示(无需浮动及额外标签);
列表过长时,我们一般都会考虑通过浮动来使之显示为多列,其实换个思路也可以实现。
叠加效果;
最常见的选项卡,当前项选中状态;
两列流式布局;
固定宽度的布局so easy,配合浮动轻松搞定两列自适应布局,三列同理。
去除多余的外边距;
图文混排,每行最后一个元素的margin值如何处理?单独设置类名消0?通过父层来裁切?使用margin负值吧!
去除多余的分割线;
第一个项的分割线如何处理?加类消除?使用margin负值吧!
弹出层垂直水平居中;
经典事例,无需多言!
三栏等高;
经典事例,无需多言!
一像素圆角按钮
也许你会说滑动门即可,但不妨看看margin负值如何实现吧!
杀出重围;
分割线 + 模拟padding
- …
Bugfixes
咳咳,据说还有一些Bug,还是看看吧!
- 链接会变得不可点击;
- 文本不太容易选中;
- 图片将被裁切
- 失去焦点时,通过tab切换链接消失。
解决方案:给元素添加相对定位position:relative;
即可。
margin负值-权威指南:http://blog.163.com/zhengqi_sheng/blog/static/21432319120135494122645/
margin负值的应用:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
初探Margin负值(转)的更多相关文章
- 深入理解CSS中的margin负值
前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...
- 几个常见的布局的多种实现方式及margin负值总结
第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...
- margin负值的几种妙用
1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 1 ...
- 微吧里的各种margin负值
直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...
- margin负值 – 一个秘密武器
CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...
- margin负值的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 理解margin负值
效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...
- margin负值的相关应用
1.页面上实现css sprite背景定位效果 其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就 ...
- 双飞翼布局的改造 box-sizing和margin负值的应用
box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...
随机推荐
- 使用spine骨骼动画制作的libgdx游戏
(官网:www.libgdx.cn) Super Spineboy是一个使用Spine和libgdx开发的跨平台游戏(Windows,Mac,Linux),Spine是一个2D游戏动画工具.Super ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十七)
因为现在游戏内容原来越多了,里面需要存储的数据也多了起来,所以一个较好的办法是将所有的比赛数据存到同一个地方便于存取. 我们需要新建一个游戏数据类,该类贯穿所有需要的场景,存放一切比赛需要的数据.从这 ...
- C语言的引用计数与对象树
引用计数与对象树 cheungmine 2013-12-28 0 引言 我们经常在C语言中,用指针指向一个对象(Object)的结构,也称为句柄(Handle),利用不透明指针的技术把结构数据封装成对 ...
- 传输控制协议(TCP) -- 连接建立及终止过程
TCP简介 相对于不可靠.无连接的用户数据报协议(User Datagram Protocol, UDP),传输控制协议(Transmission Control Protocol, TCP)是可靠的 ...
- infiniDB在linux下完成倒库
在网看到自己的文章被四处烂用,经常搜到自己的文章.关键是,你能把我头像删除了不,有本事,你 把网址也给出http://blog.csdn.net/longshenlmj/article/details ...
- ERP-非财务人员的财务培训教(四)------公司/部门的成本与费用控制
一.损益表.资产负责表 二.成本分类 ----成本习性 三.成本核算模式 四.成本控制原则 第四部分 公司/部门的成本与费用控制 一.损益表.资产负责表 项目 Items 产品销售收入 Sal ...
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
- UTL_DBWS - Consuming Web Services in Oracle 10g Onward
from:http://oracle-base.com/articles/10g/utl_dbws-10g.php In a previous article I presented a method ...
- C语言可变参实现参数累加返回
C语言可变参的作用真的是非常大,自从发表了可变参如何实现printf,fprintf,sprintf的文章以来,便有不少博友私信问我实现的机制,我也解释了相关的知识点.今天,我们借着这个机会,再来举一 ...
- 【Django】 gunicorn部署纪要
使用Gunicorn 来部署Django应用, 没有一步一步写怎么操作,简单记录下重要的点,方面以后查阅. 主要的方式还是Nginx反向代理到Gunicorn, Gunicorn wsgi来启动Dja ...