1. CSS实现垂直水平居中HTML结构：<div class="wrapper"><div class="content"></div></div>CSS：.wrapper{position:relative;}.content{background-color:#6699FF;width:200px;height:200px;position: absolute; //父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ; //二分之一的height，widthmargin-left: -100px;}2.display有哪些值？说明他们的作用。
block 块类型。
默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。
象行内元素类型一样显示。
inline 行内元素类型。
默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display 属性的值。
3.position有哪些值？说明他们的作用。
absolute 生成绝对定位的元素，相对于(static 定位以外的)第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位(老IE不支持)。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认。
没有定位，元素出现在正常的流中(忽略top, bottom, left, right z-index声明) inherit 从父元素继承position 属性的值。
4.行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS的盒子模型？行内元素: a、b、span、img、input、strong、select、label、em、button、textarea块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素: 即系没有内容的HTML元素，例如：br、meta、hr、link、input、img盒子模型:1) 在网页中，一个元素占有空间的大小由几个部分构成。
2) 其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。
3) 这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。
4) 4个部分一起构成css中元素盒子模型。
(IE的content部分包含了border和padding)5.CSS引入的方式有哪些? link和@import的区别是?内嵌: 在html文档的head部分直接写入css内联: 即行内样式，直接在html标签里写入对这个标签的css控制外链: 在html文档的head部分添加<link>标签导入: 使用@import导入区别:Link 属于XHTML标签,写在html页面中,与页面同时加载支持使用javascript改变样式无兼容性@import 由css提供,写在CSS页面中,等到页面被加载完再加载不支持CSS2.1以下浏览器不支持6.CSS选择符有哪些?哪些属性可以继承?优先级算法?内联和important哪个优先级高?CSS选择符: ID选择器、类选择器、标签名选择器、后代选择器(派生选择器)、群组选择器除ID选择器外都是可以继承优先级算法: 标签内直接定义(1000) > ID选择器(100) > 类选择器(10) > 标签名选择器(1)(如果权重相同，则最后定义的会起作用，但应避免这种情况出现)内联和important中，important优先级高CSS3新增伪类举例：p:first-of-type p:last-of-type p:only-of-typep:only-child p:nth-child(2) :enabled, :disabled :checked7.CSS清除浮动的几种方法（至少两种）使用带clear属性的空元素clear:both（理论上能清除任何标签，增加无意义的标签）使用CSS的overflow属性overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）使用CSS的:after伪元素(用于非IE浏览器)使用邻接元素处理8.CSS居中（包括水平居中和垂直居中）内联元素居中方案水平居中设置：(1)行内元素设置text-align: center(2)Flex布局设置display: flex; justify-content: center; (灵活运用,支持Chroime，Firefox，IE9+)垂直居中设置：(1)父元素高度确定的单行文本（内联元素）设置height = line-height；(2)父元素高度确定的多行文本（内联元素）方法一：插入table且vertical-align: middle方法二：display: table-cell; vertical-align: middle块级元素居中方案水平居中设置：(1)定宽块状元素设置左右margin值为auto(2)不定宽块状元素一：给该元素设置displa: inine二：父元素position: relative；left: 50% 子元素position: relative；left: 50%；三：在元素外使用表格,该元素写在td内，然后设置margin: auto 垂直居中设置：1使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;2利用position:fixed（absolute）属性，margin: auto3利用display: table-cell属性使内容垂直居中;4使用css3的新属性transform: translate(x,y)属性;5使用:before元素;9.css盒模型，可能会要求手写一个布局，这个布局基本上用到的css是margin的负值，boxing-sizing：border-box，布局尽量往这方面想。
浏览器布局的基本元素是盒，在w3c的标准模式下，width=width，但是在怪异模式下，width=border*2+padding*2+width其中后代元素的width:100% 参照的是右边的那个width。
10.px和em的区别px和em都是长度单位px的值是固定的，指定是多少就是多少，较易计算。
em得值是非固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。
所以未经调整的浏览器都符合: 1em=16px, 0.75em=12px, 0.625em=10px11.CSS3 box-sizing的作用设置CSS盒模型为标准模型或IE模型。
标准模型的宽度只包括content，二IE模型包括border和paddingbox-sizing属性可以为三个值之一：content-box，默认值，border和padding不计算入width之内padding-box，padding计算入width内border-box，border和padding计算入width之内12.如何快速合并雪碧图Gulp：gulp-css-spriterwebpack：optimize-css-assets-webpack-pluginGo！Png在线工具13.响应式图片(1)JS或者服务端硬编码，resize事件，判断屏幕大小加载不同的图片(2)img srcset 方法(3)picture标签-> source(4)svg(5)第三方库polyfill14.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}15.描述css reset的作用和用途。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一16.页面重构怎么操作？编写CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
17.解释css sprites，如何使用。
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量18.浏览器标准模式和怪异模式之间的区别是什么?盒子模型渲染模式的不同使用patMode 可显示为什么模式19.absolute的containing block计算方式跟正常流有什么不同？20.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？21.BFC相关问题块级格式化上下文(Block formatting context)是一个独立的渲染区域，只有Block-level box 参与它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干BFC的渲染规则BFC这个元素的垂直方向的边距会发生重叠BFC的区域不会与浮动元素的box重叠（清除浮动原理）BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素计算BFC的高度的时候，浮动元素也会参与计算如何创建BFC？overflow属性不为visiblefloat属性不为noneposition属性为absolute或fixeddisplay属性为inline-block、table-cell、table-caption、flex、inline-flex BFC的常用场景: 解决边距重叠21.如何优化图像、图像格式的区别？重要性: 节省带宽, 对于同时访问该网站的用户, 还是网站运营本身来说, 都将减少开销选择图像文件格式应该在透明度、色深、压缩率三者之间权衡:如颜色色彩丰富且无需透明度支持, 选择jgp。
如需透明度支持, 首先排除jpg有损压缩与无损压缩无损压缩是对文件本身的压缩, 是对文件的数据存储方式进行优化, 文件可以完全还原, 不影响文件内容有损压缩是对图像本身的改变, 在保存图像时保留了较多的亮度信息, 而将色相和色纯度的信息和周围的像素进行合并, 由于信息量减少了, 所以压缩比可以很高, 图像质量也会相应的下降。