什么是BFC
BFC直译过来就是块级格式化上下文 其实就是一个独立布局环境，并且有着自己的一套渲染规则，里面的元素布局是不受外界的影响的，反之
要怎么创建BFC display是flex inline-block overflow的值不是 visible
具体有什么作用呢 比如 很常见的 margin重叠问题 ，父元素高度塌陷，还可以使用BFC来使用两栏布局
弹性元素flex =1 是什么意思
弹性元素felx 一共有三个值 flex-grow flex-shrink flex-basis 当只有一个值的时候 且没有单位，就代表的是 flex-grow
两个值且没有单位 就是 伸和缩，如果其中有一个有单位 就是 grow和basis
两栏布局 和 三栏布局
两栏布局：左边固定 右边自适应 可以使用 flex 布局，margin ，float等
三栏布局：两侧固定，中间自适应 可以使用 flex 浮动 圣杯布局 双飞翼布局 绝对定位
link 和 import
link 是HTML提供的标签，可以加载 css 外部文件 还有ref属性 import标签是只能在 css里面引入css 是css提供的语法
在加载页面的时候，link标签是同时加载的，而import标签是在页面加载完毕后被加载
盒模型 box-sizing
什么盒模型 ：每个页面就是一个个盒子构成的 ，每个HTMl元素都可以看做成一个盒模型
盒模型的组成包括 margin border padding content
盒模型还分 标准盒模型 和 IE盒模型
这两种模型 有一个很大的区别就是 content内容区域的 标准盒模型 width 就等于 content 而IE盒模型 是padding + border + content 等于 width的大小
在css当中我们可以使用 box-sizing来设置盒模型，默认值就是 标准盒模型 content-box 使用 border-box就是设置 的IE盒模型
CSS选择器 优先级
!impotent 内联 id class-伪类 标签-伪元素
em rem % vw vh
em： 相对单位，会继承父元素的font-size ，如果自身定义了 font-size就会按照自身的来计算，这样会导致页面上所有的 1em都不一样
rem：看根元素 html 的 font-size 的大小
vw vh :视口宽度 视口高度 1vw等于1
响应式与自适应页面
两者都是优化适应互联网中越来越分化的视口浏览体验，而出现的为视口提供更好的体验的技术。用技术来使页面适应不同分辨率的视口的设计。
响应式：我们只需要同一套网站去兼容多个终端设备，一般可以使用 媒体查询，也可以使用 bootstrap 下的栅格布局
自适应：就是每个终端需要不同的一套网站，如果更新的话就比较繁琐，
什么是预处理器
css相对于很简单，但是代码不容易维护，不利于复用，所以预处理器就是来解决这些问题，预处理器扩充了css 可以使用变量，混合，函数等功能，
预处理都有这自己的规则和解析器，，这些规则都会通过解析器形成对应的css文件
常见的 预处理器有 less sass stylus
