2.1 link和@import都可以为页面引入CSS文件，其区别是？
将样式定义在单独的.css的文件里，link和@import都可以在html页面引入css文件。有link和@import两种方式，导入方式如下：
link方式：<link rel=”stylesheet” type=”text/css” href=”aa.css”>
@import方式：<style type=”text/css”>@import “aa.css”</style>
link和@import两种导入css文件的区别：
祖先的差别。Link属于XHTML标签，而@import完全是CSS提供的一种方式。Link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RCC，定义rel连接属性等；@import就只能加载css了。
加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢时更为明显。
兼容性的差别。由于@import是CSS2.1提出的所有老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
@Import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
2.2 如何理解CSS样式表的层叠性？
CSS使用层叠的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。
层叠性是指，当一个web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。
优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS样式的优先级如下所示（其中数字3拥有最高的优先权）：
1.浏览器缺省设置；
2.外部样式表（.css文件）或者内部样式表（位于<head>元素内部）；
3.内联样式（作为某个元素的style属性的值）。
同等优先级下，以最后定义的样式为准，important比内联高。
2.3 哪些属性可以继承？
Css中可以继承的属性如下：
文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相关属性：list-style-image、list-style-position、list-style-type、list-style；
表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；
其他属性：Cursor、visibility；
2.4 CSS选择器中，元素选择器和类选择器的区别是什么？
元素选择器是常见的CSS选择器，即文档的元素就是最基本的选择器。选择器通常是某个HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。使用类选择器时，首先要定义样式类，其语法为：
.className{ }；
所有能够附带class属性的元素都可以使用此样式声明。只需要将class属性的值设置为”className”，则可以将类选择器的样式与元素关联。
在实际使用时，如果需要为某种元素定义样式，则往往使用元素选择器；如果要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
2.5 简要描述CSS中的定位机制
CSS中，除了默认的流定位方式以外，还有如下几种定位机制：浮动定位、相对定位、绝对定位和固定定位。
浮动定位是将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。
相对定位将元素相对于它在普通流中的位置进行定位。
绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。
固定定位是指将元素的内容固定在页面的某个位置。
2.6 display属性和 visibility属性的区别？
可以使用display属性定义建立布局是元素生成的显示框类型。
1.如果将display属性设置为block，可以让行内元素表现得像块级元素一样；
2.如果将display属性设置为inline，可以让块级元素表现得像内联元素一样；
3.可以通过把display属性设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不在显示，不占用文档中的空间。
在DIV设计中，室友display:none属性后，HTML元素（对象）的宽度。高度等各种
属性都将”丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
2.7 简述对CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具备内容（content）、填充（padding）、边框（border）、边距（margin）这些属性。在CSS中，每个元素都被视为一个框，而每个框都有三个属性：
border：元素的边框（可能不可见），用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
padding：内边距，表示框内容和边框之间的空间。
盒子模型的结构如图所示：
由上图可以看出，width和height指的是内容区域的宽度和高度。增加内边距、外边距和边框不会影响到内容区域的尺寸，但会增加元素框的总尺寸。
因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。
2.8 简述CSS3中的伪类选择器？
CSS3提供了大量伪类选择器，浏览器对于有些伪类选择器的支持还不太好。目前，常用的伪类选择器有：
目标伪类：即 :target，突出显示活动的HTML锚，用于选取当前活动的目标元素；
元素状态伪类：比如 :enabled、:disabled、:checked；
结构伪类： 比如 :first-child、:last-child、:empty、:only-child；
否定伪类：即 :not(selector)，匹配非指定元素/选择器的每个元素。
2.9 为什么建议设置背景图像的同时还设置背景颜色？
一般建议在使用背景图片的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色。
2.10 如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后设置元素的左右外边距为auto，比如，margin:0 auto。则可以实现div居中显示。
对于浮动元素，设置其左右外边距为关键字auto是无效的。此时，如果需要设置其居中显示，可以：1.精确计算其左外边距并进行设置，实现居中显示。
2.使用一个居中显示的div元素包含次浮动元素,
代码如：<div style=”margin:0 auto”><div style=”float:left”></div></div>
2.11 在设置文本的字体时，为什么建议设置替换字体？
可以使用font-family属性来指定文本的字体，代码如下所示：font-family:name/inherit
此时，name为首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。
但是，如果用户机器上并没有安装name所指定的字体，则会显示默认字体。因此，如果可以指定一种替代字体，替代字体可以和指定字体不完全相同，相似且不会影响页面的布局，就可以解决问题了。
我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器才会使用默认字体显示页面。代码如下所示：
h1{font-family:Georgia,serif}
此时，如果用户机器上没有安装Georgia，但安装了Times字体（serif字体系列中的一种字体），浏览器就可能对<h1>元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。
因此，我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户机器无法提供与规则匹配的特定字体时，就可以选择一个通用字体作为替换。
2.12 内联元素可以实现浮动吗？
在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。
2.13 什么情况下需要额外设置表格的显示规则？
默认情况下（不额外设置表格的显示规则时），表格按照自动表格布局进行显示，即浏览器在显示表之前查看每一个单元格，然后基于所有格的设置计算表单大小，而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时，单元格的大小会适应内容的大小。
自动表格布局的算法在表格复杂时会比较慢，这是由于它需要在确定最终的布局之前访问表格中多有的内容。在不能提前确定每一列的大小时，这种方式会非常适用。
如果额外设置表格的显示规则，即设置table-layout属性的值为fixed，则称为固定表格布局。在固定表格布局中，水平布局仅取决于表格宽度，列宽度，表格边框宽度，单元格间距，而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局，并使用该宽度计算该列中所有其他单元格的宽度。
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局，浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小，则会加速表的显示。
2.14 简要描述CSS中content属性的作用
content属性与:before及:after伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如，查看如下代码：
body {counter-reset:chapter}
h1:before { content:”第”counter(chapter)”章”}
h1 { counter-increment:chapter}
使用content属性，并结合:before选择器和计数器counter，可以在每个<h1>元素前插入新的内容。
2.15 CSS Sprite是什么，谈谈这个技术的优缺点
CSS Sprite是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位。
其优点在于：①减少网页的http请求，提高性能，这也是CSS Sprite最大的优点，
也是其被广泛传播和应用的主要原因；
②减少图片的字节，多张图片合并成1张图片的字节小于多张图片的字节总和；
③较少了命名困扰，只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便；
但是CSS Sprite也存在一些不可忽视的缺点：
①图片合成比较麻烦；
②背景设置时，需要得到每一个背景单元的精确位置；
③维护合成图片时，最好只是向下加图片，而不是更改已有图片。
2.16 对CSS3有了解吗？列举几个CSS3的新特性并简要描述
CSS3作为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；并加入了很多新的模块和属性，比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。
其中，CSS3提供了一些复杂选择器，用于实现页面复杂情况下的元素选择，如属性选择器，一些伪类和伪元素选择器；渐变用于为元素设置渐变效果的背景；转换可以实现元素的变换，比如位移、缩放、旋转等；过渡可以实现简单的动画效果；动画属性则可以实现复杂的动画，可以实现逐帧制作动画。
2.17 过渡与动画的区别是什么？
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
2.18 什么是CSS reset？
CSS reset，又叫做CSS重写或者CSS重置，用于改写HTML标签的默认样式。
有些HTML标签在浏览器里有默认的样式，例如p标签有上下边距，li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。着必然会带来浏览器兼容问题。
因此，在CSS代码中，可以使用CSS代码去掉这些默认样式，即重新定义标签样式，从而覆盖浏览器的CSS默认属性，即CSS reset。
需要注意的是，在进行样式重写时，不建议使用 * 选择器进行重写，这样会降低效率，影响性能。
2.19 如何清除浮动元素所带来的影响？
浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。
如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用clear属性来设置。另外，包含框呃逆的子元素浮动后，如果包含框没有设置具体的高度，则其高度会发生变化，此时，可以使用overflow属性来清除子元素浮动后带来的影响。
2.20 谈谈你对浏览器兼容性问题的理解
浏览器的类型及版本的不同会造成CSS效果不尽相同，因此需要实现浏览器兼容，也可以针对不同的浏览器编写不同的CSS。
目前，各主流浏览器的新版本，对应W3C的标准支持很好，因此，首先保证代码符合W3C的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。
第三，对于IE的低版本，可以编写带有特定前缀的代码，实现版本识别。比如：
.bb{
background-color:#f1ee18/*所有识别*/
.background-color:#f1ee18\9/*IE6 7 8识别*/
+background-color:#f1ee18/*IE6 7识别*/
_background-color:#f1ee18/*IE6识别*/
}
另外，对于特定的兼容性问题，特殊解决。常见的特殊问题有：
1.使用CSS reset：对于有些HTML标签，浏览器默认的margin和padding不同，可以使用CSS代码改写默认的样式效果，从而实现统一
2.IE低版本中，不能使用auto关键字实现块级元素居中显示，可以改用设置父元素的text-align；
3.子元素设置上外边距时，父元素需要设置边框或者外边距；
4.外边距合并问题。
CSS3 弹性框(Flexible Box或Flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当排布行为的布局方式。对很多应用程序来说，由于不使用浮动，且弹性容器的外边距也不会与其内容的外边距合并，弹性框模型比起方框模型要好一些。许多设计师会发现弹性框模型易于使用。弹性框中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序与它们在源代码中的顺序无关，定位子元素变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是特意限制于视觉呈现上的，语音顺序以及基于源代码顺序的导航均不受影响。注意：虽然CSS 弹性框布局规范还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性框的所有功能。但，这么说吧，现在全线产品对弹性框都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。弹性框概念弹性布局在定义方面是指调整其内项目宽高从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内项目来填充可用空间，或将其收缩来避免溢出。弹性框布局算法是方向无关的，与此相对的，块级布局侧重于垂直方向、行内布局侧重于水平方向。虽然块级布局用于页面行之有效，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性框布局主要适用于应用程序的组件及小规模的布局，而（新兴的）网格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。弹性框相关词汇表关于弹性框的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个flex-direction属性为row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。弹性容器(Flex container)包含着弹性项目的父元素。通过设置display属性的值为flex或inline-flex来定义弹性容器。弹性项目(Flex item)弹性容器的每个子元素都成为弹性项目。弹性容器直接包含的文本将包覆成匿名弹性项目。轴(Axis)每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction属性确立主轴。
justify-content属性定义了在当前行上弹性项目沿主轴如何排布。
align-items属性定义了在当前行上弹性项目沿侧轴默认如何排布。
align-self属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items所确立的默认值。
方位(Direction)弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由writing-mode确立的方向（从左到右、从右到左，等等）。
order属性将元素与序号组关联起来，并决定哪些元素先出现。
flex-flow属性是flex-direction和flex-wrap属性的简写，决定弹性项目如何排布。
行(Line)根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。尺寸(Dimension)根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size)与侧轴尺寸(cross size)。
min-height与min-width属性初始值为 0。
flex属性是flex-grow、flex-shrink和flex-basis属性的简写，确立弹性项目的伸缩性。
指派弹性框为要使用此样式的元素指派 CSS，需按以下方式设置display属性：
display:flex或者
display:inline-flex这样做将元素定义为弹性容器，其子元素则成为弹性项目。值flex使弹性容器成为块级元素。值inline-flex使弹性容器成为单个不可分的行内级元素。
注意：厂商前缀标记应当附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。弹性项目须知弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，只包含空白的弹性项目不会被渲染，就如同对其指派display: none。对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。相邻的弹性元素其外边距不会互相合并。使用auto外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的Aligning with 'auto' margins。为了确保弹性项目有合理的默认最小尺寸，使用min-width:auto与min-height:auto。对于弹性项目，属性值auto使项目的最小宽/高在计算中不会小于其内容的实际宽/高，这样可以保证项目渲染得足够大以容纳其内容。更多细节请参考min-width与min-height。不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对需要居中的弹性项目应用自动外边距来替代align-属性的使用。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用自动外边距来替代justify-属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过，如果尝试在多行的弹性框中用基于外边距的居中方法来替代justify-content，很不幸，必须对每一行的第一个和最后一个弹性项目应用外边距。除非能够事先预测每一行都结束于哪个元素，否则无法放心地在主轴方向上用基于外边距的居中方法来替代justify-content属性。重新提一下，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。order属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。弹性框相关属性不影响弹性框的属性由于弹性框使用了不同的布局算法，某些属性用在弹性容器上没有意义：
多栏布局模块的column-*属性对弹性项目无效。
float与clear对弹性项目无效。使用float将使元素的display属性计为block。
vertical-align对弹性项目的对齐无效。
示例基本的弹性布局示例这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。
htmllang='en'>head>style>.flex{/* 基本样式 */width:350pxheight:200pxborder:1px solid#555font:14px Arial/* 建立弹性框 */display:-webkit-flex-webkit-flex-direction:rowdisplay:flexflex-direction:row}.flex>div{-webkit-flex:11autoflex:11autowidth:30px/* 让过渡表现良好。（从/到'width:auto'的过渡 至少在 Gecko 和 Webkit 上是有 bug 的。 更多信息参见 http://bugzil.la/731886 ） */-webkit-transition:width0.7s ease-outtransition:width0.7s ease-out}/* colors */.flex>div:nth-child(1){background:#009246}.flex>div:nth-child(2){background:#F1F2F1}.flex>div:nth-child(3){background:#CE2B37}.flex>div:hover{width:200px}style>head>body>p>Flexbox nuovop>divclass='flex'>div>unodiv>div>duediv>div>trediv>div>body>html>
webgl可以用js调用openGL的，比如cs、极品飞车之类的游戏你应该知道，很多游戏都是openGL的，真正类似3D软件那种3D，里面有X,Y,Z轴向，构成一个立体空间，然后你可以放入一个人物、汽车或其他3D模型，上贴图，打灯光，游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面，openGL与3D软件渲染大原理是一样的，只是渲染精度没3D软件做图或做电影那么高，渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制，要保证游戏在主流的家庭电脑硬件上不卡。css只有X，Y两个轴向，只能构成一个平面，不能构成一个真正的立体空间，你看到的网上css做的3D立方体的例子原理类似：ps里面你画三个正方形平面色块，通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面，这个是视觉上的欺骗，只能拼凑出简单的立体形状，css并没有在一个3D空间内生成带三个轴向的物体，也没办法通过css导入真正的3D模型来个转一圈之类的，你想用纯css做个3D机器猫就不行了。
如果是webgl，你可以建个机器猫模型，把obj格式的模型文件导入，然后指定贴图，灯光等等，加上js代码控制，可以在支持的浏览器上360角度的展示机器猫了。webgl原理就和游戏引擎一样(目前肯定没游戏引擎强大)，只不过游戏引擎是用c++之类的来开发，展示的东西基本上都需要用户执行一个安装到本地电脑的过程，现在webgl你可以用js来开发，然后直接在浏览器上展示。
