task 12

负边距在让元素产生偏移时和position: relative有什么区别?
负边距通过元素的margin值为负值让元素产生偏移,他会改变元素的位置,影响后面元素;
position:relative,让元素相对自身产生偏移,不影响后面元素的位置。

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

  1. 3个子盒子相对父容器都float:left;
  2. 中间栏盒子宽度为100%;两边宽度固定;
  3. 左边盒子便宜-100%,右边盒子偏移负本身宽度;

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

  1. 父元素包裹三个子元素(主元素与两边元素),其中主元素要放在最上面,width:100%。
  2. 设置父元素的左右padding与两边元素的宽度一致。
  3. 为三个子元素设置float属性,值要统一。父元素要清除浮动。
  4. 为两边元素设置负margin,将其定位在主元素内部的两边。
  5. 为两边元素设置position:relative;通过left、right,将其定位在主元素的两边。

双飞翼布局的原理? 实现步骤?
类似于圣杯布局,但是不需要给父元素设置padding,以及两边元素设置相对位置。
只需要给中间元素里在声明一个div设置margin为两边元素的宽度。就可以实现三栏布局。

代码
code1
code2
code3
code4
code5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很...
    studystudy阅读 4,862评论 0 0
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,530评论 3 30
  • 1. 负边距在让元素偏移时和position: relative有什么区别? 通过负边距进行偏移的元素,它会放弃原...
    Timmmmmmm阅读 3,165评论 0 0
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 8,340评论 0 59