【用margin还是用padding？（3）—— 负margin实战】的更多相关文章

用margin还是用padding？（3）—— 负margin实战

看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left是负值时会引起元素的向上或向左位置移动.而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线. 接下来就讲在实际开发中用到的几个比较常用的负margin实例: 1.bootstrap框架的栅格系统是一个亮点,它就用了负margin来完美的解决了container 和…

[转]关于负margin在页面中布局的应用

本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况,本来不是要用负值,但突然发现负值也能达到我要的效果,随后百度了一下,才发现了大牛的好文章,转载至此,算是学习一个经验,进行记录,同样也给分享给没看到的同学. 以下是正文 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的…

我知道你不知道的负Margin

现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现. 负margin理论: 在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章<不要告诉我你懂margin>,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获. 为了形象.易懂的解释负margin,我们将引入W3C…

负值之美：负margin在页面布局中的应用

本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的负值主要指的是负margin. 关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 本文不讲原理,主要展示几个应用. 一.左右列固定,中间列自适应布局 此例适用于左…

负margin的原理以及应用

负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述负margin 产生或者作用的原因. margin负值之所以可以修改元素在文档流中的位置,也可以改变元素的宽度,主要因为一个公式: BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + C…

负margin在布局中的运用（*****************************************************************）

一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定,中间栏宽度自适应</title> <style> body{ margin: 0; padding: 0; min-width:600px; color: #fff; font-weight:…

负margin一些奇葩的布局技巧

copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> *{ margin:0; padding:0; } .demo…

css布局之负margin妙用及其他实现

相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度 <style type="text/css"> *{ margin: 0; padding: 0;}img{ vertical-align: middle;} ul>li{ float: left;} ul&…

京东区块排版负margin用法

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东区块排版负margin用法</title> <style> *{margin:0;padding:0} .wrap{ margin-top: 10px; overflow: hidden; clear: both; width: 990px;…

关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的<我知道你不知道的负Margin>. 其中提到了margin的"参考线"这一概念及解释了负margin元素参考谁移动: 参考线就是 margin移动的基准点,此基准点相对于box(自身)是静止的.而margin的数值,就是box相对于参考线的位移量. 在margin属性中一共有两类参考…