CSS相关

1.两种盒模型

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

• 标准盒模型
  box-sizing: content-box

W3C的标准盒模型

宽高是content的宽高

• IE盒模型
  box-sizing:border-box

IE的盒模型

宽高是内容(content)+填充(padding)+边框(border)的总宽高

平时喜欢用border box，因为更好用

2.如何垂直居中

• 水平居中

  • 内联：爸爸身上写 text-align:center;
  • 块级：margin-left: auto; margin-right: auto;

• 如果 .parent 的 height 不写死
  .child上加padding: 10px 0就可以垂直居中

• 如果 .parent 的 height 写死

  1. table自带功能

  <table class="parent>
      <tr>
        <td class="child">文字文字文字</td>
      </tr>
  </table>
  

  2. 100%高度的after before 加上 inline-block

    <div class="parent">
      <div class="child">
        文字文字文字文字
      </div>
    </div>
  
  .parent{
      height: 600px;
      text-align: center;
  }
  .child{
    display: inline-block;
    width: 300px;
    vertical-align: middle;
  }
  .parent:before{
      content: ' ';
      outline: 3px solid red;
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  .parent:after{
    content: ' ';
    outline: 3px solid red;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  

  3. 绝对定位+top：50%

     <div class="parent">
       <div class="child">
         文字文字文字文字
       </div>
     </div>
  
     .parent{
       height: 600px;
       position: relative;
     }
     //第一种写法
     .child{
       position: absolute;
       width: 300px;
       height: 100px;
       top: 50%;
       left: 50%;
       margin-left: -150px;
       margin-top: -50px;
     }
     //第二种写法
    .child{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%)
     }
  

  4. absolute+margin:auto

  .parent{
      height: 600px;
      position: relative;
  }
  .child{
      position: absolute;
      width:300px;
      height: 200px;
      margin: auto;
      top: 0;
      left: 0;
      left: 0;
      bottom: 0;
  }
  

  5. flex布局

3.flex（弹性盒子）用法、常用属性

flex布局就是将flex item（弹性项目）放置在flex container（弹性容器）中display: flex;，通过在container或item上添加属性来非常容易的改变布局。

1. 容器属性

• flex-direction
  row ————————从main axis的左端开始排列
  row-reverse ————从main axis的右端开始排列
  column ——————从cross axis的上方排列
  column-reverse———从cross axis的下方排列
• flex-wrap
  nowrap ——————不换行
  wrap ———————第一行在上方
  wrap-reverse ————第一行在下方
• flex-flow
  flex-direction和flex-wrap和集合
• justify-content
  flex-start ——————左对齐
  flex-end ——————右对齐
  center ———————居中
  space-between ———两端对齐
  space-around ———分散对齐
• align-items
  flex-start ——————下方对齐
  flex-end ———————上方对齐
  center ————————中点对齐
  baseline ———————第一行文字的基线对齐
  stretch————————默认，布满整个容器高度

2. 项目属性

• flex-grow
  处理flex元素在主轴上增加空间的问题
  flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸

• flex-shrink
  处理flex元素收缩的问题
  如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下

• flex-basis
  flex-basis 定义了该元素的布局空白（available space）的基准值
  如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸

• flex
  flex-grow, flex-shrink 和 flex-basis的合集

4.BFC是什么

块格式化上下文
下列方式会创建块格式化上下文：

• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（display：inline-block）
• overflow 值不为 visible 的块元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

1. 用BFC包住浮动元素

这样爸爸会包不住儿子，如果把爸爸变成BFC就可以了
.baba{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; //把爸爸变成BFC
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

2. 用 float + div 做左右自适应布局

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
   display: flow-root; //将弟弟变成BFC
}

5.CSS选择器优先级

• 越具体优先级越高
• 同样优先级写在后面的覆盖写在前面的
• !important 优先级最高，但是要少用

1.  内联样式表的权值最高 1000；
2.  ID 选择器的权值为 100
3.  Class 类选择器的权值为 10
4.  HTML 标签选择器的权值为 1

6. 清除浮动

.clearfix:after{
  content: ' ';
  display:block;
  clear: both;
}
.clearfix{
    zoom: 1;  //  IE兼容
}