CSS相关布局小知识

忘是亡心i 2023-07-16 08:57 4阅读 0赞

## CSS相关布局小知识 ##

### 左边定宽，右边自适应方案：float + margin，float + calc ###

/* 方案1 */ 
    .left { 
      width: 120px;
      float: left;
    }
    .right { 
      margin-left: 120px;
    }
    /* 方案2 */ 
    .left { 
      width: 120px;
      float: left;
    }
    .right { 
      width: calc(100% - 120px);
      float: left;
    }

### 左右两边定宽，中间自适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex ###

.wrap { 
      width: 100%;
      height: 200px;
    }
    .wrap > div { 
      height: 100%;
    }
    /* 方案1 */
    .left { 
      width: 120px;
      float: left;
    }
    .right { 
      float: right;
      width: 120px;
    }
    .center { 
      margin: 0 120px; 
    }
    /* 方案2 */
    .left { 
      width: 120px;
      float: left;
    }
    .right { 
      float: right;
      width: 120px;
    }
    .center { 
      width: calc(100% - 240px);
      margin-left: 120px;
    }
    /* 方案3 */
    .wrap { 
      display: flex;
    }
    .left { 
      width: 120px;
    }
    .right { 
      width: 120px;
    }
    .center { 
      flex: 1;
    }

### 左右居中 ###

*  行内元素: `text-align: center`
 *  定宽块状元素: 左右 `margin` 值为 `auto`
 *  不定宽块状元素: `table`布局，`position + transform`

/* 方案1 */
    .wrap { 
      text-align: center
    }
    .center { 
      display: inline;
      /* or */
      /* display: inline-block; */
    }
    /* 方案2 */
    .center { 
      width: 100px;
      margin: 0 auto;
    }
    /* 方案2 */
    .wrap { 
      position: relative;
    }
    .center { 
      position: absulote;
      left: 50%;
      transform: translateX(-50%);
    }

### 上下垂直居中 ###

*  定高：`margin`，`position + margin`(负值)
 *  不定高：`position` \+ `transform`，`flex`，`IFC + vertical-align:middle`

/* 定高方案1 */
    .center { 
      height: 100px;
      margin: 50px 0;   
    }
    /* 定高方案2 */
    .center { 
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -25px;
    }
    /* 不定高方案1 */
    .center { 
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    /* 不定高方案2 */
    .wrap { 
      display: flex;
      align-items: center;
    }
    .center { 
      width: 100%;
    }
    /* 不定高方案3 */
    /* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
    .wrap::before { 
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .wrap { 
      text-align: center;
    }
    .center { 
      display: inline-block;  
      vertical-align: middle;
    }

### 盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距） ###

*  `content-box`：默认值，总宽度 = `margin` \+ `border` \+ `padding` \+ `width`
 *  `border-box`：盒子宽度包含 `padding` 和 `border`，`总宽度 = margin + width`
 *  `inherit`：从父元素继承 `box-sizing` 属性

[个人博客地址:][Link 1]大家可以看看

[Link 1]: https://caoduoya.github.io/