1、盒子水平垂直局中的方法

flex 布局
/* html代码: */
    <div class="wrap">
       <div class="box">
       </div>
   </div>
				/* CSS代码： */
         .wrap{
             /* 设置为弹性布局 */
             display: flex;
             /* 子元素在主轴对齐方式为居中 */
             justify-content: center;
             /* 交叉轴在y轴对齐 */
             align-items: center;
         }

Position + Transform
 /* html代码: */
     <div class="wrap">
        <div class="box">
        </div>
    </div>
/* CSS代码： */
          .wrap{
              width: 600px;
              height: 600px;
              border: 2px solid black;
               /* 设置为相对定位，用来作为绝对定位元素的容器块。 */
              position: relative;
          }
          .box{
              width:50px;
              height: 50px;
              /* 设置为绝对定位，位置在父容器的中心 */
              position: absolute;
              margin: auto;
              left: 50%;
              top:50%;
              /* 向回移动自身一半的长宽 */
              transform: translateX(-50%) translateY(-50%);
          }
利用Position + margin:auto
<style>
   .father {
     margin: 100px auto;
     width: 500px;
     height: 300px;
     border: 1px solid #0a3b98;
     position: relative;
   }

    .son {
      width: 100px;
      height: 40px;
      background: #f0a238;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>
inline-block
 /* html代码: */
      <div class="wrap">
        <div class="box">
        </div>
    </div>
/* CSS代码： */
          .wrap{
              width: 600px;
              border: 2px solid black;
              /* 设置行高为600px */
              line-height: 600px;
              /* 让子盒子水平居中 */
              text-align: center;
          }
          .box{
              height: 50px;
              width: 50px;
              /* 设置为块级元素 */
              display: inline-block;
              /* 设置为垂直居中 */
              vertical-align: middle;
              background-color: red;
          }
table 布局
<style>
     .father {
         display: table-cell;
         width: 200px;
         height: 200px;
         background: skyblue;
         vertical-align: middle;
         text-align: center;
     }
      .son {
          display: inline-block;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
  <div class="father">
      <div class="son"></div>
  </div>
总结

根据元素标签的性质，可以分为：

  • 内联元素居中布局
  • 块级元素居中布局
内联元素居中布局

水平居中

  • 行内元素可设置：text-align: center
  • flex 布局设置父元素：display: flex ; justify-content: center

垂直居中

  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle
块级元素居中布局

水平居中

  • 定宽: margin: 0 auto
  • 绝对定位 + left:50% + margin: 负自身一半

垂直居中

  • position: absolute 设置 left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex (不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差

2、BFC（经典面试题）

概念：

Block Formatting Context,翻译过来就是块级格式化上下文

bfc 实际是一种属性，拥有这种属性后，就会让该渲染区域独立，并且该渲染区域中的内容布局不会影响到外界

如何触发:

  • 根元素(html)天然就会创建 BFC

  • float 属性不为 none

  • position 为 absolute 或 fixed

  • display 为 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不为 visible

解决什么问题

  • 外边距重叠
    • 外边距重叠,要注意这不是 bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会取最大值
  • 清除浮动
  • 当子盒子开启 float 后会影响后面的布局以及盒子高度
  • 浮动覆盖
    • 由于浮动导致盒子被覆盖

3、盒模型

盒模型主要分为 4 部分：内容、外边距、内边距、边框

Css3 盒子模型可以通过 box-sizing 来改变

标准盒模型（W3C 标准）：content-box 盒子实际宽度加上 padding 和 border

ie 盒模型/怪异盒模型/c3 盒模型：box-sizing: border-box; 设置 width 后，实际盒子的宽度就固定为该宽度，包含了 内容 + padding + border

4、flex：1

flex：1 → {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}
  • flex-grow:1
    • flex-grow 是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用 flex-grow 来设置子盒子增大的占比
  • flex-shrink: 1
    • flex-shrink 用来设置子盒子超过父盒子的宽度后，进行缩小的比例取值
  • flex-basis: 0%
    • 设置盒子的基准宽度，并且 basis 和 width 同时存在会把 width 干掉

5、c3 新属性

  • c3 盒模型 box-sizing
  • flex 布局
  • transition 过渡
  • transform2D 转换
  • background-size 背景缩放
  • border-radius 圆角
  • …….

6、清除浮动的方法

  • …….