HTML/CSS面试准备笔记

• 实现垂直/水平方向居中

  • 利用定位

    • position:absolute
      top:50%
      left:50%
      margin-top:-(自身的高度一半)
      margin-left:-(自身的宽度一半)
      

  • 利用margin:auto

  • 利用display:table-cell

  • 利用display:flex;设置垂直水平剧中

    • //父盒子设置
      display:flex;
      justify-content:center
      align-items:center
      

  • 垂直居中img

    • {
          display:table-cell;
          text-alilgn:center;
          vertical-align:middle;
      }
      

• 实现圣杯布局

  • 利用定位
  • 利用flex布局
    • 父盒子设置display:flex
    • 左右盒子设置固定宽度
    • 中间盒子设置flex:1