css盒模型

css盒模型包括content，padding，border，margin。
两种盒模型的区别：
1.W3C盒模型 box-sizing：content-box的特点：通过css设置的宽高只是content的宽高
2.IE盒模型 box-sizing：border-box的特点：通过css设置的宽高是content+padding+border的宽高

六种实现元素水平居中方法

1. 固定宽度 + margin：0 auto
2. 父元素text-align：center
3. 绝对定位+负外边距（有宽度）
4. 绝对定位+transform：translate(-50%,-50%)（无宽度）
5. display：flex，justify-content：center

实现元素垂直居中方法

1. 行高等于高度
2. 绝对定位+负外边距（有高度）
3. 绝对定位+transform：translate(-50%,-50%)（无高度）
   4.父元素：display：flex，align-items：center
   5.父元素：display：flex，flex-direction：column，justify-content：center

如果盒子是浮动，父类没有高度，怎么解决？（清除浮动）

清除浮动的3种方法：

1. 父级元素添加overflow：hidden。
2. 伪元素清除浮动：

.clearfix:after{
  content:'';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  *zoom:1
  /*zoom 1 就是ie6 清除浮动方式  * ie7以下的版本才能识别 其他浏览器都不执行*/
}

3. 额外标签法:
   在需要清除浮动的元素后面添加一个空白标签，设置类名clear，设置clear：both即可。

为什么要初始化css

考虑到浏览器的兼容问题，不同浏览器的标签默认值是不同的，为了减少页面差异会初始化css，例如：全局设置margin和padding为0

当页面渲染时遇到css和js是如何渲染的

1. 根据html代码生成DOM树
2. 根据css代码生成CSSOM(css对象模型)
3. 整合开始渲染页面
4. 遇到script标签会暂停渲染，优先执行js代码，执行完继续渲染
   注意：一般把css放在head中，js放在body后面