1.BFC [面试题]
    概念：是块级格式化上下文。是一个独立的区域,区域与区域之间不会互相影响。
    触发、创建BFC：
    1.浮动
    2.overflow的值不为默认值visible的时候
    3.绝对定位和固定定位。
    4.display的值为 inline-block | flex | inline-flex;
    应用：
    1.解决margin的塌陷和粘连问题
    2.解决浮动带来的问题。
    3.实现两列的自适应布局。
    两列布局： 左边设置尺寸和固定宽度 + float:left；
    右边不要设置宽度 + overflow:hidden;

    2.宽高自适应
    自适应：不同的终端都能显示比较正常的效果。
    响应式：一套代码适配多个终端。
    原理：利用媒体查询
    关键字： @media

    1.宽度自适应
    1.不设置宽度
    2.使用百分比
    3.使用最大最小宽度
    min-width:px; 设置最小宽度
    max-width:    px; 设置最大宽度

    给body设置最小宽度 min-width为版心的宽度;

    2.高度自适应
    1.不设置高度
    如果子元素浮动了，会脱离文档流，导致该元素没有内容，就不会有高度—高度塌陷
    清除浮动/高度塌陷的解决方案：
    方式1：
    1.给浮动元素最后面添加一个空的兄弟元素div
    2.添加类名clear
    3.设置样式 .clear{ clear:both; } [该div必须是空的，不能有内容和其他的任何样式]

    方式2：
    1.给浮动元素的父亲添加类名clearfix
    2.设置样式
    .clearfix:after{
    display:block; 设置为块级元素
    content:’’; 设置元素的内容为空
    clear:both; 清除浮动
    height:0; 解决低版本的兼容
    }
    .clearfix{ zoom:1; } 在IE6里面清除浮动的代码

    方式3：
    1.给父元素添加样式 overflow:hidden;

    推荐使用方式2.

    2.使用百分比
    注意如果要实现一屏页面，必须 html,body{ height:100%;width:100%; }

    3.使用最大最小高度
    min-height:px; 设置最小高度
    max-height:    px; 设置最大高度

    3.伪元素
    e:before{ content:’要添加的内容’ } 在e元素的内容之前添加内容
    e:after { content:’要添加的内容’ } 在e元素的内容之后添加内容

    伪类和伪元素的区别： 【面试题】
    伪类是一种临时状态，只有状态触发的时候生效。伪元素是一个假的元素，是一个虚拟的dom节点。
    伪类使用单冒号，伪元素使用双冒号。

    1. **其他伪元素选择器**<br />        ::placeholder      给占位符设置样式<br />        ::selection        给鼠标选中的文字设置样式<br />        ::first-letter     第一个字符<br />        ::first-line       第一行