描述BFC（块格式化上下文）及其工作原理。
BFC 即 Block Formatting Contexts (块级格式化上下文),BFS可以看作是隔离了的独立容器，容器里面的子元素不会影响到外面的元素。
触发条件
只要元素满足下面任一条件即可触发 BFC 特性：
1.body 根元素
2.浮动元素：float 除 none 以外的值
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
常见问题
1. 同一个 BFC 下上下外边距会发生重叠
2. 元素浮动后父元素高度塌陷
3. 元素被浮动元素覆盖
描述z-index以及如何形成堆叠上下文，堆叠规则。
z-index用来控制元素重叠时堆叠顺序。
适用于：已经定位的元素（即position:relative/absolute/fixed）。
Z-index属性，用于定义使用position: relative; or position: absolute;”.定位的的 HTML 元素的显示顺序"位置：
你设定的Z-index的值并不重要，但相对于其他元素的 Z -index的值将定义哪个元素显示在顶部。
子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。（只能在同一作用域内比较）
例如有一个定位的大盒子包含3个小的子盒子，最后一个盒子里面又包含3个子盒子，最后一个盒子里的z-index不会影响外面3个盒子的堆叠顺序。
z-index 是建立在什么基础？
定位的基础
定位哪几种？
清除浮动
- clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}（"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。）
2 .在结尾处添加空div标签clear:both - 父元素overflower：hidden（BFC原理）
你熟悉SVG的格式？
你能举出一个@media除了以外的财产的例子screen吗？媒体查询怎么写？
media 单词不会
大概描述一下媒体查询
使用CSS预处理器有哪些优点/缺点？
LESS/SASS优点：
开发速度提升；
代码优化效率提高（对开发者而言）；
代码更通俗易懂（对开发者而言）；
维护简单便捷；
代码更干净，优美；
功能更多更强，CSS做出JS的特效（其实就是JS）；
总而言之，LESS/SASS就是CSS里面的jQuery，简化，减少开发时间，提升开发者开发体验。
LESS/SASS缺点：
舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；
舍弃网页打开速度换取开发效率提升；
需要一个学习的过程，用之不当反而弄巧反拙；
总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）
你在CSS工序加了一个步骤，速度自然慢，时间自然多了。
描述伪元素并讨论它们的用途？
解释您对盒子模型的理解，以及如何告诉CSS中的浏览器在不同的盒子模型中渲染您的布局。
分为 标准盒子模型 和 IE盒子模型，最根本的区别就是 IE盒子模型的content包含border和padding，标准盒子模型的width只是content。
怎么* { box-sizing: border-box; }是什么？它的优点是什么？
设置box-sizing:border-box以后，如果想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。当再设置它的左右边框和左右补白后，它的内容区会自动调整（向里缩进）。
内联元素 和 行内块的区别
块级元素(block)特性：
display: block--总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
行内元素
display: inline--宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
行内块
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
nth-child 是做什么的？ 怎么用？
nth-child
您是否使用过新的CSS Flexbox？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
以下6个属性设置在容器上：
flex-direction 容器内项目的排列方向(默认横向排列)
flex-wrap 容器内项目换行方式
flex-flow 以上两个属性的简写方式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
您能否解释一下将网站编码为响应式与使用移动优先策略之间的区别？
设计原则
关于响应式设计，有渐进增加和优雅降级两个设计原则
渐进增强(progressive enhancement)，是指基本需求得到满足、实现，再根据不同浏览器及不同分辨率设备的特点，利用高级浏览器下的新特性提供更好的体验。比如，圆角、阴影、动画等
优雅降级(graceful degradation)则正好相反，现有功能已经开发完备，但需要向下兼容版本和不支持该功能的浏览器。虽然兼容性方案的体验不如常规方案，但保证了功能可用性
移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时，首先考虑的是移动设备的使用场景，默认查询的是最窄的情况，再依次考虑设备屏幕逐渐变宽的情况
由简入繁易，由繁入简难。如果是桌面优先，布局端是桌面端代码，只有在media中，才是手机端代码，加载了多余的桌面端代码。如果是图片文件，则下载的无用资源更多
无论从界面设计还是代码执行效率的角度而言，移动优先都有明显优势
响应式设计包括三个要素：弹性布局、媒体查询和弹性图片
什么是移动端端优先？
手机的使用量大于电脑
脱离标准流方法？
定位 （相对定位不会脱离文档流）
浮动
什么是标准流？
也被称为文档流，是指在不借助任何特殊的css排列规则元素的排布规则
什么是MVVM?
在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。