CSS解析盒模型包括content，padding，border，margin。IE盒模型把content+paddin

两种盒模型

IE 盒模型
W3C 盒模型

盒模型包括content，padding，border，margin。IE盒模型把content+padding+border作为宽高，而W3C盒模型将content作为width和height。

其中border-box更好一些，因为这种设计更符合直觉，即box的宽高应该是content+padding+border，这样更利于控制组件大小，可以使用box-sizing:border-box来统一

垂直居中的方法

<table class="parent">
    <tr>
      <td class="child">
      我在中间
      </td>
    </tr>
  </table>
  
  //CSS
  //1.table自带方法
  .parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
}
  //2.负margin
  .parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}
// 3.transform：translate
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
//4.absolute margin auto
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
//5.flex
.parent{
  height: 600px;
  border: 3px solid red;
  display: flex;
  justify-content: center;// 控制水平居中
  align-items: center; // 控制垂直居中
}
.child{
  border: 3px solid green;
  width: 300px;
}

flex常用属性

主轴由 flex-direction 定义，可以取4个值row，row-reverse，column，column-reverse

flex容器里的元素会挤成一行，因为默认的flex-wrap=nowrap

上面两个属性可以简写为flex-flow，第一个值为direction，第二个为wrap

flex-grow=1可以让元素占满剩余的内容

align-items控制垂直方向上的对齐，一般为center justify-content控制水平方向上的对齐，一般为center，space-between，space-around等

BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

创建块格式化上下文的方法：

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

CSS 选择器优先级

权值越高优先级越高：

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

当权值相等时，后出现的样式表设置要优于先出现的样式表设置

简单来说就是越具体，优先级越高；相同优先级的后面覆盖前面；!important优先级最高，但是少用

清除浮动方法

1.在有浮动的父级元素的末尾插入了一个没有内容的块级元素div：

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

//CSS中加上：
.blankDiv {
    clear: both; 
}

2.伪元素

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

//CSS中加上：
 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

伪元素也是在clearfix，也就即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。两种方法的本质是一样的