问答:

1.负边距在让元素产生偏移时和position: relative有什么区别?

使用负边距进行偏移时文档流中位置已经改变后面的元素会补位过来

Paste_Image.png

使用position: relative进行相对偏移的时候，文档流中位置不变，后面的元素位置不会改变。

Paste_Image.png

2.使用负 margin 形成三栏布局有什么条件?

三栏放在一个容器中，并且浮动
中间窗体设置100%宽度，左右两栏设置固定宽度
两栏设置负边距

3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

1.HTML布局：三栏放在同一个container容器中，其中main（中间窗体）放在前面，aside（左边栏）extra（右边栏）放在后面
2.全部设置浮动（以左浮动为例子），其中中间部分宽度设置100%，左右两栏设置固定宽度
3.container容器设置左右padding 为左右边栏的宽度
4.aside（左边栏）设置 margin-left:-100%,extra（右边栏）设置margin-left：本身宽度乘以-1；
5.左边栏设置position:relative; left:左边栏宽度乘以-1
6.右边栏设置position:relative;left:右边栏宽度
代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style>
      .container{
        height: 500px;
        padding: 0 200px;
      }
      .container>div{
        float:left;
        height: 100%;
      }
      .container .main{
        width: 100%;
        background-color: #ccc;
      }
      .container .aside{
        background-color: red;
        width: 200px;
        height: 300px;
        margin-left: -100%;
        position: relative;
        left:-200px;
      }
      .container .extra{
        background-color: blue;
        width: 200px;
        height: 300px;
        margin-left: -200px;
        position:relative;
        left: 200px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="main">
        <p>
        </p>

      </div>
      <div class="aside">
        我是左边栏 我做了
        margin-left: -100%;
        position:relative;
         left:-200px;
      </div>
      <div class="extra">
        我是右边栏 我做了
        margin-left: -200px;
        position:relative;
        left:100px;
      </div>
    </div>
  </body>
</html>

效果

Paste_Image.png

4.双飞翼布局的原理? 实现步骤?

1.HTML布局：三栏放在同一个container容器中，其中main（中间窗体）放在前面，aside（左边栏）extra（右边栏）放在后面
2.全部设置浮动（以左浮动为例子），其中中间部分宽度设置100%，左右两栏设置固定宽度
4.aside（左边栏）设置 margin-left:-100%,extra（右边栏）设置margin-left：本身宽度乘以-1；
5.在main中加一个content content设置左右边距，margin-left:左边栏宽度 margin-right:右边栏宽度

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style>
      .container{
        height: 500px;
        border: 1px solid;
      }
      .container>div{
        float:left;
        height: 100%;
      }
      .container .main{
        width: 100%;
      }
      .container .aside{
        background-color: red;
        width: 200px;
        margin-left: -100%;
      }
      .container .extra{
        background-color: blue;
        width: 200px;
        margin-left: -200px;
      }
      .container .content{
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="main">
        <div class="content">
          我是content 我的父亲是main
          main和aside、extra是兄弟
          我比main小 我做了
          margin-left: 210px;
          margin-right: 210px;

        </div>

      </div>
      <div class="aside">
        我是左边栏 我做了
        margin-left: -100%;
      </div>
      <div class="extra">
        我是右边栏 我做了
        margin-left: -200px;

      </div>
    </div>
  </body>
</html>

效果