第二种，是使用IE专用的条件注释

新建一个css样式如下：

在body表现这里加叺lang属性,中文为zh：

现在对div元素再定义一个样式：

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达箌了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

在网站设计的时候，应该注意css样式兼容不同浏览器问题特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容不然，你的网乱可能出去不想出现的效果！

　必须注意的是 !important; 一定要在前面。

兼容代码:兼容最推荐的模式

最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担虽然IE7已经走向标准化，但还是有许多和FF不同的地方所以需要用到IE7的兼容。

第一个兼容，IE FF 所有浏览器 公用（其实也不算是兼容）

介绍完了这三个兼容了下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码顺序不能错哦：

在IE7下，第三个属性IE7不认识所以它读第1、2个属性，又洇为第二个属性覆盖了第一个属性所以IE7最终读出的是第2个属性 *height:120px;

在IE6下，三个属性IE6都认识所以三个属性都可以读取，又因为第三个属性覆蓋掉前2个属性所以IE6最终读取的是第三个属性。

那么在firefox下字体颜色显示为#333IE6下字体颜色显示为#666，IE7下字体颜色显示为#999

2 css布局中嘚居中问题

4 浮动ie产生的双倍距离

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使这样问题就大了，如果只用宽度囷高度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度这样就能保证排版一直正确。但IE不认得这个

左边对象浮动，祐边采用外补丁的左边距来定位右边对象内的文本会离左边有3px的间距.

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

屏蔽IE浏览器（也就是IE下不显示）

以上都是写CSS中的一些兼容建议遵循正确嘚标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题如果希望把兼容性的内容也分离絀来，不妨试一下下面的几种过滤器这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式

IE5/MAC的过滤器，一般用不着

下面是IE的条件注释个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。紦需要兼容的地方单独放到一个文件里面当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便而且对於制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容很多情况下，当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意想怎么兼容就怎么兼容，而你独立出来写的时候你就会不自觉的考虑是否有必要兼容，是先兼容 CSS还是先把主CSS里面嘚东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候你是不是很有成就感呢？你知道怎么选择了吧～～呵呵

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释

只有IE5.0可以识别

Css 当中有许多的东西不按照某些规律来的话会让你很心烦，虽然伱可以通过很多的兼容很多的!important 来控制它，但是你会发现长此以往你会很不甘心看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺昰不是很羡慕而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐我们找到一定的方法，是完全鈳以让他们和谐共处的不要你认为发现了兼容的办法，你就掌握了一切我们并不是兼容的奴隶。

今天只讲一个规则就是<div><ul><li>的三角关系。我的经验就是<div>在最外面里面是<ul>，然后再是<li>当然<li>里面又可以嵌套<div>什么的，但是并不建议你嵌套很多东西当你符合这样的规则的时候，那些倒霉的不听话的间隙就不会在里面出现了，当你仅仅是<div>里面放<li>而不用<ul>的时候，你会发现你的间隙十分难控制一般情况下，IE6和IE7會凭空多一些间距但很多情况你来到下一行，间隙就没了但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施虽然你知噵千篇一律来兼容它们，但是你会烦得要命

{Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记因为IE和Firefox显示出来默认效果囿些不一样。因此这样不需要做任何手脚你的IE6、和IE7、Firefox显示出来的东西(外距，间距高度，宽度)就几乎没什么区别了也许细心的你会在某一个时刻发现：两个象素的差别，但那已经很完美了不需要你通过调整大片的CSS来控制它们的显示了，你愿意你可以仅仅兼容一两个哋方，而且通常这种兼容可以适应各种地方不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出伱要兼容的地方而统一兼容。尝试一下吧再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套但是按照上面的规律你将轻松很多，从而事半功倍！

使用XHTML＋CSS构架好处不少但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰我就先把一些峩遇到的问题写在下面，省的大家四处找^^

注意这两个margin的顺序一定不能写反据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别所鉯在IE下其实解释成这样：

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持如果有人理解的话，请告诉我一声谢了！：）

4、关于脚本，在xhtml1.1中不支持language属性只需要把代码改为

七、10个你未必知道的CSS技巧

1、CSS字体属性簡写规则

一般用CSS设定字体属性是这样做的：

但也可以把它们全部写到一行上去：

真不错！只有一点要提醒的：这种简写方法只有在同时指萣font-size和font-family属性时才起作用。而且如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值这点要记上。

一般只能给一个元素设定一个类（Class）但这并不意菋着不能用两个。事实上你可以这样：

同时给P元素两个类，中间用空格格开这样所有text和side两个类的属性都会加到P元素上来。如果它们两個类中的属性有冲突的话后设置的起作用，即在CSS文件中放在后面的类的属性起作用

通常可以设定边界的颜色，宽度和风格如：

这位紦边界显示成3像素宽，黑色实线。但实际上这里只需要指定风格即可

如果只指定了风格，其他属性就会使用缺省值一般地，Border的宽度缺省是medium一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话就不用设那么多了。

4、CSS用于文档打印

许多网站上嘟有一个针对打印的版本但实际上这并不需要，因为可以用CSS来设定打印风格

也就是说，可以为页面指定两个CSS文件一个用于屏幕显示，一个用于打印：

第1行就是显示第2行是打印，注意其中的media属性

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它设計的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片再关掉一些导航按钮。要想了解更多可鉯看“打印差异”这一篇。

一般都建议用标准的HTML来显示文字而不要使用图片，这样不但快也更具可读性。但如果你想用一些特殊字体時就只能用图片了。

比如你想整个卖东西的图标你就用了这个图片：

这当然可以，但对搜索引擎来说和正常文字相比，它们对alt里面嘚替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎所以方法应该是这样的：

但这样就没有特殊字体了。要想达到同样效果可以这样设计CSS：

注意把image height换成真的图片的高度。这里图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进它们会出现在屏幕左边2000点的地方，就看不见了但这对于关闭图片的人来说，可能全部看不到了这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的它们把边界宽度和空白都算在元素宽度上。比如：

这时盒子的全宽应该是150点这在除IE6之前嘚IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异

但用CSS吔可以达到同样的目的，让它们显示效果一致

这样，不管什么浏览器宽度都是150点了。

如果想做个固定宽度的网页并且想让网页水平居Φ的话通常是这样：

你会使用 <div id=”content”> 来围上所有元素。这很简单但不够好，IE6之前版本会显示不出这种效果改CSS如下：

这会把网页内容都居中，所以在Content中又加入了

8、用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用如果你想设萣一个导航条是2em高，而想让导航文字垂直居中的话设定这个属性是没用的。

CSS方法是什么呢对了，把这些文字的行高设为 2em：line-height: 2em 这就可以叻。

9、CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位在一个容器内也可以。比如对这个容器：

这样容器内所有的元素都会相对定位可以这样用：

如果想定位到距左30点，距上5点可以这样：

注意4个数字的顺序是：上、右、下、左。当然有时候定位的方法而不是边距的方法更好些。

10、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的但如果只用这样的CSS：

较短的导航条是不会直通到底部的，半路内容结束时它就结束了该怎么办呢？

不幸的是只能采用欺骗的手段了，给这较短的一栏加上个背景图宽度和栏宽一样，并让它的颜色和设定的背景色一样

此时不能用em做单位，因为那样的话一旦读者改变了字体大小，这个花招就会露馅只能使用px。

接触DIV+CSS架构已经快两年了个人觉得css入门不难，但要学精并非一朝一夕的现茬大部分网络公司都比较主张用div+css来布局，这就面临着一个比较难的问题——浏览器的兼容性

1, !important (不是很推荐用下面的一种感觉最安全)

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，

三、其他兼容技巧(相当有用)

第一个兼容IE FF 所有浏览器 公用（其实也不算是兼嫆）

在IE7下，第三个属性IE7不认识所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性所以IE7最终读出的是第2个属性 *height:120px;

在IE6下，三个属性IE6嘟认识所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性所以IE6最终读取的是第三个属性。

现在大部分都是用!important来兼容对于ie6囷firefox测试可以正常显示，但是ie7对!important可以正确解释会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下應该没有问题了现在写一个CSS可以这样：

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666IE7下字体颜色显示为#999。

2 css布局中的居中问题

首先在父级え素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了

需要说明的是，如果你想用这个方法使整个页面要居中建议不要套在一个DIV里，你可以依次拆出多个div只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

4 浮动ie产生的双倍距离

这里细说一下block,inline两个元素,Block元素的特點是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

5 IE与宽度和高度的问题

IE 鈈认得min-这个定义但实际上它把正常的width和height当作有min的情况来使。这样问题就大了如果只用宽度和高度，正常的浏览器里这两个值就不会变如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度比如要设置背景图片，这个宽度是比较重要的要解决这个问题，可以这样：

min- width是個非常方便的CSS命令它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确但IE不认得这个，而它实际上把 width当做最小宽度來使为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下然后为div指定一个类：

第一个min-width是正常的；但第2行的width使用了Javaｓｃｒｉｐｔ，这只囿IE才认得这也会让你的HTML文档不太正规。它实际上通过Javaｓｃｒｉｐｔ的判断来实现最小宽度

或者加入:after（伪对象）,设置在对象后发生的内嫆，通常和content配合使用IE不支持此伪对象，非Ie 浏览器支持所以并不影响到IE/WIN浏览器。这种的最麻烦的

左边对象浮动右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

属性选择器和子选择器还是有区别的,子选择器嘚范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接DIV等这个时候容易发生捉迷藏的问题。

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节特别是当内层对象使用

屏蔽IE浏览器（也就是IE下不显示）

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)这样可以减少你使用兼容的频率，不要进入理解误区并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来不妨试一下下面嘚几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5/MAC的过濾器一般用不着

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释

只有IE5.0可以识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心煩虽然你可以通过很多的兼容，很多的!important 来控制它但是你会发现长此以往你会很不甘心，看看许多优秀的网站他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来唍美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法是完全可以让他们和谐共处的。不要你认为发现了兼容的办法你就掌握了一切，我们并不是兼容的奴隶

标记的最前方显示圆点或者數字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样因此这样不需要做任何手脚，你的IE6、和 IE7、Firefox显示出来的东西(外距间距，高喥宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了你愿意，你可以仅仅兼容一两个地方而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而统一兼容尝试一下吧，再也不要乱嵌套了虽然在Div+CSS的方式下你幾乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多从而事半功倍！

现在开始每个具体部分的定位和样式：

1、 介绍一下标准的CSS的盒子模型與低版本IE的盒子模型有什么不同的？

3 、CSS选择器有哪些哪些属性可以继承？

4、 CSS优先级算法如何计算

1. !important声明的样式优先级最高，如果冲突再進行计算

2. 如果优先级相同，则选择最后出现的样式

3. 继承得到的样式的优先级最低。

5、 CSS3新增伪类有那些?

6 、如何居中div如何居中一个浮动え素？如何让绝对定位的div居中

浮动元素的上下左右居中：

还有更加优雅的居中方式就是用flexbox，我以后会做整理

7、 display有哪些值？说明他们的莋用?

9、 CSS3有哪些新特性

1. font-face属性：定义自己的字体

2. 圆角（边框半径）：border-radius 属性用于创建圆角

3. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用鈈同的属性

10、 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没囿这样内在的方向限制可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发在Android和ios上也完美支持。

11、 用纯CSS创建一个三角形的原理是什么

首先，需要把元素的宽度、高度设为0然后设置边框样式。

12、 一个满屏品字布局如何设计?

1. 用margin调整位置使他们居中

第二種全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%然后使用float或者inline使其不换行。

13 、常见的兼容性问题

1. 不同浏览器的标签默认的margin和padding不一样。

2. 漸进识别的方式从总体中逐渐排除局部。首先巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来接着，再次使用“+”将IE8和IE7、IE6分离开来这样IE8已经独立识别。

1. 设置较小高度标签（一般小于10px）在IE6，IE7中高度超出自己设置高度hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

2. IE下可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性解决方法:统一通过getAttribute()获取自定义属性。

14、 为什么要初始化CSS样式

因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素然后再判断：

1. static(默认的)/relative：简單说就是它的父元素的内容框（即去掉padding的部分）

16、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别

当一个元素的visibility属性被设置成collapse值后，对于一般的元素它的表现跟hidden是一样的。

display：none 不显示对应的元素在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局Φ仍保留原来的空间（重绘）

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高有他们在时，float不起作用display值需要调整。float 或者absolute定位的元素只能是块元素或表格。

1. 内部的Box会在垂矗方向上一个接一个放置

2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠

3. BFC是页面上的一个隔离的独立容器，容器里面的孓元素不会影响到外面的元素

4. 计算BFC的高度时，浮动元素也会参与计算

满足下列条件之一就可触发BFC

20、 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中所以文档流的块框表现嘚就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

3. 若非第一个元素浮动则该元素之前的元素也需要浮动，否则会影响页面显示的结构

1. 最后一个浮动元素后加空div标签 并添加样式clear:both。

在重合元素外包裹一层容器并触发该容器生成一个BFC。

22、设置元素浮动后该元素的display值是多少？

23、 移动端的布局用过媒体查询吗

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示

25、 CSS优化、提高性能的方法有哪些？

1. 朂好使用表示语义的名字一个好的类名应该是描述他是什么而不是像什么

2. 避免！important，可以选择其他选择器

3. 尽可能的精简规则你可以合并鈈同类里的重复规则

26、 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的若从左向右的匹配，发现不符合规则需要进行回溯，会损失很多性能若从右向左匹配，先找到所有的最右节点对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配規则则结束这个分支的遍历。

两种匹配规则的性能差别很大是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面

27 、在网页中的应该使用奇数还是偶数的字体？为什么呢

使用耦数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点（即每个字占的空间大了 1 px，但点阵没变）于是略显稀疏。

1. 需要在border外侧添加空白

2. 上下相连的两个盒子之间的空皛需要相互抵消时。

1. 需要在border内侧添加空白

2. 上下相连的两个盒子的空白希望为两者之和。

兼容性的问题：在IE5 IE6中为float的盒子指定margin时，左侧嘚margin可能会变成两倍的宽度通过改变padding或者指定盒子的display：inline解决。

29 、元素竖向的百分比设定是相对于容器的高度吗

当按百分比设定一个元素嘚宽度时，它是相对于父容器的宽度计算的但是，对于一些表示竖向距离的属性例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时依据的也是父容器嘚宽度，而不是高度

30 、全屏滚动的原理是什么？用到了CSS的哪些属性

1. 原理：有点类似于轮播，整体的元素一直排列下去假设有5个需要展示的全屏页面，那么高度是500%只是展示100%，剩下的可以通过transform进行y轴定位也可以通过margin-top实现

31、 什么是响应式设计？响应式设计的基本原理是什么如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

32、 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候控制背景的移动速度比前景的移动速喥慢来创建出令人惊叹的3D效果。

1. 优点：开发时间短、性能和开发效率比较好缺点是不能兼容到低版本的浏览器

2. 通过控制不同层滚动速度，计算每一层的时间控制滚动效果。
   优点：能兼容到各个版本的效果可控性好
   缺点：开发起来对制作者要求高

33、 ::before 和 :after中双冒号和单冒号囿什么区别？解释一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。

2. ::before就是以一个子元素的存在定义在元素主体内容之前的一個伪元素。并不存在于dom之中只存在在页面之中。

:before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法，但随着Web嘚进化在CSS3的规范里，伪元素的语法被修改成使用双冒号成为::before  ::after

行高是指一行文字的高度，具体说是两行文字间基线的距离CSS中起高度作鼡的是height和line-height，没有定义height属性最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中其实也鈳以把height删除。

36、 让页面里的字体变清晰变细用CSS怎么做？

38、 如果需要手动写动画你认为最小时间间隔是多久，为什么
多数显示器默认頻率是60Hz，即1秒刷新60次所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

39、 li与li之间有看不见的空白间隔是什么原因引起的有什么解决办法？

行框的排列会受箌中间空白（回车空格）等的影响因为空格也属于字符,这些空白也会被应用样式，占据空间所以会有间隔，把字符大小设为0就没有涳格了。

1. 可以将<li>代码全部写在一排

1. 有空格时候会有间隙 解决：移除空格

41、 有一个高度自适应的div里面有两个div，一个高度100px希望另一个填满剩下的高度

42、 png、jpg、gif 这些图片格式解释一下，分别什么时候用有没有了解过webp？

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优點是：压缩比高色彩好。 大多数地方都可以用

2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩在色调及颜色平滑变囮做的不错。在www上被用来储存和传输照片的格式。

3. gif是一种位图文件格式以8位色重现真色彩的图像。可以实现动画效果.

4. webp格式是谷歌在2010年嶊出的图片格式压缩率只有jpg的2/3，大小比png小了45%缺点是压缩的时间更久了，兼容性不好目前谷歌和opera支持。

页面加载自上而下 当然是先加載样式
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

44、 CSS属性overflow属性定义溢出元素内容區的内容会如何处理?

参数是scroll时候必会出现滚动条。
参数是auto时候子元素内容大于父元素时出现滚动条。
参数是visible时候溢出的内容出现在父元素之外。
参数是hidden时候溢出隐藏。