1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
*使用box-sizing:border-box||content-box(默认) ||inherit;来切换盒子模型，border-box在移动端开发中很实用。*box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。div{ //兼容性写法; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left;} 
2、css属性继承？（大致都能说出来几个）
*不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。*所有元素可继承：visibility和cursor。*内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。*终端块状元素可继承：text-indent和text-align。*列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。*表格元素可继承：border-collapse。 *font属性书写格式(仅css1)font : font-style font-variant font-weight font-size line-height font-family;*font属性默认值font: normal normal normal medium normal "Times New Roman" ;
3、CSS优先级算法如何计算？
css优先级计算完整版原则一： 继承不如指定原则二： #id > .class > 标签选择符原则三：越具体越强大，计算的值越大，越强大。CSS优先级权重计算法：CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!根据这四个级别出现的次数计算得到CSS的优先级。CSS优先级的计算规则如下：* 元素标签中定义的样式（Style属性，内嵌样式1000）,加1,0,0,0* 每个ID选择符(如 #id，100),加0,1,0,0* 每个Class选择符(如 .class，10)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0* 每个元素选择符（如p，1）或伪元素选择符(如 :firstchild)等，加0,0,0,1,属性选择符然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。注意：1、!important声明的样式优先级最高，如果冲突再进行计算。2、如果优先级相同，则选择最后出现的样式。3、继承得到的样式的优先级最低。!important>内嵌样式(style)>id选择器>class=属性选择符=伪类选择符>tag
4、display有哪些值？说明他们的作用。 position的值relative和absolute定位原点是？
display 的常用值的作用： 1.none;用于隐藏元素，不占位置。区别于visibility:hidden;不可见但是占位置。2.block; 象块类型元素一样显示。用于显示元素，或设置为块元素。与visibility:visible(默认值);元素是可见的。3.inline;缺省值。象行内元素类型一样显示。4.inline-block;象行内元素一样显示，但其内容象块类型元素一样显示。多用于相同div做切换选项卡的时候，子元素上设置为inline -block;5.list-item; 象块类型元素一样显示，并添加样式列表标记。6.table;此元素会作为块级表格来显示（类似
5、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
6、常见兼容性问题？能说出几种情况。
常见css浏览器兼容性问题1、不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *{ margin:0;padding:0;}备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。3、设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度碰到频率：60%解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。4、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug问题症状：IE6里的间距比超过设置的间距碰到几率：20%解决方案：在display:block;后面加入display:inline;display:table;备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。5、图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。碰到几率：20%解决方案：使用float属性为img布局备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）6、标签最低高度设置min-height不兼容问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到几率：5%解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{ min-height:200px; height:auto !important; height:200px; overflow:visible;}备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。7、透明度的兼容CSS设置/* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）◆IE6认识的hacker 是下划线_ 和星号 *◆IE7 遨游认识的hacker是星号 *比如这样一个CSS设置：height:300px;*height:200px;_height:100px; IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。 7、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
原因是由于，这中间是有一个空格元素的，应该很多的地方都存在这个空格。
解决方法：在ul标签中设置font-size=0,在li中设置标签文字的大小；因为空格也属于字符，把字符大小设为0，就没有空格了。（空格继承了字体大小，所以li元素需要设置字体大小）nice。
8、常用hack的技巧？
9、对BFC规范(块级格式化上下文：block formatting context)的理解？
主要内容Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；run-in box: css3 中才有， 这儿先不讲了。Formatting contextFormatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible
10、浮动与清除浮动？比较好的处理方式？
11、CSS优化、提高性能的方法有哪些？
12、浏览器是怎样解析CSS选择器的？
1、首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。2、CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。3、从右向左的规则要比从左向右的高效，浏览器采用从右往左的方式进行匹配。right -to-left 这样做是为了使规则能够快、准、狠地与render树上的节点匹配，通俗地将就是 就近原则。
13、元素竖向的百分比设定是相对于容器的高度吗？我是不会这么傻逼的用这种属性还用百分比来表示。
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的， 但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
14、::before 和 :after中双冒号和单冒号。
:after;用于表示伪类，选择器用。::after;用于表示伪元素，在元素前后插入内容。例如：.parent:after{}/*表示选中元素选择器之后的同级元素*/.parent::after{ content:"";display:block;height:0;visibility:hidden;clear:both;font-size:0;} .parent{ zoom:1;} 用于清除浮动。伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。首先，阅读 w3c 对两者的定义：CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 常见的伪类：（借用别人的图片）
伪元素种类：
伪类偏向于元素的动作行为，伪元素偏向于元素的属性。实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，
还是用CSS2的单冒号写法比较安全（单冒号表示）。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。
15、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
使用position定位来适应高度，设置position:absolute;注意父元素要设置position:relative;
上下
16、cookie隔离技术。
cookie：一个域名之下，每次请求资源都要带上cookie发到后台。cookie隔离技术和传统的多域名拆分请求，提高浏览器并发请求数有点类似，均是采用多域名来处理请求。传统做法是将css，js，图片等静态文件放在多个域名下面请求，这样就可以跨过浏览器对统一主机名并发连接数的限制，提高整体并发请求量。 cookie隔离技术则是通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入webserver，也减少了webserver对cookie的处理分析环节，提高了webserver的http请求的解析速度。 kevintang给出的测试结果是： 在做腾讯网加速的时候，启用了两个非qq.com的新域名，mat1.gtimg.com和img1.gtimg.com， 隔离前10个cookie，185字节，约4KB，存在请求延时现象，隔离后无cookie，图片服务器速度由原来0.63秒提升到0.43秒，速度提升32%。