负边距在让元素产生偏移时和position: relative有什么区别?
负边距会让接下来挨着的元素也产生位置偏移：
负边距位置偏移
positioin:relative只会让元素本身发生位置偏移，接下来的元素不会发生影响：
`position:relative`位置偏移
使用负 margin 形成三栏布局有什么条件?
- 一个父元素和三个块级子元素。
- 父元素需要设置左右内边距
- 三个块级元素都需要设置浮动，并且固定宽度。
- 主要内容的块级元素需要设置在最上方，保证优先渲染，并且宽度设置为100%。
- 侧边栏设置负边距
.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局指侧边栏定宽，中间自适应三栏布局。主内容放在前面优先渲染。
-
设置三栏式结构
设置三栏式结构 -
设置侧边栏宽度，中间栏宽度，并设置浮动。并且根据侧边框宽度设置父元素内边距
设置样式 - 设置左右侧边栏负边距，并利用
positioin:relative设置侧边栏位置
为侧边栏进行定位
双飞翼布局的原理? 实现步骤?
双飞翼布局也是一个两边在父容器里固定宽度，中间自适应的布局。主内容放在前面优先渲染。
-
设置三栏式结构,主内容需要有父元素包裹
设置三栏式结构 -
设置初始样式，主内容父元素宽度设置为100%
设置初始样式 -
设置侧边栏负边距,以及根据侧边栏宽度设置主内容边距
定位
代码
- 用浮动、负边距实现如下效果
代码一在线预览 - 使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
代码二在线预览 - 使用圣杯布局的思路实现如下两栏布局
代码三在线预览
4.使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
代码四在线预览
5.使用双飞翼布局的思路实现如下两栏布局
代码五在线预览
本文版权归本人和饥人谷所有，转载请注明来源。
