浅谈css双飞翼合理布局和圣杯合理布局

日期:2020-10-16 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

双飞翼合理布局和圣杯合理布局全是完成两侧固定不动正中间自融入的3栏合理布局的方法,近期在梳理3栏合理布局完成方法的笔记,决策但拉出来1篇,记1下这两个經典合理布局。

1、圣杯合理布局

波动、负边距、相对性精准定位、不加上附加标识

实际效果图

DOM构造:

<div class="header">Header</div>
<div class="bd">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>

款式:

<style>
        body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .bd{
            padding-left:150px;
            padding-right:190px;
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:⑴00%;
            position: relative;
            left:⑴50px;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:⑴90px;
            position:relative;
            right:⑴90px;
        }
    </style>

左中右一部分款式转变全过程

1、正中间一部分必须依据访问器宽度的转变而转变,因此要用100%,这里设*左中右向左波动,由于正中间100%,左层和右层压根沒有部位上去

      .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }

2、把左层负margin150后,发现left上去了,由于负到出对话框没部位了,只能往上挪

.left{ 
   background: #E79F6D; 
   width:150px; 
   float:left; 
   margin-left:⑴50px; 
}

3、那末按第2步这个方式,能够得出它要是移动对话框宽度那末宽就可以到最左侧了,运用负边距,把上下栏精准定位

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:⑴00%; 
}
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:⑴90px; 
}

4、但是难题来了,正中间被上下挡住了啊,只好给外层加padding了

.bd{ 
  padding-left:150px; 
  padding-right:190px;
}

5、可是加了以后上下栏也缩进来了,因而选用相对性精准定位方式,各有相对自身把自身挪出去,获得最后結果

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:⑴00%; 
  position: relative; 
  left:⑴50px; 
} 
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:⑴90px; 
  position:relative; 
  right:⑴90px; 
}

2、双飞翼合理布局

在不提升附加标识的状况下,圣杯合理布局早已十分完善,圣杯合理布局应用了相对性精准定位,之后合理布局是有局限性的,并且宽度操纵要改的地区也多,那末有没别的方式更为简约便捷呢?

在淘宝UED讨论下,提升多1个div便可以无需相对性合理布局了,只用到了波动和负边距,这便是大家所说的双飞翼合理布局。

DOM构造:main里层提升了1个div

<div class="header">Header</div>
<div class="bd"> 
  <div class="main"> 
    <div class="inner"> Main </div>*
  </div> 
  <div class="left">Left</div> 
  <div class="right">Right </div>
</div>
<div class="footer">Footer</div>

款式:

去掉了上下栏的相对性精准定位

去调包裹层padding,以正中间栏新增div的margin替代

        body{
          padding:0;
          margin:0
        }
        .header,.footer{
          width:100%;  
          background:#666;
          height:30px;clear:both;
        }
        .bd{
            /*padding-left:150px;*/
            /*padding-right:190px;*/
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:⑴00%;
            /*position: relative;*/
            /*left:⑴50px;*/
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:⑴90px;
            /*position:relative;*/
            /*right:⑴90px;*/
        }
        .inner{
            margin-left:150px;
            margin-right:190px;
        }

3、双飞翼合理布局和圣杯合理布局的差别

圣杯合理布局和双飞翼合理布局处理难题的计划方案在前1半是同样的,即:

  • 正中间栏宽度设定为100%
  • 3栏所有float波动
  • 上下两栏再加负margin让其跟正中间栏div并排,以产生3栏合理布局。

不一样在于处理正中间栏div內容不被遮挡难题的思路不1样。

圣杯合理布局

  • 将3栏的外包裹层设定上下padding-left和padding-right
  • 将上下两个div用相对性合理布局position: relative并各自相互配合right和left特性,相对性本身挪动便于不遮挡正中间div

双飞翼合理布局

  • 正中间div內部建立子div用于置放內容
  • 在该子div里用margin-left和margin-right为上下两栏div留出部位

多了1个div,少用4个css特性(圣杯合理布局正中间divp的adding-left和padding-right这2个特性,再加上下两个div用相对性合理布局position: relative及对应的right和left共4个特性,1共6个;而双飞翼合理布局子div里用margin-left和margin-right共2个特性,6⑵=4)。

而且双飞翼合理布局也有个益处,让Main变为BFC元素了,显示屏宽度变小Main也不容易被挤下去,圣杯合理布局就会被挤下去。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。