用margin还是用padding?(3)—— 负margin实战
看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结:
当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
接下来就讲在实际开发中用到的几个比较常用的负margin实例:
1、bootstrap框架的栅格系统是一个亮点,它就用了负margin来完美的解决了container 和 row 之间的外边距问题,具体实现如下
其中,container设置了水平方向上的padding,使其内部内容不会接触到浏览器的边界,大小为15px,就是图片中粉红色的部分;特别注意里面嵌套的row有一个特殊的地方,就是左右各有-15px的margin,就是图片中的蓝色部分,这样就抵消了container的水平方向的15px的padding,千万记住要把row放到container的内部,这样才能保证正常。
2、多列等高布局——使用正padding和负margin对冲实现多列布局方法
这个方法就是,在所有列中使用正的上下padding,和负的上下margin,并在所有列外面加上一个容器,并设置overflow:hidden把溢出背景切掉。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
} #container {
margin: 0 auto;
overflow: hidden;
width: 960px;
} .column {
background: #ccc;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: -99999px;
padding-bottom: 99999px;
} #content {
background: #eee;
} #right {
float: right;
margin-right: 0;
} </style>
</head> <body> <div id="container" >
<div id="left" class="column aside" >
<p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
</div>
<div id="content" class="column section" >
<p>Main content </p>
</div>
<div id="right" class="column aside" >
<p>Sidebar</p>
</div>
</div> </body>
</html>
用margin还是用padding?(3)—— 负margin实战的更多相关文章
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 我知道你不知道的负Margin
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- 负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
- 负margin在布局中的运用(*****************************************************************)
一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- 负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...
- css布局之负margin妙用及其他实现
相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...
- 京东区块排版负margin用法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题
突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...
随机推荐
- JDK1.8中的Lambda表达式和Stream
1.lambda表达式 Java8最值得学习的特性就是Lambda表达式和Stream API,如果有python或者javascript的语言基础,对理解Lambda表达式有很大帮助,因为Java正 ...
- REBXOR
题面 Description 给定一个含N个元素的数组A,下标从1开始.请找出下面式子的最大值. (A[l1]xorA[l2+1]xor-xorA[r1])+(A[l2]xorA[l2+1]xor-x ...
- 编译lua
http://www.lua.org/ 新建一个 static library 工程,把解压得到的目录下的src子目录中的所有.h和.c文件拷贝到新工程目录下. 工程中删除自动生成的 main.c 文 ...
- Extjs grid 单元格编辑
实现grid勾选后出现编辑按钮,通过增加一个字段checked来控制 事件如下: selectionchange: function (thi, selected, eOpts) { for (var ...
- vcl.Forms等与VCL界面有关的单元不支持跨平台
vcl.Forms等与VCL界面有关的单元不支持跨平台 midaslib也不支持
- windows程序设计——飞机大战笔记(Access数据库的使用)
//////////////////2015/07/22/////////////////// /////////////////by xbw ///////////////////////// // ...
- Android相关工具下载(ADT、NDK等等)
一个非常牛掰的网站,可以下载很多Android相关的工具等 网址为: http://www.androiddevtools.cn/
- 为Redmine的项目加上起止时间
没有时间约束的项目不是好项目. 要给项目配置起止时间,须要用到自己定义属性. 我们须要管理员身份登录.才干够定义自己定义属性. 自己定义属性 看图吧,先是点击页面导航条(最上面那排菜单,有主页.我的工 ...
- 【Sprint3冲刺之前】项目可行性研究报告
TD校园手机助手软件可行性研究报告 1.引言 在信息化时代高速发展的今天,手机成了每个人的必备物品之一.随着科技的迅猛发展,人们已经不仅仅满足于用手机发短信,打电话,因此,android手机应运而生, ...
- Java中的枚举类为何不能有public构造器
声明:本博客为原创博客.未经同意.不得转载!原文链接为http://blog.csdn.net/bettarwang/article/details/27262809. 从Java 5開始有了枚举类, ...