MARGIN负值在页面布局中有哪些应用？
2017-07-26 本文已影响23人
长天_
大家好，我是IT修真院深圳分院第01期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 CSS任务中页面布局部分可能会使用到的知识点：
MARGIN负值在页面布局中有哪些应用？
1.背景介绍
CSS盒模型中，margin是我们非常熟悉的一个属性，但是它的负值你用过吗？
2.知识剖析
2.1、一个负margin应该是这样设置的：
和常规的margin相差无几，不同的是将它的值设置为负数
A、负margin是绝对标准的CSS，W3C标准对于margin属性来说，负值是合法的。
B、不脱离文档流，不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随它的元素都会被上移。
C、完全兼容，所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。
D、浮动会影响负margin的使用，负margin不是你每天都用的CSS属性，应用时应小心谨慎。
2.2、如果使用得当，负margin是非常强大的属性，以下是几种可以使用margin的场景。
1、使用margin水平垂直居中
需要掌握元素的宽高
2、实现圣杯布局，双飞翼布局等
3、实现元素位置偏移效果，以达到页面布局目的
3.常见问题
经典的圣杯布局是怎么通过margin负值来实现的？
4.解决方案
曾经有这样一个经典的需求：
1、两栏抑或三栏布局，主体自适应宽度;
2、一个或两个侧边栏固定宽度;
3、主体部分HTML结构在最前面（网速慢时可以优先显示，对SEO有利）;
4、自适应高度，且不影响等高;
5、兼容IE6+，firefox，chrome，opera。 于是乎margin负值便大放光彩，首先是国外出现的圣杯布局，掀起一股margin负值热潮。
首先将三个块状元素设置左浮动
然后设置sub和extra的margin-left为负值，将它们浮动到main的左右两侧即可
经典的圣杯布局，通过margin负值和float实现
5.扩展思考
margin负值是否会改变元素的宽度？
首先有一个ul元素，初始width是460
然后添加一个margin负值，它的width就发生变化了
需要注意的是，如果提前设置ul的width，则上述效果无效
6.参考文献
CSS布局骚操作之-强大的负边距
圣杯布局和双飞翼布局
负margin在页面布局中的应用
7.更多讨论
详见视频：
_腾讯视频
问：margin负值对浮动元素有什么影响？
答：如上述的圣杯布局实现原理，后面的元素会覆盖前面的元素；
问：margin负值对元素宽度是否有影响？
答：如果元素本身未设置width属性，那么margin负值则会影响它的宽度；
问：margin负值还能运用到哪些地方？
答：。。。
