任务12-负边距、三栏布局

负边距在让元素产生偏移时和position: relative有什么区别?
答：
负边距让元素位移:会影响其他元素的位置，导致影响文档流。

position:relative;不会改变该元素在文档流中原本位置，也不会影响其他元素位置，所以文档流结构不受影响。

1. 三个元素都在父元素中处于float：left
2. 中间栏宽度自适应为100%
3. 左边栏的margin-left值设置为-100%，右边栏margin-left值设置为负的自身宽度。

1. 创建父容器div，和三栏的div。注意顺序：中间内容栏应排在第一方便渲染。

   
   Paste_Image.png

2. 设定父容器的左右padding值分别为左右侧边栏的宽度.设置两个盒子的负margin，左侧为-100%，右侧为负其自身宽度。

   
   Paste_Image.png

3. 设定父容器和左右侧边栏position:relative;,调整他们的位置，使他们位于两侧。

   
   Paste_Image.png

1. 写出页面结构，父容器包裹左右侧边栏和中间内容栏
2. 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
3. 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%

4. 在中间容器的内部增加一个div来包裹内容，设置这个div的左边距和右边距为两个侧边栏的宽度，从而给两边的侧边栏空出位置。

   
   Paste_Image.png