当前位置：网站首页>常见布局效果实现方案

常见布局效果实现方案

2022-08-11 03:41:00 【bug丸】

常见布局效果实现方案

盒子居中

  <body>
    <div class="father">
      <div class="child"></div>
    </div>
  </body>

方案1：flex布局

需不需要垂直居中就自己看需求而定，这里主要是水平居中

     .father {
        width: 100%;
        // height: 600px;
        background-color: #f5f5f5;
        display: flex;
        // align-items: center; 垂直（侧轴）方向的居中
        justify-content: center;  
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
      }

方案2：定位 + tramsform

子绝父相：子盒子相对父盒子向下和向右走父盒子宽度的50%；然后在通过translate返回走自身的50%

      .father {
        width: 100%;
        height: 600px;
        background-color: #f5f5f5;
        position: relative;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

方案3：定位 + margin

子绝父相：但是top/bottom/left/right都为0；通过margin:auto使其居中

      .father {
        width: 100%;
        height: 600px;
        background-color: #f5f5f5;
        position: relative;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }

左侧固定宽度，右侧自适应

    <div class="content">
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>

方法1：float+overflow

      .content {
        height: 300px;
        width: 100%;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        float: left;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        overflow: hidden;
      }

方法2：float+calc

宽度是通过calc来定，位置通过浮动的特点

      .content {
        height: 300px;
        width: 100%;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        float: left;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        width: calc(100% - 200px);
        float: left;
      }

方法3：inline-block + calc

inline-block,两个盒子的宽度刚好为100%，右边calc动态变化宽度

      .content {
        height: 300px;
        width: 100%;
        font-size: 0;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        display: inline-block;
        vertical-align: top;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        width: calc(100% - 200px);
        display: inline-block;
        vertical-align: top;
      }

方法4：flex

flex:1 剩下宽度的都分给右边的盒子

      .content {
        display: flex;
        height: 300px;
        width: 100%;
      }
      .left {
        height: 100%;
        width: 200px;
        background-color: pink;
      }
      .right {
        flex: 1;
        background-color: skyblue;
      }

方法5：position+margin

左边脱离标准流不占位，右边宽度正好利用块级盒子的特点，margin不仅让盒子流出左边空白，宽度页刚好减去了margin值

      .content {
        height: 300px;
        width: 100%;
        position: relative;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        position: absolute;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        margin-left: 200px;
      }

原网站

版权声明
本文为[bug丸]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_50576800/article/details/126275286