美文网首页
负边距、三栏布局

负边距、三栏布局

作者: 车万里 | 来源:发表于2016-10-11 21:36 被阅读0次

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

  • 负边距使元素发生偏移时,元素未脱离文档流,相邻元素也会受影响。
  • position:relative使元素偏移时,只改变自身的位置,其在文档流中的位置不会改变,不会影响相邻元素的位置。

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

  • 父元素里有三个子元素,都浮动,然后父元素清除浮动。左右栏设置宽度。
  • 左侧栏设置margin:-100%;
  • 右侧栏margin:自身宽度的负值;
  • 中间栏宽度100%,自适应

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

原理:利用负边距,相对定位来实现。
1.父元素里有三个子元素,都浮动,然后父元素清除浮动。
2.左侧栏设置margin:-100%;
3.右侧栏margin:自身宽度的负值;
4.中间栏宽度100%,自适应,
5.给左右侧栏一个position:relative;来控制位置。

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

原理:给中间的内容块加一个子元素,痛苦设置margin值形成三栏布局。
1.设置一个父元素里三个子元素,中间栏宽度自适应,左右栏设置宽度。
2.三个子元素动浮动,父元素清除浮动。
3.左侧栏设置margin:-100%;,右侧栏margin:自身宽度的负值;
4.给中间栏加一个子元素,通过设置左右margin值,形成三栏布局

相关文章

  • 前端基础(问答9)

    keywords: 负边距、relative、三栏布局、圣杯布局、双飞翼布局。 负边距在让元素产生偏移时和posi...

  • 我的布局实例

    下拉菜单 demo BFC 两栏布局 demo 负边距 两栏布局 demo 负边距 等边布局 demo 圣杯三栏布...

  • CSS样式布局

    负边距与浮动布局 负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-...

  • 圣杯布局和双飞翼布局

    实现圣杯布局和双飞翼布局,“负边距”是必不可少的。 了解圣杯布局和双飞翼布局之前,我们先来了解下负边距。一、定义:...

  • CSS布局奇淫巧计之-强大的负边距

    CSS布局奇淫巧计之-强大的负边距css中的负边距(negative margin)是布局中的一个常用技巧,只要运...

  • css学习笔记

    负边距 找了一下负边距的相关文档:CSS布局奇淫巧计之-强大的负边距,总结了一下: 如果margin为正值,则相当...

  • task12-负边距、三栏布局

    负边距在让元素产生偏移时和position: relative有什么区别? 负边距设置偏移会影响其后元素的布局。p...

  • 日夜谈——负边距、三栏布局

    首先,无论是圣杯布局还是双飞翼布局,负边距都起着非常重要的作用,我写在这里是为了提醒自己。 1.负边距在让元素产生...

  • 负边距、三栏布局

    1 . 负边距在让元素产生偏移时和position: relative 的区别 position:relative...

  • 负边距、三栏布局

    本教程版权归小圆和饥人谷所有,转载须说明来源 问答 1. 负边距在让元素产生偏移时和position: relat...

网友评论

      本文标题:负边距、三栏布局

      本文链接:https://www.haomeiwen.com/subject/nybbyttx.html