【郑州-146期】margin负值在页面布局中有哪些应用？

大家好，我是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.解决办法

demo

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.参考文献：

8.更多讨论

曾听有人讲过不建议使用margin负值？大家知道为什么吗？

文本链接：文本链接

视频链接：视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

--------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

填写我的邀请码可以获得未知优惠哟：93881593

或者你可以直接点击此链接：邀请码链接