【负margin在布局中的运用】的更多相关文章

负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在布局中的运用

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

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

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

负margin的原理以及应用

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

负MARGIN之讲解

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位,通过相对定位偏移后,其仍然…

我知道你不知道的负Margin

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

CSS艺术之---负margin之美

CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非常重要的. 一.原理 文档流 百度百科中的定义:文档流是文档中可显示对象在排列时所占用的位置.将窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. (自己的理解是从头到尾依照文档的顺序,该在什么位置就在什么位置,也能够依照上面的意思理解,自上而下,自左到右的顺序) 那些没有脱…

（负）-margin在页面布局中的应用

有关margin的原理可以看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 有关margin负值的几个案例可以参考:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 主要有以下几种情况: 一.左右列固定,中间列自适应布局 : 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很多网页都需要中间列…

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

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

负margin在页面布局中的应用

关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定,中间列自适应布局 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求. HTML : CSS: 效果: 二. 去除列表右边框 为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式…