大家好，我是IT修真院郑州分院第四期的学员汪开放，一枚正直纯洁善良的web程序员
今天给大家分享一下，margin负值的应用
1.背景介绍
CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 知道经典的圣杯布局吗？
2.知识剖析
margin负值的设置：
{margin-left:-100px;}或者{margin-left:-100%;}
1、负margin是绝对标准的CSS，W3C标准对于margin属性来说，负值是被允许的。
2、不脱离文档流, 不使用float的话，负margin元素是不会破坏页面的文档流。
所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
3、完全兼容 所有现代浏览器基本上都支持负margin（IE6在大多数情况下也支持）。
4、浮动会影响负margin的使用 ，所以负margin使用时应小心谨慎。
什么是圣杯布局？
曾经有这样一个经典的需求：
1）两栏抑或三栏布局，主体自适应宽度；
2）一个或两个侧边栏固定宽度；
3）主体部分xhtml结构在最前面（网速慢时可以优先显示，对SEO有利）
4）自适应高度，且不影响等高；
5）兼容IE6+，firefox，chrome，opera。
于是乎margin负值便大放光彩，首先是国外出现的圣杯布局，掀起一股margin负值热潮
两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
如果使用得当，负margin是非常强大的属性，以下是2种可以使用margin的场景。
1. 使用margin水平垂直居中
body{margin:0;padding:0;}
#test{
width:200px;
height:200px;
background:#F60;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
2.实现圣杯布局
3.常见问题
如何实现圣杯布局？
4.解决办法
5.编码实战
1）基本布局
Header内容区
中间弹性区
左边栏
右边栏
2)利用负边距让左右两个盒子浮动上去
.left {margin-left:-100%;}
.right {margin-left：-200px;}
3）遇到的问题
4)让中间自适应的盒子安全显示
.container{ padding: 0 200px;}
.left{ position: relative; left: -200px;}
.right{position: relative;right: -200px;
5)完成图
6.扩展思考
margin负值还能运用到哪些地方？
7.参考文献：
http://blog.csdn.net/zhousning/article/details/40930097
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
8.更多讨论
曾听有人讲过不建议使用margin负值？大家知道为什么吗？
文本链接：文本链接
视频链接：视频链接
MARGIN负值在页面布局中有哪些应用？_腾讯视频
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
填写我的邀请码可以获得未知优惠哟：89320496
或者你可以直接点击此链接：邀请链接
网友评论