您现在的位置是：网站首页> 编程资料编程资料

CSS布局之圣杯布局与双飞翼布局 浅谈css双飞翼布局和圣杯布局CSS的三列式"圣杯布局"方案完全解析面试必问:圣杯布局和双飞翼布局的区别

2021-09-05 707人已围观

简介 圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。
圣杯布局

实现原理
html代码中，middle部分首先要放在container的最前部分，然后是left，right
1.将三者都设置 float:left, position:relative (因为相对定位后面会用到）
2.middle设置 width:100% 占满一行
3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%
4.这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px
5.middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px
6.同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px
实现代码
JavaScript Code复制内容到剪贴板

  1.     
  2. "en-US">    
  3.     
  4. "UTF-8">    
  5. 圣杯布局    
  6. "text/css">    
  7. body {    
  8. text-align: center;;    
  9. }   
  10. #demo {    
  11. margin: auto;    
  12. }   
  13. #header, #footer {    
  14. height: 50px;    
  15. background-color: #aaa;    
  16. }   
  17. #container {    
  18. overflow: hidden;    
  19. margin: 10px 0;    
  20. padding:0 210px;    
  21. }   
  22. #left {    
  23. background-color: red;    
  24. float:left;    
  25. position:relative;    
  26. left:-210px;    
  27. width:200px;    
  28. margin-left:-100%;    
  29. }   
  30. #right {    
  31. background-color: green;    
  32. width: 200px;    
  33. margin-left: -200px;    
  34. float: left;    
  35. right: -210px;    
  36. position: relative;    
  37. }   
  38. #middle {    
  39. background-color: blue;    
  40. float:left;    
  41. width:100%;    
  42. }    
  43.     
  44.     
  45.     
  46. "demo">    
  47. "header">头部    
  48. "container">    
  49. "middle">    
  50. middle
    主内容区域    
    
  • "left">    
  • left
    左侧边栏区域    
    •     
  • "right">    
  • right
    右侧边栏区域    
    •     
    •     
  • "footer">底部    
    •     
  •     
  •    

    • 双飞翼布局

    实现原理
    html代码中，middle部分首先要放在container的最前部分，然后是left，right
    1.将三者都设置 float:left
    2.middle设置 width:100% 占满一行
    3.此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100%，同理right使用 margin-left:-200px
    4.此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px
    实现代码

    JavaScript Code复制内容到剪贴板

    1.     
    2. "en-US">    
    3.     
    4. "UTF-8">    
    5. 双飞翼布局    
    6. "text/css">    
    7. body {    
    8. text-align: center;;    
    9. }   
    10. #header, #footer {    
    11. height: 50px;    
    12. background-color: #aaa;    
    13. }   
    14. #container {    
    15. overflow: hidden;    
    16. margin: 10px 0;    
    17. }   
    18. #left {    
    19. background-color: red;    
    20. float:left;    
    21. width:200px;    
    22. margin-left: -100%;    
    23. }   
    24. #right {    
    25. background-color: green;    
    26. width: 200px;    
    27. float: left;    
    28. margin-left: -200px;    
    29. }   
    30. #middle {    
    31. float: left;    
    32. width: 100%;    
    33. }   
    34. #middle_content {    
    35. background-color: blue;    
    36. margin: 0 210px;    
    37. }    
    38.     
    39.     
    40.     
    41. "demo">    
    42. "header">头部    
    43. "container">    
    44. "middle">    
    45. "middle_content">    
    46. middle_content
      主内容区域    
        
    •     
  • "left">    
  • left
    左侧边栏区域    
  •     
  • "right">    
  • right
    右侧边栏区域    
  •     
  •     
  • "footer">底部    
  •     
  •     
  •   

    • 关于CSS布局之圣杯布局与双飞翼布局 的相关知识就给大家介绍这么多，希望对大家有所帮助！

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS Sprites雪碧图技术基础学习指南详解CSS Sprite雪碧图的应用

    下一篇：CSS代码编写中视觉格式化模型的学习教程深入讲解CSS中盒模型的用法详解CSS中的Box Model盒属性的使用CSS设置div对象盒子里部分文字加粗的实例介绍css3弹性盒模型（Flexbox）详细介绍css盒子模型图解css盒子模型详解加示例css3弹性盒模型实例介绍css盒模型和块级、行内元素深入理解CSS 理解盒子模型css的核心内容 标准流、盒子模型、浮动、定位等分析

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网