用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的问题
突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...
随机推荐
- HDU5618 Jam's problem again
CDQ分治模板题 #include<cstdio> #include<cctype> #include<algorithm> #include<cstring ...
- Linux 嵌入式启动以及优化
转载:http://www.embeddedlinux.org.cn/html/jishuzixun/201312/19-2717.html 第一步: BootLoader -- U boot 1 ...
- 一个jdbc connection连接对应一个事务
Spring保证在methodB方法中所有的调用都获得到一个相同的连接.在调用methodB时,没有一个存在的事务,所以获得一个新的连接,开启了一个新的事务. Spring保证在methodB方法中所 ...
- DevExpress打印功能介绍 z
一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...
- 记Weblogic采用RAC方式链接数据库遇到的问题
前几天,去客户现场部署系统,WEBLOGIC连接数据库使用RAC方式连接,好几个人弄了一下午愣是没搞定,总是报SID错误 开始一致认为是防火墙的原因,后来SSH登陆应用服务器后,再TELNET数据 ...
- meta标签多种用法
<meta name=”google” content=”notranslate” /> <!-- 有时,Google在结果页面会提供一个翻译链接,但有时候你不希望出现这个链接,你可 ...
- innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- Content Provider 详解
几个概念:Cursor. Content provider . Uri .contentresolver 1. Cursor : 个人理解为数据库中的一行数据,它是每行数据的集合.它是一个类.通过它 ...
- cas 单点登录(SSO)之中的一个: jasig cas-server 安装
cas 单点登录(SSO)实验之中的一个: jasig cas-server 安装 參考文章: http://my.oschina.net/indestiny/blog/200768#comments ...
- VueJS表达式支持:逻辑控制或运算
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...