• CSS实现比翼双飞和圣杯布局模型效果
  • 发布于 2个月前
  • 193 热度
    0 评论
  • 李凌
  • 1 粉丝 17 篇博客
  •   
圣杯模型和比翼双飞模型主要的特指

1.首先加载的是中间部分,其次是左边,然后是右边  

2.中间是自适应,二边是定宽


实现方法

1.grid
2.margin+float+position:releative父亲加padding 挤进去
3.margin+float+box-size:border-box  

1.grid
html:
 <div class="wrap">
    <div class="header">header</div>
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
  </div>
css:
.middle {
    grid-area: middle;
    background-color: pink;
  }
  .left {
    grid-area: left;
    background-color: red;
  }
  .right {
    grid-area: right;
    background-color: blue;
  }
  .header {
    grid-area: header;
    background-color: yellow;
  }
  .footer {
    grid-area: footer;
    background-color: gray;
  }
  .wrap {
    display: grid;
    grid-template-areas: "header header header" "left middle right" "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 150px 1fr 150px;
    text-align: center;
    height: 500px;
    width: 500px;
  }
实现效果:

2.margin+float+position:releative父亲加padding 挤进去
 html:
<div class="header">header</div>
  <div class="wrap">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
css:
 .header,
  .footer {
    height: 30px;
    text-align: center;
    background: gray;
  }
  .wrap {
    overflow: hidden;
    padding: 0 200px;
  }
  .middle,
  .left,
  .right {
    float: left;
    min-height: 130px;
    position: relative;
  }
  .middle {
    width: 100%;
    background: pink;
  }
  .left {
    margin-left: -100%;
    background: blue;
    width: 200px;
    left: -200px;
  }
  .right {
    background: yellow;
    margin-left: -200px;
    width: 200px;
    right: -200px;
  }
  .footer {
    clear: both;
  }
效果:

3.  margin+float+box-size:border-box  
html:
 <div class="header">header</div>
  <div class="wrap">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
css:
 .header,
  .footer {
    height: 30px;
    text-align: center;
    background: gray;
  }
  .wrap {
    overflow: hidden;
  }
  .middle,
  .left,
  .right {
    float: left;
    min-height: 130px;
  }
  .middle {
    width: 100%;
    background: pink;
    box-sizing: border-box;
    padding: 0 200px;
  }
  .left {
    margin-left: -100%;
    background: blue;
    width: 200px;
  }
  .right {
    background: yellow;
    margin-left: -200px;
    width: 200px;
  }
  .footer {
    clear: both;
  }

效果:

分析:
1.grid 兼容性的的问题,面试只能作为一个亮点来吸引面试官,gird 很多新属性可以查文旦了解更多。
2.方法2最大亮点在于父容器的padding: 0 200px; 以及margin:-100%;
3.方法3和方法2很像,处理不同的就是main加上box-sizing:boeder-box;在用padding:0 200px;从而到达效果。

用户评论