css面试

自适应布局

BFC的作用：消除Margin Collapse 容纳浮动元素 阻止文本换行

1. 双飞翼布局

    .l{
      background: #000;
      height: 300px;
      float: left;
      width: 200px;
    }
    .r{
      background: pink;
      height: 200px;
      float: right;
      width: 200px;
    }
    .c{
      background: #fff;
      height: 500px;
      overflow: hidden;
    }

2. 居中

 /* 利用定位 */
.header {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: pink;
      height: 80px;
      width: 80px;
      margin: auto;
    }

 /* flex */
    body,html {
      height: 100%;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .header {
      background: pink;
      height: 80px;
      width: 80px;
    }
    
 /* css3 */
   .header {
     position: absolute;
     left: 50%;
     top: 50%;
     background: #000;
     height: 500px;
     width: 500px;
     transform: translateY(-50%) translateX(-50%)
   }

3. 使用rem

兼容

1. ie6下的div容器会默认有一个高度。 解决方法：font-size: 0或者overflow: hidden;
2. ie6双边距：display: inline
3. 带链接的图片解析出边框，border设为none
4. 插入图片默认向下撑大3px，display: block;
5. 图片垂直水平居中 img+span

    div {
      height: 500px;
      width: 400px;
      text-align: center;
      border: 1px solid #000;
      margin: 20px auto;
    }
    /* 关键代码 */
    img {
      vertical-align: middle;
    }
    /* 关键代码 */
    span {
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

6. 内容少居中，多右对齐 div>p

   div {
     text-align: center;
   }
   p {
     display: inline-block;
     text-align: left;
   }

7. 移动端1px问题，通过加after设置高为1缩放。
8. 怪异盒模型