2016/5/31
问答题：
1.负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距让元素发生偏移的时候是直接改变了元素在文档流中的位置，影响周边元素的位置，周边的元素会跟着一起动。
-
position:relative 没有改变元素在文档流中的位置，只是相对于自身原来的位置发生了偏移，不会影响其他的元素。
原来的状态：
0_1464510810536_upload-02b75474-143e-4a04-b17d-00e1d52e6f6c
加position:relative之后，没有影响box2:
0_1464510953291_upload-277dae4a-9260-40c2-8878-e025e8eaca81
用负margin，box2的位置也发生了偏移
0_1464511071202_upload-cc6afcad-febb-4f16-a508-d0e5ead83548
2.使用负 margin 形成三栏布局有什么条件?
- 三栏要放在一个父容器中，三栏都要浮动，父容器要清浮动。
- 左右两栏要固定宽度，中间的内容栏设置宽度为100%，和父级相同
- 通过设置负margin-left值是边栏位于内容栏里面的左右部，分别为100%，和自身宽度。
- 主体设置padding值，再给边栏设置定位位移，或者通过将中间主体内容放在一个容器里，通过设置容器左右的margin值，来实现左右边栏不会覆盖内容栏
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 圣杯布局的原理是为了中间内容不被遮挡，宽度自适应，将两个侧边栏和内容包含在一个容器中，利用主容器的padding和侧边栏的相对定位与负边距来实现三栏布局。
- 圣杯布局的步骤：
1.主容器清浮动，三栏都要设置浮动。
2.侧边栏固定好宽度，内容栏即中间栏宽度设置为100%。
3.左侧边栏设置margin-left:-100%.（依据父级宽度）
4.右侧边栏设置 margin-left:-100px.(即它自身的宽度)
上面3,4步使得左右侧边栏分别在中间栏内部的左右侧
5.主容器设置padding值
6.侧边栏设置相对定位和定位值
4.双飞翼布局的原理? 实现步骤?
- 双飞翼布局的原理也是为了使中间内容不被遮挡，宽度自适应，直接在中间div中创建div放置内容，在孩子div中利用左右margin为两侧留出位置。
- 实现步骤：
1.主容器清浮动，三栏都要设置浮动。
2.侧边栏固定好宽度，内容栏即中间栏宽度设置为100%。
3.左侧边栏设置margin-left:-100%.（依据父级宽度）
4.右侧边栏设置 margin-left:-100px.(即它自身的宽度)
上面3,4步使得左右侧边栏分别在中间栏内部的左右侧
5.在中间栏里面嵌套一个div,并且给这个容器设置margin的左右值，为两侧留出位置。
