负边距、三栏布局（圣杯布局、双飞翼布局）

首先来了解下

 

一、负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时，他原来的位置不会脱离文档流的，即还占用原来的空间，但负边距产生偏移时它原来的位置并不占用空间； 例如下面的代码

  Document

  *{
    margin: 0px;
    padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-margin{ background-color: yellow; height: 100px; width: 100px; margin-left: -50px; margin-top: -50px; } .relative{ background-color: #000; height: 100px; width: 100px; position: relative; top: 50px; left: 50px; } 

 

二、使用负 margin 形成三栏布局有什么条件? 1、需要左右侧边栏及主内容均为浮动的块级元素； 2、主内容需在最前面； 3、左侧边栏需设置margin-left为-100%，右侧边栏需设置margin-left为它本身宽度的负值；

三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。 原理大致是这样的：采用负边距使得浮动元素达到预设的位置后，再使用padding使得两侧留出空白区域待左、右边距占用，然后再使用相对定位使得左、右边距能够流向预定的位置。

实现步骤如下： 1、先设置好样式

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; } .right-aside{ background-color: yellow; width: 200px; } .main{ background-color: green; width: 100%; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

2 、设置左侧边栏、右侧边栏及主内容全部左浮动； (设置浮动后一定要记得在直接父元素中清除浮动！)

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; } .right-aside{ background-color: yellow; width: 200px; float: left; } .main{ background-color: green; width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

3、设置左侧边栏及右侧边栏的负边距；

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; margin-left: -100%; } .right-aside{ background-color: yellow; width: 200px; float: left; margin-left: -200px; } .main{ background-color: green; width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

4、由于左右侧边栏遮挡住了主内容，因此需在外层content中先设置左右padding，为左右侧边栏流出空间；

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; margin-left: -100%; } .right-aside{ background-color: yellow; width: 200px; float: left; margin-left: -200px; } .main{ background-color: green; width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } #content{ padding-left: 200px; padding-right: 200px; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

5、将左右侧边栏分别移至预留的空白区域；

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; margin-left: -100%; position: relative; left: -200px; } .right-aside{ background-color: yellow; width: 200px; float: left; margin-left: -200px; position: relative; right: -200px; } .main{ background-color: green; width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } #content{ padding-left: 200px; padding-right: 200px; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

以上便是实现圣杯布局的步骤。

四、双飞翼布局的原理? 实现步骤?

双飞翼布局的原理也是采用了浮动元素负边距的特性使相关元素达到预定的要求后再设置相应的margin使得左、右边距正好处于margin的空间中；

双飞翼布局前面的三个步骤与圣杯布局是一样的,下面介绍之后的步骤： 第四步、在main中新增一个inner的div子元素并设置其背景色，删除main中的背景色及相关文字内容；

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; margin-left: -100%; } .right-aside{ background-color: yellow; width: 200px; float: left; margin-left: -200px; } .main{ width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } .inner{ background-color: green; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

第五步，由于左、右侧边栏还是遮挡了主内容，因此需设置inner的左右margin即可；

    Document

     *{
         margin: 0;
         padding: 0; } #header,#footer{ height: 50px; background-color: #ccc; } .left-aside{ background-color: red; width: 200px; float: left; margin-left: -100%; } .right-aside{ background-color: yellow; width: 200px; float: left; margin-left: -200px; } .main{ width: 100%; float: left; } #content:after{ content: ""; display: block; clear: both; } .inner{ background-color: green; margin-left: 200px; margin-right: 200px; } 头部 主内容 左侧边栏 右侧边栏 尾部 

 

以上便实现了双飞翼布局；

转载于:https://www.cnblogs.com/PeterSpeaking/p/5836031.html