CSS面试常问的题型

1. 左边定宽，右边自适应方案：

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

2. 左右两边定宽，中间自适应

  .wrap {
      width: 100%;
      height: 200px;
  }
  /*这里涉及到一个知识点, > 是子类选择器
  下面是有关子类选择器的教程
  （http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp）
  */
  .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{
      width:120px;
      float:right;  
    }
  .center{
      width:calc(100% - 240px);
      margin-left:120px;
  }
  /*方案3*/
  .wrap{
      display:flex;
   }
  .left{
      width:120px;
  }
  .right{
      width:120px;
  }
  /*要注意的一点是flex 是 flex-grow、flex-sharink、flex-basis的缩写
  具体详细解释（ https://blog.csdn.net/aliven1/article/details/78853725 ）
  */
  .center{
      flex:1;
  }

3. 左右居中

• 行内元素：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;
   }  
    /*方案3*/
   .wrap{
      position:relative;
   }
   .center{
      position:absolute;
      left:50%;
      transform:translateX(-50%);  /*元素往左位移自身宽度50%的距离*/
   }

4. 上下垂直居中：

• 不定高：position + transform、flex、IFC + vertical-align:middle

  /*不定高方案1*/
  .center{
     display:flex;
     align-items:center;
  }
  /*不定高方案2*/
  .center{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
   }
   /*不定高方案3*/
   /*设置inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
   ......未完待续（2019.03.21 12:35）