负边距、三栏布局

负边距在让元素产生偏移时和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.使用双飞翼布局的思路实现如下两栏布局

    代码五在线预览

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容