display 有哪些值？ 以及他们的具体使用场景。
- block 块类型，默认宽度为父元素宽度，可设置宽高，换行显示。
- none 元素不显示，并从文档流中移除。
- inline 行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示。
- inline-block 默认宽度为内容宽度，可设置宽高，同行显示。
- list-item 像块类型元素一样显示，并添加样式列表标记。
- table 此元素会作为块级表格来显示。
- inherit 规定应该从父元素继承display属性的值。
CSS盒模型
CSS 盒模型包含两种盒子模型
- IE盒模型 （class标识符：border-box）
- W3C 标准盒模型（class标识符：content-box）
一个盒子的模型包含以下四个部分
- 内容（content）
- 填充（padding）
- 边界（margin）
- 边框（border）
那么究竟标准盒模型和W3C盒模型有什么区别呢？
- W3C标准盒模型：属性
width，height只包含内容content，不包含border和padding - IE盒模型：属性
width，height包含content、border和padding，指的是content +padding+border
在浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。
在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
清除浮动
-
使用带 clear 属性的空元素在浮动元素后使用一个空元素，如
<div class="clear"></div>, 并在 CSS 中赋予.clear{ clear:both; }属性, 即可清理浮动。亦可使用<br class="clear"/> 或 <hr class="clear"/>来进行清理。 -
使用 CSS 的 overflow 属性 给浮动元素的容器添加
overflow: hidden;或overflow: auto;可以清除浮动，另外在IE6中还需要出发hasLayout, 例如为父元素设置容器宽高或设置zoom: 1。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起， 达到了清理浮动的效果。
-
给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使 其整体浮动，影响布局，不推荐使用。
-
使用邻接元素处理 什么都不做，给浮动元素后面的元素添加 clear 属性。
-
使用 CSS 的 :after 伪元素 结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后 最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里 的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末 尾添加一个看不见的块元素（Block element）清理浮动。
子元素如何在父元素中居中
- 水平居中
- 子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置 浮动，否则居中失效
- 子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效
- 水平垂直居中
-
子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素 margin-top 和 margin-left 减去各自宽高的一半
-
子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin：auto
-
父元素设置 display：table-cell vertical-align：middle，子元素设置 margin：auto
-
子元素相对定位，子元素 top，left 值为 50%，transform：translate （-50%，-50%）
-
子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform： translate（-50%，-50%）
-
父元素设置弹性盒子， display：flex； justfy-content：center ；align-items：center； justfy-content：center
