负边距、三栏布局

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

  • position:relative 本身还处在文档流中,对其他元素没有影响
  • 负margin方法使元素位置偏移,使元素在文档流中的位置发生了改变,其后的元素受其影响。

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

  • 使用负margin为了是main元素提前,对搜索进行优化
  • 使用负margin使浮动元素上移需要处于前面的元素也是浮动元素
  • 左侧边栏设置margin:-100%
  • 右侧margin为其本身的宽度的负值
  • 中间自适应,可在其中再建一个块,两侧margin出边栏的宽度,也可直接padding挤压中间元素

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

  • 负边距使三栏浮动处于同一个水平线上,可适当调整位置
  • 父容器设置padding,给两侧边栏留出空间
  • 给边栏元素设置相对移动,填充父容器padding留出的位置

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

  • 双飞翼与圣杯类似,父容器不需要padding出位置,边栏可以直接遮盖main,再在main新建一个元素,margin出两侧边栏的位置即可。

两个例子


本教程版权归 张宇 和 饥人谷 所有,转载须说明来源

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

推荐阅读更多精彩内容

  • 1. 负边距在让元素偏移时和position: relative有什么区别? 通过负边距进行偏移的元素,它会放弃原...
    Timmmmmmm阅读 420评论 0 0
  • 一、负边距在让元素产生偏移时和position: relative有什么区别? 负margin和position:...
    婷楼沐熙阅读 894评论 0 4
  • 1. 负边距在让元素产生偏移时和position: relative有什么区别? 负边距:父边距是用于调节元素位置...
    进击的阿群阅读 364评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 1.负边距在让元素产生偏移时和position:relative有什么区别? 通过负边距进行偏移的元素,它会放弃偏...
    饥人谷_任磊阅读 304评论 0 1