负边距、三栏布局

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

负边距会让接下来挨着的元素也产生位置偏移：

负边距位置偏移
positioin:relative只会让元素本身发生位置偏移，接下来的元素不会发生影响：
`position:relative`位置偏移

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

1. 一个父元素和三个块级子元素。
2. 父元素需要设置左右内边距
3. 三个块级元素都需要设置浮动，并且固定宽度。
4. 主要内容的块级元素需要设置在最上方，保证优先渲染，并且宽度设置为100%。
5. 侧边栏设置负边距

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

圣杯布局指侧边栏定宽，中间自适应三栏布局。主内容放在前面优先渲染。

1. 设置三栏式结构

   
   设置三栏式结构

2. 设置侧边栏宽度，中间栏宽度，并设置浮动。并且根据侧边框宽度设置父元素内边距

   
   设置样式
3. 设置左右侧边栏负边距，并利用positioin:relative设置侧边栏位置
   为侧边栏进行定位

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

双飞翼布局也是一个两边在父容器里固定宽度，中间自适应的布局。主内容放在前面优先渲染。

1. 设置三栏式结构,主内容需要有父元素包裹

   
   设置三栏式结构

2. 设置初始样式，主内容父元素宽度设置为100%

   
   设置初始样式

3. 设置侧边栏负边距,以及根据侧边栏宽度设置主内容边距

   
   定位

代码

github

1. 用浮动、负边距实现如下效果
   
   代码一在线预览
2. 使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
   
   代码二在线预览
3. 使用圣杯布局的思路实现如下两栏布局
   
   代码三在线预览
   4.使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
   
   代码四在线预览
   5.使用双飞翼布局的思路实现如下两栏布局
   
   代码五在线预览

本文版权归本人和饥人谷所有，转载请注明来源。