[真传弟子]CSS-汪开放|2017年06月20日的日报-技能树.IT修真院

发表于： 2017-06-20 18:56:18

1 1074

【css-08】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;