1.margin设置负值后，会怎样？有何应用？

margin负值有什么效果？

• margin-left负值，元素自身向左移动
• margin-top负值，元素自身向上移动
• margin-right负值，右边的元素向左移动
• margin-bottom负值，下边的元素向上移动

margin负值的应用

• 增加宽度
• 圣杯布局
• 双飞翼布局

2.如何实现圣杯布局？

什么是圣杯布局

两边固定宽度，中间自适应宽度

难点

• margin-left:-100%;100%是父级的宽度的100%
• margin-right：-150px;其他元素当他宽度少了150px;

3.如何实现双飞翼布局？

什么是双飞翼布局

左右宽度固定，中间宽度自适应，中间的内容优先加载

4.如何清除浮动？手写clearfix

清除浮动的方法

• 父级加overflow：hidden
• 父级设置clearfix
• 父级也浮动

演示代码

.clearfix:after{
    content:'';
    display:'block';
    clear:both;
}

5.手写div垂直水平居中

常见的垂直水平居中方法

1.position+margin负值的方法（宽高固定）
2.position+margin:auto（固定宽高）
3.display:table-celi + vertical-align:middle(固定宽度)
4.position+transfrom(不需要固定宽高)
5.flex(不需要固定宽高)

演示代码

//table-celi方法
.box {
    display:table-cell;
    vertical-align:middle;
    width:500px;
    height:500px;
    border: 5px solid red;
}
.item{
    margin:auto;
    width:200px;
    height:300px;
    background-color:#ccc;
}

<div class='box'>
    <div class='item'>stianq</div>
</div>


//transform方法
.box{
    position:relative;
    width:500px;
    height:500px;
    border: 5px solid red;
}
.item{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:300px;
    background-color:#ccc;
}

<div class="box">
    <div class="item">stianq</div>
</div>