Css的背景布局

最新推荐文章于 2024-07-25 15:36:30 发布

一路向前的月光

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量125

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/a99101/article/details/129520789

版权

以底部组件为例，底部为粉色，中间一个版心 margin：0 auto

<style>
  .aa{
    width: 100%;
    height: 400px;
    background-color: rgb(237, 195, 195);
  }
  .banner{
    margin: 0 auto;
    max-width: 1200px;
  }
</style>
<body>
  <div class="aa">
    <div class="banner">
      版心内容
    </div>
  </div>
</body>

这中大多数写法都是外层一个div 写入背景色里面再放一个div 利用margin控制两边

现在采用padding 只要一个div就可以实现并且最小宽度可calc（）以实现

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .aa{
    width: 100%;
    height: 400px;
    background-color: rgb(237, 195, 195);
  }
  .banner{
    margin: 0 auto;
    max-width: 1200px;
  }

  .bb{
    background-color: aqua;
    /* 最小宽度是自定义的600px X 2 */
    padding: 0 calc(50% - 600px);
    /* 需要自己设置div 的大小,二合一 */
    height: 400px;
  }
</style>
<body>
  <div class="aa">
    <div class="banner">
      版心内容
    </div>
  </div>
  <div class="bb">
      版心内容
  </div>
</body>