欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

圣杯布局与双飞翼布局

程序员文章站 2022-03-20 22:43:30
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 主要运用了浮动,定位,负边距。 注释:图片来源圣杯布局原文In Search of the Holy Grail,双飞翼布局图片来源来源于淘宝UED。 圣杯布局 DO ......

  圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。

  主要运用了浮动,定位,负边距。

  注释:图片来源圣杯布局原文in search of the holy grail,双飞翼布局图片来源来源于淘宝ued。

 

 

 

圣杯布局

 dom结构

              圣杯布局与双飞翼布局

 圣杯布局的dom结构主要由main包裹的center,left,right构成,其中center写在最前面,为了能最先渲染。

 css样式

                     圣杯布局与双飞翼布局

  在定义样式的时候先为body设置最小宽度,因为两侧存在固定宽度。

   这里的main因为没有设置宽度所以继承父元素的宽度,为两边设置内边距给left和right腾出空间。

   效果如下:

        圣杯布局与双飞翼布局

 

  main,center,left,right代码如下:

       圣杯布局与双飞翼布局

  为三栏布局都设置浮动,因为center宽度沾满父元素的100%,所以left和right会被挤到下一行

    效果如下:

圣杯布局与双飞翼布局

   接下来就是如何让left,right分别占据左右两边了

   先设置left:

#left {
width: 200px;
margin-left: -100%;
}

 

  效果如下:

    圣杯布局与双飞翼布局  

  这里我们运用了负边距,然后我讲一下负边距带来的影响

  1.margin负值对自身的影响

   当元素不存在width属性或者(width:auto)的时候,负margin会增加元素的宽度

   注意:
   margin-top为负值不会增加高度,只会产生向上位移
   margin-bottom为负值不会产生位移,会减少自身的高度

  2.对文档流的影响

   元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位(position:relative)有点不一样的是,在其后面的元素会补位,也就是后面的行内

   元素会紧贴在此元素的之后。总结,不脱离文档流不使用float的话,负margin元素是不会破坏页面的文档流。

  3.对浮动元素的影响

   负margin会改变浮动元素的显示位置,即使我的元素写在dom的后面,我也能让它显示在最前面。圣杯布局、双飞翼布局都是利用了这一原理。

    接着给left设置相对定位。

  代码如下:

#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px; 
background-color: gray;
}

  效果如下:

          圣杯布局与双飞翼布局
  最后设置right:
  right的设置,只需添加一条声明就好
#right {
width: 150px;
margin-right: -150px;
background-color: green;
}

  最后为footer清除浮动  clear:both;

    效果如下:
圣杯布局与双飞翼布局
 
 
 
双飞翼布局
 
  圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多,那么有没其他方法更加简洁方便呢?在淘宝ued探讨下,增加多一个p就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局。
  双飞翼布局相比圣杯布局,在center元素的外面加了一层main,并且同样需要保证main元素必须放在最前面。
    
    dom结构
 
      圣杯布局与双飞翼布局
    
    css代码
  与圣杯布局相比,双飞翼布局没有使用定位。
             圣杯布局与双飞翼布局
  因为这是center是嵌套在main里面的所以在给left和right预留位置的时候使用margin,双飞翼布局代码和圣杯布局相类似,left和right的设置同样通过负边距。
      最后结果如下:
        圣杯布局与双飞翼布局
 
  结语
   以上是本人在学习圣杯布局和双飞翼布局时的心得和个人理解,作为一个前端初学者而言,难免有理解不到位之处,希望大家提出,我一定加以改正。
 
                                            欢迎打赏
                                  
圣杯布局与双飞翼布局