margin负值的作用
一、左右负margin改变自身宽度
当元素不存在width或者width:auto的时候,负margin会增加元素的宽度。
html
<div class="parent">
<div class="div1">111</div>
</div>
css
.div1{
background-color: red;
margin-right:-100px;
}
.parent{
width:300px;
background-color: yellow;
}
效果图
可以看到,div1多出了100px的宽度,正是因为加了负的margin。事实上,margin-left和margin-right都可以增加宽度。
2、上下负margin对文档流的影响
当我们给一个元素设置负边距时,比如margin-top:20px,会使这个元素向上偏移20px的距离,不同于相对定位保存原来的物理空间,他会放弃偏移之前占据的空间,这样他后面的文档流就会流过来填充这部分空间。
html
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
css
.div1,.div2,.div3{
width: 100px;
height:100px;
}
.div1{
background-color: red;
}
.div2{
background-color: yellow;
}
.div3{
background-color: green;
}
效果图
当我们在div2上加上margin-top:-50px,时,效果图如下:
margin-bottom负值不会产生位移,但是会减少自身供css读取的高度。
html
<div class="div1">111</div>
css
.div1{
width: 100px;
height:100px;
background-color: red;
margin-bottom: -50px;
}
效果图
如图所示,左侧是div的实际高度,右侧是css能读到的高度。
3. 可以使改变浮动元素的显示位置
html
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
css
.div1,.div2,.div3{
width: 100px;
height:100px;
float: left;
}
.div1{
background-color: rgba(255,0,0,0.6);
}
.div2{
background-color: rgba(255,255,0,0.6);
margin-left: -20px;
}
.div3{
background-color: rgba(0,128,0,0.6);
margin-left: -20px;
}
效果图
负的margin会改变浮动元素的显示位置,即使元素写在dom的后面,我也能让它显示在最前面。其实,圣杯布局,双飞翼布局都是利用这个原理实现的。
参考:http://www.jianshu.com/p/549aaa5fabaa
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
margin负值的作用的更多相关文章
- 几个常见的布局的多种实现方式及margin负值总结
第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...
- 微吧里的各种margin负值
直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...
- 左侧固定,右侧自适应的布局方式理解margin负值理论
一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...
- [转] margin负值的探讨
原文: margin负值-权威指南 [http://www.csswang.com/exp/cssexp/3863.html] static元素是没有设定成浮动的元素,下图说明了负margin对st ...
- 深入理解CSS中的margin负值
前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...
- margin负值的几种妙用
1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 1 ...
- 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负值会缩小下和右方的空间,使 ...
随机推荐
- html标签对应的英文原文 - 司徒正美
标签 对应英文 说明 <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> ab ...
- poj 1087 A Plug for UNIX 【最大流】
题目连接:http://poj.org/problem? id=1087 题意: n种插座 ,m个电器,f组(x,y)表示插座x能够替换插座y,问你最多能给几个电器充电. 解法:起点向插座建边,容量1 ...
- .net core控制台应用程序初识
.net core控制台应用程序与之前.net版本有所不同,编译之后不会生成.exe启动程序,而是生成.dll文件 所以在使用的时候需要敲入命令来启动控制台应用程序,命令是: start dotne ...
- 体验mssql-cli
1. 背景 安装SQL Server on Linux之后,在命令行下使用sqlcmd,你会发现代码提示,语法高亮,甚至连多行复制都不支持,相比之下,MySQL的命令行客户端还好用多了.只做简单的命令 ...
- Chef 自动化运维:Chef 的安装
安装准备 准备三台服务器,分别用作 Chef Server.Chef DK.Chef Client 的安装使用. 在三台服务器中,添加以下 hosts: vim /etc/hosts 192.168. ...
- Postgres中的物化节点之sort节点
顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下面列出了P ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
POST/GET请求--常见请求方式处理
- mybatis防止sql注入
SQL注入是一种代码注入技术,用于攻击数据驱动的应用,恶意的SQL语句被插入到执行的实体字段中(例如,为了转储数据库内容给攻击者).[摘自] SQL injection - Wikipedi ...
- Visual Studio 实用技能
1快捷键使用 1. Ctrl K F 代码对齐