CSS实现比翼双飞和圣杯布局模型效果

最新推荐文章于 2024-08-14 19:41:30 发布

前端老码农

最新推荐文章于 2024-08-14 19:41:30 发布

阅读量401

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=jb2ik10jb&title=CSS%E5%AE%9E%E7%8E%B0%E6%AF%94%E7%BF%BC%E5%8F%8C%E9%A3%9E%E5%92%8C%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80%E6%A8%A1%E5%9E%8B%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

圣杯模型和比翼双飞模型主要的特指

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;从而到达效果。