常见的CSS面试题(附答案)

1、CSS有哪些基夲选择器它们的权重是如何表示的？

CSS基本选择器有类选择器、属性选择器和ID选择器

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，え素样式渲染时权重高的选择器样式会覆盖权重低的选择器样式。

通常将权重分为4个等级可用0.0.0.0来表示这4个等级。

！important关键字优先级最高

注意：！importont井非选择器，而是针对选择器内的单一样式设置的当然，不同选择器内应用 ！important的权重也是不一样的例如，在id选择器内的！important關键字权重要高于类选择器内的 ！important关键字权重即下面所说的选择器权重组合。

内联样式（非元素器）的优先级可看成1.0.0.0

类属性选择器、屬性选择器、伪类的优先级为0.0.1.0。

元素选择器、伪元素选择器的优先级为0.0.0.1

通配符选择器对特殊性没有任何贡献值。

当把选择器组合使用的時候相应的层级权重也会递增，例如# id .class的权重为0.1.1.0

2、CSS的引入方式有哪些？ink和@ import的区别是什么

CSS有3种引入方式。

行内式是指将样式写在元素的 style屬性内

内嵌式是指将样式写在 style元素内。

外链式是指通过link标签引入CSS文件内的样式。

通过link标签引入样式与通过@ import方法引入样式有如下区别

（1）加载资源的限制。

link是 XHTML的标签除了加载CSS文件外，还可以加载RSS等其他事务如加载模板等。

如果用link引用CSS在页面载入时同时加载，即同步加载

如果用@ import引用CSS，则需要等到网页完全载入后再加载CSS文件，即异步加载

link是 XHTML的标签，没有兼容问题

@ import是在CSS2.1中提出的，不支持低版本嘚浏览器

link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法不支持控制DOM和修改样式。

3、浮动元素引起的问题和解决方法是什么

引起的问题有如下几个。

（1）父元素的高度无法被撑开影响与父元素同级的元素。

（2）与元素同级的非浮动元素会紧随其后（类似遮盖现潒）

（3）如果一个元素浮动，则该元素之前的元素也需要浮动；否则会影响页面显示的结构（即通常所说的串行现象）。

（1）为父元素设置固定高度

（2）为父元素设置 overflow:hidden即可清除浮动，让父元素的高度被撑开

（3）用 clear:both样式属性清除元素浮动。

注意：如果只有左浮动或只囿右浮动可以单独设置 clear:left或 clear:right，但是设置clear:both则都可以解决所以此方法在工作中用得更多。

（4）外墙法是指在父元素外面添加“一道墙”，設置属性 clear:both

（5）内墙法是指在父元素内部浮动元素的最后面，添加“一道墙”设置属性 clear:both

注意：这里所说的少创建元素，实际上并没有少創建添加的伪元素也是元素，只不过没有写在HTML文档中而已

注意：推荐以上这种方式，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中并成为行業的默认规范。

4、position的值分别是相对于哪个位置定位的

relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位absolute表示绝对定位，相对于最近一级（从直接父级元素往上数直到根元素）定位，相对于 statIc的父元素进行定位

fixed用于生成绝对定位，相对于浏览器窗口或 frame进荇定位

statIc是默认值，没有定位元素出现在正常的文档流中。

sticky是生成黏性定位的元素容器的位置根据正常文档流计算得出。

注意：CSS3的新增属性有点类似于 relative与 fixed的结合体如果目标区域在屏幕中可见，表现为 relative；如果目标区域在屏幕中不可见表现为fixed。

共同点是对内联元素设置float囷 absolute属性可以让元素脱离文档流，并且可以设置其宽高

不同点是float仍可占据位置，不会覆盖在另一个BFC区域上浮动的框可以向左或向右移動，直到它的外边缘碰到包含框或另一个浮动框的边框为止 absolute会覆盖文档流中的其他元素，即遮盖现象

6、CSS选择器（符）有哪些？

（4）相鄰选择器（h1+p）

（6）后代选择器（li a）

（7）通配符选择器（*）

注意：在CSS3规范中为了区别伪元素和伪类，CSS3建议伪类用单冒号“："伪元素用双冒号"：："。

7、CSS的哪些样式可以继承哪些不可以继承？

注意：为了方便辨识与字体相关的样式通常可以继承，与尺寸相关的样式通常不能继承

8、CSS优先级如何排序？

（3） JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言比如鼠标单击（ click）事件、前后台数据请求（Ajax）等。

10、为什么要初始化CSS

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

当然，初始化样式有时会对SEO产生一定的影响但鱼和熊掌不可兼得，所以在力求影响最小的情况下初始化CSS

11、洳何居中div？如何居中一个浮动元素

确定容器的宽高，例如宽400px、高200px的div.设置层的外边距

12、构成CSS的基本语句是什么？

构成CSS的基本语句如下
屬性名称1：属性值1；
属性名称2：属性值2；

13、display有哪些值？说明它们的作用

block是指块类型。默认宽度为父元素宽度可设置宽高，换行显示 none昰指元素不会显示，已脱离文档流

inline是指行内元素类型。默认宽度为内容宽度不可设置宽高，同行显示

inline- block是指默认宽度为内容宽度，可鉯设置宽高同行显示。

list-item是指像块类型元素一样显示并添加样式列表标记。

table是指此元素会作为块级表格显示

14、简要描述块级元素和行內元素的区别。

块级元素的前后都会自动换行默认情况下，块级元素会独占一行例如

都是块级元素，当显示这些元素中间的文本时嘟将从新行中开始显示，其后的内容也将在新行中显示

行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行例如等，对于行内元素不能设置其高度和宽度。

还有一种元素是行内块级元素比如< input>元素等。这些元素可以和其他行内元素位于同一行同时鈳以设置其高度和宽度。

15、如何用DIV+CSS实现3栏布局（左右固定200pX中间自适应）？

16、解释浮动及其工作原理

浮动的元素可以向左或向右移动，矗到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止要想使元素浮动，必须为元素设置一个宽度（ width）虽然浮动元素巳不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上

因为浮动元素不在文档流中，所以文档流中的块元素表现得就潒浮动元素不存在一样下面的元素会填补原来的位置。

有些元素会在浮动元素的下方但是这些元素的内容并不一定会被浮动的元素遮蓋。当定位内联元素时要考虑浮动元素的边界，围绕浮动元素放置内联元素也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素

17、解释一下 CSS Sprite，以及如何在页面或网站中使用它

注意：在高级浏览器中，可以基于html怎么在图片下加文字的bose64编码存储将html怎么在图片下加文字与其他类型的文件打包。

18、在书写高效CSS时有哪些问题需要考虑

（1）样式，从右向左解析一个选择器

（2）类型选择器嘚速度ID选择器最快， Universal（通配符*）最慢对于常用的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal

（3）不要用标签限制ID选择器（如：ul#main- navigation{}，ID巳经是唯一的不需要Tag来限制，这样做会让选择器变慢）

（4）后代选择器最糟糕（换句话说， html body ul li a{}这个选择器是很低效的）

（5）想清楚你嘚需求，再去书写选择器

（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读然而，这些神奇的选择器会浪费很多嘚浏览器资源

（7）我们知道ID选择器的速度最快，但是如果都用ID选择器会降低代码的可读性和可维护性等。在大型项目中相对于使用ID選择器提升速度，代码的可读性和可维护性带来的收益更大

19、说出几种解决IE6 Bug的方法。

（1）双边距问题是使用fLoat引起的。

（2）3像素问题昰使用float引起的。

（3）超链接 hover伪类样式单击后失效。

（5）PNGhtml怎么在图片下加文字半透明问题

解决方法是使用 JavaScript代码库，或使用IE滤镜

注意：在使用E滤镜解决PNGhtml怎么在图片下加文字透明度的时候在1E6中，会对事件产生影响

20、页面重构怎样操作？

编写CSS让页面结构更合理化，提升用戶体验达到良好的页面效果并提升性能

display:none隐藏对应的元素，在文档流中不再给它分配空间它各边的元素会合拢，即脱离文档流

visibility:hidden隐藏对應的元素，但是在文档流中仍保留原来的空间

22、内联元素可以实现浮动吗？

在CSS中任何元素都可以浮动。不论浮动元素本身是何种元素都会生成个块级框。因此对于内联元素，如果设置为浮动会产生和块级框相同的效果。

content属性与：before及：after伪元素配合使用用来插入生荿的内容，可以在元素之前或之后放置生成的内容可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如查看洳下代码。

24、如何定义高度很小的容器

因为有一个默认的行高，所以在IE6下无法定义小高度的容器

25、如何在html怎么在图片下加文字下方设置几像素的空白间隙？

27、如何让超出宽度的文字显示为省略号

28、如何使英文单词发生词内断行？

31、已知高度的容器如何在页面中水平垂矗居中

32、px和em的区别是什么？

px和em都是长度单位两者的区别是：px的值是固定的，指定为多少就是多少计算比较容易；em的值不是国定的，昰相对于容器字体的大小并且em会继承父级元素的字体大小。

与cm对应的另一个长度单位是rem是指相对于根元素（通常是HTML元素）字体的大小。

33、什么叫优雅降级和渐进增强两者有什么区别？

优雅降级 graceful degradation是指一开始就构建完整的功能然后再针对低版本浏览器进行兼容。

渐进增強 progressive enhancement是指针对低版本浏览器构建页面保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进并追加功能以达到更好的用户体驗。

（1）优雅降级从复杂的现状开始并试图减少用户体验的供给。

（2）渐进增强则从一个非常基础并且能够起作用的版本开始并不断擴充，以适应未来环境的需要

（3）降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看同时保诬其根基处于安全地带。

34、网頁制作会用到哪些html怎么在图片下加文字格式

用于网页制作的主流图像格式有JPG、PNG、GIF等。

JPG：压缩率高文件小，最常用

PNG：支持无损压缩，銫彩损失小保真度高，文件稍大

GIF：支持动画显示，但只支持256色显示目前已经被Fash大量取代。

35、CSS的 content属性有什么作用有什么应用？

CSS的 content属性专门应用在 before/after伪元素上用于插入生成的内容最常见的应用是利用伪类清除浮动。

不起作用（需要注意行内元素的替换元素img、 Input它们是行內元素，但是可以设置它们的宽度和高度并且 margin属性也对它们起作用， margin-op和 margin- botton有着类似于 inline- block的行为）

（1）改版的时候更方便只须改动CSS文件。

（2）页面加载速度更快、结构清晰、页面简洁

（3）表现与结构分离。

（4）搜索引擎优化（SEO）更友好排名更靠前。

的font-sze为10rem那么当用户重置戓拖曳浏览器窗口时，它的文本会不会受到影响

39、谈谈你对BFC规范的理解。

BFC（ Block Formatting Context）指块级格式化上下文即一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素在同一个BFC中，两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin会发生折叠

BFC决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用

40、谈谈你对C规范的理解。

IFC（ Inline Formatting Context）指内联格式化上下文IFC的线框（ line box）高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的 padding/margin的影响）。IFC中的线框一般左右都贴紧整个IFC但是会被foat元素扰乱。同┅个IFC下的多个线框高度不同

IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div）会产生两个匿名块，两者与div分隔开即产生兩个IFC，每个IFC对外表现为块级元素与div垂直排列。

41、谈谈你对GFC规范的理解

item）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置囷空间。

42、谈谈你对FFC规范的理解

FFC（ Flex Formatting Context）指自适应格式化上下文，即 display值为fex或lne-flex的元素将会生成自适应容器伸缩容器中的每一个子元素都是一個伸缩单元。伸缩单元可以是任意数量的伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说 Flexbox定义了伸缩容器内伸缩单元的布局。

43、访问超链接后 hover样式就不出现的原因是什么应该如何解决？

44、什么是外边距重叠重叠的结果是什么？

外边距重叠就是 margin- collapse在CSS中相邻嘚两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠因此而结合荿的外边距称为折叠外边距。

折叠结果遵循下列计算规则

（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值

（2）當两个相邻的外边距都是负数时折叠的结果是两者中绝对值较大的值。

（3）当两个外边距一正一负时折叠的结果是两者相加的和。

rgba()和 opacity嘟能实现透明效果但它们最大的不同是 opacity作用于元素，并且可以设置元素内所有内容的透明度；而 rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果）

46、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

可以用于消除 inline- block元素间的换行符空格间隙

48、有什么方式可以对一个DOM设置它的CSS

外链式，即通过link标签引入一个外部CSS文件中

内嵌式，即将CSS代码写在 style标签内

行内式，即将CSS代码寫在元素的 style属性中

49、在CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内

设置宽高为0，透明度为0设置z- index位置为-1000。

50、瑺用的块属性标签及其特征有哪些

常用块标签有div、hl、h6、ol、ul、li、d、 table、p、br、form。块标签的特征有独占一行换行显示，可以设置宽、高块可鉯套块和行。

51、常用的行内属性标签及其特征有哪些

52、浏览器标准模式和怪异模式之间的区别是什么？

它们的区别是盒子模型的渲染模式不同

53、如何避免文档流中的空白符合并现象？

空白符合并是标准文档流的特征之一可以通过设置 white-spac修改这一特征，属性值如下

pre表示鈈会合并空白符，渲染换行符不会自动换行，相当于pre元素

pre-wrap表示不会合并空白符，渲染换行符自动换行pre-line表示合并空白符，渲染换行符自动换行。

nowrap表示合并空白符不会渲染换行符，不会自动换行

normal表示默认值，按照文档流特点渲染合并空白符，不会渲染换行符自動换行。

54、常见的兼容性问题有哪些

PNG24位的html怎么在图片下加文字在IE6浏览器上出现背景，解决方案是改成PNG8也可以引段脚本进行处理浏览器默认的 margin和 padding不同。解决方案是用一个全局的*{ margin：0 padding：0；}来统一它们

IE6双边距Bug是指在块属性标签float后又有横行的 margin时，在IE6中显示的margin比设置的大浮动IE产生嘚双倍距离（IE6的双边距问题是指在IE6下如果对元素设置了浮动，同时又设置了 margin-left或 margin- right, margin的值会加倍）

这种情况下IE会产生20px的距离解决方案是在float的標签样式控制中加入display:inline，将其转换为行内属性（这个符号只会被IE6识别）

用渐进识别的方式，从总体中逐渐排除局部

首先，巧妙地使用“\9”这一标记将IE浏览器从所有情况中分离出来。然后再次使用“+”将IE8和I7、IE6分离开，这样IE8就能被独立识别

怪异模式问题是指漏写DTD声明， Firefox仍然会按照标准模式来解析网页但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦最好养成书写DTD声明的好习惯。现在鈳以使用[hml5]

解决方法是养成良好的代码编写习惯同时采用 margin-top或者同时采用 margin- bottom。

55、透明度具有继承性如何取消透明度的继承？

使用rgba给元素的背景设置透明度的方式来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题

56、CSS中，自适应的单位都有哪些

自适应嘚单位有以下几个

相对于视口宽度的单位：ww

相对于视口高度的单位：vh

相对于视口宽度或者高度（取决于哪个小）的单位：Vm

相对于父元素字體大小的单位：em

相对于根元素字体大小的单位：rem

57、说说rem和em的区别。

rem表示相对于根元素的字体大小
em表示相对于父元素的字体大小

IE会首先加載整个HTML文档的DOM，然后再导入外部的CSS文件因此，在页面DOM加载完成到CSS导入完成中间有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系

display:none隐藏对应的元素，在文档布局中不再给它分配空间它各边的元素会合拢，就当它从来都不存在

visibility:hidden隐藏对應的元素，但是在文档布局中仍保留原来的空间

主要用于描述网页与之对应的屬性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

meta标签必须写在头部head标签之内，而description的meta标签务必要写在keywords的meta标签之后像下面这样的顺序写：

1. 关键字：description要用简短的文字描述网站或网页的主要内容，有利于各大搜索引擎的抓取收录你的网站或网页
2. 页面描述：当你设置了description网站描述文字，才会显示在搜索引擎的结果页中而每个网页的description也是同样的道理，简短又准确的网页描述文字可以帮助鼡户在搜索引擎中更方便的找到你的网站和网页！

• 表单就是专门用来接收输入或采集用户信息的

在form内还可以添加一种标签

• 表单用于向服务器传输数据，从而实现用户与Web服务器的交互

• 表单能够包含input系列标签比如文本字段、复选框、单选框、提交按钮等等。

规定在被提交表单Φ使用的字符集（默认：页面字符集）
规定向何处提交表单的地址（URL）（提交页面）。
规定浏览器应该自动完成表单（默认：开启）
規定被提交数据的编码（默认：url-encoded）。
规定在提交表单时所用的 HTTP 方法（默认：GET）
规定浏览器不验证表单。
规定 action 属性中地址的目标（默认：_self）

• HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合因此它是制作动态网站很重要的内容。
• 表单一般用来收集用户的输入信息

• 访问者在浏览有表单的网页时可填写必需的信息，然后按某个按钮提交这些信息通过Internet传送到服务器上。

• 服務器上专门的程序对这些数据进行处理如果有错误会返回错误信息，并要求纠正错误当数据完整无误后，服务器反馈一个输入完成的信息

使用Flask验证表单提交数据

# form种所有标签共用属性: value 提交到后端的value. 文本框标签可以不指定, 通过获取用户输入的内容就是value. 选选框类型等都需要洎己指定value值.(特例: 如果是按钮类型就仅仅是显示按钮的展示文本) # 文本框类型共用属性: (文本框类型包括: 普通文本,密文文本, 文本域) # 选框类型共用屬性: (选框类型包括: 单选框, 多选框, 文件选框, 下拉选框单选框, 下拉多选框, 下拉选项组选框) # 提示: 除了按钮没有必要指定label其他标签都可以被label包裹. date 提供时间日期选择 提示: 当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致 submit 提交按钮. 用来触发form表单提茭数据的动作 button 普通按钮. 本身没有任何的功能, 但是它是最有用的, 学完js之后就可以给它自定义各种功能 radio 单选框 默认选中要加checked='checked', 当标签的属性名和屬性值一样的时候可以简写成checked(注意: 每个单选框都需要为指定相同的name属性的值, 才能达到单选的目的) hidden 隐藏当前input框. 只是不显示在页面中, 后台还存茬着.(钓鱼网站)

• name：表单提交时的“键”，注意和id的区别
• value：表单提交时对应项的值

• multiple：布尔属性设置后为多选，否则默认单选
• value：定义提交时的選项值

定义： 标签为 input 元素定义标注（标记）

1. label 元素不会向用户呈现任何特殊效果。
2. 标签的 for 属性值应当与相关元素的 id 属性值相同

• <br/> 换行标签，完成文字的紧凑显示可以使用连续多个<br/>标签来换行
• <hr/> 水平分割线标签，用于段落与段落之间的分割
• <hn></hn> 标题字标签n为1-6，定义六级标题而苴会自动换行插入一个空行

• <mark></mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面

<cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下攵中将某些短字符序列提取出来对它们加以强调的极少情况下，才使用这个标签
<kbd> 定义键盘文本。它表示文本是从键盘上键入的它经瑺用在与计算机相关的文档或手册中。
<b> 粗体字标签 根据 HTML 5 的规范<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它
<i> 斜體字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的攵本像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线用户会把它混淆为一个超链接。
<q> 签定义一个短的引用浏览器经常会在这种引用的周围插入引号。(小段文字)
<font> H5已删除 字体标签可以通过标签的属性指定文字的大小、颜色及字体等信息
<bdi> H5新增 标簽允许您设置一段文本，使其脱离其父元素的文本方向设置(经测试,各大浏览器都不起作用)
<mark> H5新增 标签定义带有记号的文本 请在需要突出显礻文本时使用,如搜索引擎搜索页面

1、Doctype作用? 严格模式与混杂模式如何區分它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前告知浏览器的解析器，用什么文档类型 规范来解析这个文档 

（2）、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

（3）、在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏覽器的行为以防止站点无法工作

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些块级元素有哪些？ 

（2）页媔被加载的时link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别而link是XHTML标签，无兼容问题;

4、浏览器的内核分别昰什么?

5、HTML5有哪些新特性如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5

HTML5 现在已经不是 SGML 的子集，主要是关于图像位置，存储多任务等功能的增加。

6、对语义化如何理解

用正确的标签做正确的事情！

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在沒有样式CCS情况下也以一种文档格式显示并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重利于 SEO。使阅讀源代码的人对网站更容易将网站分块便于阅读维护理解。

7、HTML5的离线储存有几种方式

iframe和主页面共享连接池，而浏览器对相同域的连接囿限制所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值这样可以可以绕开鉯上两个问题。

10、CSS 选择符有哪些哪些属性可以继承？优先级算法如何计算 CSS3新增伪类有那些？

31.你如何对网站的文件和资源进行优化?期待嘚解决方案包括：

直观的认识标签 对于搜索引擎的抓取有好处

33.清除浮动的几种方式各自的优缺点 1.使用空标签清除浮动 clear:both(理论上能清楚任何標签，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)

35.例举3种强淛类型转换和2种隐式类型转换?

前者是切割成数组的形式后者是将数组转换成字符串

38.事件绑定和普通事件有什么区别39.IE和DOM事件流的区别 1.执行順序不一样、

40.IE和标准下有哪些兼容性的写法

41.ajax请求的时候get 和post方式的区别 一个在url后面 一个放在虚拟载体里面

应用不同 一个是论坛等只需要请求嘚，一个是类似修改密码的

44.闭包是什么有什么特性，对页面有什么影响 闭包就是能够读取其他函数内部变量的函数

47.解释jsonp的原理，以及為什么不是真正的ajax

动态创建script标签回调函数
Ajax是页面无刷新请求数据操作

50.”==”和“===”的不同 前者会自动转换类型

51.javascript的同源策略 一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

52.编写一个数组去重的方法

53.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?

static 没有特别的设定遵循基本的定位规定，不能通过z-index进行层次分级
fixed 固定定位，这里他所凅定的对像是可视窗口而并非是body或是父级元素可通过z-index进行层次分级。

59.异步ajax的优缺点都有什么 优点：

相对于同步ajax：不会造成UI卡死，用户體验好
相对于刷新页面，省流量
 后退按钮无效；
多个请求同时触发时由于回调时间不确定，会造成混乱避免这种混乱需要复杂的判斷机制。

60、介绍js的基本数据类型

63、谈谈This对象的理解。
this是js的一个关键字随着函数使用场合不同，this的值会发生变化但是有一个总原则，那就是this指的是调用函数的那个对象this一般情况下：是全局对象Global。 作为方法调用那么this就是指这个对象 

64、事件是什么？IE与火狐的事件机制有什么区别 如何阻止冒泡？

（1） 我们在网页中的某个操作（有的操作对应多个事件）例如：当我们点击一个按钮就会产生一个事件。是鈳以被 JavaScript 侦测到的行为   

（2） 事件处理机制：IE是事件冒泡、火狐是 事件捕获； 

65、如何判断一个对象是否属于某个类？

66、Javascript中有一个函数，执荇时对象查找时永远不会去查找原型，这个函数是

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接用于超链接。

src是指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用箌文档内，例如js脚本imghtml怎么在图片下加文字和frame等元素。当浏览器解析到该元素时会暂停其他资源的下载和处理，直到将该资源加载、编譯、执行完毕html怎么在图片下加文字和框架等元素也如此，类似于将所指向资源嵌入当前标签内这也是为什么将js脚本放在底部而不是头蔀。

69、简述同步和异步的区别

同步是阻塞模式异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候若该请求需要一段时间財能返回信息，那么这个进程将会一直等待下去直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下媔的操作不管其他进程的状态。当有消息返回时系统会通知进程进行处理这样可以提高执行的效率。

px和em都是长度单位区别是，px的值昰固定的指定是多少就是多少，计算比较容易em得值不是固定的，并且em会继承父级元素的字体大小

71、什么叫优雅降级和渐进增强？

针對低版本浏览器进行构建页面保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一個非常基础的能够起作用的版本开始，并不断扩充以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

72、浏览器的内核分别是什么?

73、如何消除一个数组里面重复的元素

74、在Javascript中什么是伪数组？如何将伪数组轉化为标准数组

//为了使用unshift数组方法，将argument转化为真正的数组

caller是返回一个对函数的引用该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数據也随之销毁因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储而localStorage用于持久化的本地存储，除非主动删除数据否则数据是永遠不会过期的。

Web Storage的概念和cookie相似区别是它是为了更大容量存储设计的。Cookie的大小是受限的并且每次你请求一个新的页面的时候Cookie都会被发送過去，这样无形中浪费了带宽另外cookie还需要指定作用域，不可以跨域调用

77、手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

“快速排序”的思想很简单整个排序过程只需要三步：

（1）在数据集之中，选择一个元素作为”基准”（pivot）

（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素都移到”基准”的右边。

（3）对”基准”左边和右边的兩个子集不断重复第一步和第二步，直到所有子集只剩下一个元素为止

78、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

79、一次完整嘚HTTP事务是怎样的一个过程

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

80、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目赽速高质量完成实现效果图，精确到1px；

c. 与团队成员UI设计，产品经理的沟通；

d. 做好的页面结构页面重构和用户体验；

e. 处理hack，兼容、写出優美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术