css面试题？前端常见面试题
各位老铁们，大家好，今天由我来为大家分享css面试题，以及前端常见面试题的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
1.渐进增强与优雅降级
渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。
优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。
这两种思想的区别在于：
1.渐进增强是向上兼容，优雅降级是向下兼容;
2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;
3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明：
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：
"">
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。
怪异模式与标准模式的主要区别：
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。
3.怪异模式下，在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析，如盲人阅读器根据语义渲染网页。
·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
语义化标签
·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;
·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;
·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;
·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;
·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;
·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);
·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?
:link表示未访问的链接状态;
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA，即:link:visited:hover:active。理由如下：
·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;
·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;
·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;
·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外，还有下面几个长度单位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;
·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;
·rem当用在根元素()的font-size上面时，它代表了它的初始值;
·ch代表元素所用字体font中“0”这一字形的宽度;
·vh1vh相当于视口高度的1%，100vh就是视口的高度;
·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;
·vmax视口高度vw和宽度vh两者中的最小值
·vmin视口高度vw和宽度vh两种中的最大值;
·%相对于父级元素的大小来确定;
参考：CSS[1]
CSSpercentage[2]
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：
·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;
而冒泡与捕获恰恰相反：
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;
而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义：
·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;
·当布尔值是true时，表示向下捕获触发事件;
不能冒泡的事件
有些事件是不会冒泡的。比如：
·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;
·focus元素获取焦点时触发;
·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;
·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;
事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;
·preventDefault()阻止默认事件的发生;
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;
比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。
paragraph
Web前端岗位面试题有哪些
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。
3.Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html表示层 CSS行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png透明使用js代码改
6.Min-height最小高度！Important解决’
7.select在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.标签上title与alt属性的区别是什么?
Alt当图片不显示是用文字代表。
Title为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释css sprites，如何使用。
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用 window.top.document.compatMode可显示为什么模式
15.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（==–===）
3.split() join()的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev= ev|| window.event
document.documentElement.clientWidth|| document.body.clientWidth
Var target= ev.srcElement||ev.target
8.ajax请求的时候get和post方式的区别
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse鉴于安全性考虑使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15.如何阻止事件冒泡和默认事件
canceBubble return false
16.添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
web美工的面试题
面试回答问题的思路是决定你是否可以留在用人单位的依据。那关于web美工的一些面试题是什么呢?下面是小编为你整理的web美工的一些面试题，希望对你有帮助。
web美工面试题
1.网页设计你通常用到哪些软件?
Photoshop(PS)、Dreamweaver(DW)、Illustrator(AI)、Fireworks(FW)、CorelDraw(CDR)、Indesign(ID)、Flash等(以上为较常用软件)
2.目前常用的WEB标准静态页面语言是?
xHTML(高级一点的回答：现在HTML5也很火)
3. RGB分别指代哪三种颜色?
R指红色red，G指绿色green，B指蓝lue
4.网页经常用到的图片格式有几种?它们之间有什么不同点和用途?
三种，分别是jpg、gif和png
Jpg是一种有损图片压缩格式，支持的颜色数量很多，适用于保存颜色较多且比较复杂的摄影图片或写实图像，且生成的文件体积较小;
Gif是一种无损图片压缩格式，最大支持256种颜色，支持透明，可保存动画，适用于保存颜色较简单的卡通图像;
Png是一种压缩算法优于gif的无损图片压缩格式，能在保证最不失真的`情况下尽可能压缩图像文件的大小，支持图像透明，不支持动画，只要不是需要动画效果的颜色较简单的图片，优先采用png格式输出。
5.在table标签中，tr指什么?，td指什么?
tr指表格中的一行，td指表格中的单元格。
6.在xHTML标准中，控制网页背景色的标记是什么?
Background-color
7.让一个div层水平居中于浏览器窗口中，最简单的实现方法是?
为这个div层添加属性：style=”margin:0px auto“
8.标记br和p有什么区别?
两者都有换行的作用，但用br换行后不会空行，而p换行后会空一行，另起一个空的段落。
标记无对应的结束标记，而
标记必须和
搭配使用。
9.请列举出几大当下主流的浏览器，并说出你最喜欢的一个和最不喜欢的一个，说明原因?
IE、Chorme(谷歌浏览器)、FireFox(火狐浏览器)、Opera(欧朋浏览器)、Safari(苹果浏览器)【以上这5款是国际5大主流浏览器，比较专业的人员会回答出这5个。至于360浏览器、TT浏览器、猎豹浏览器、搜狗浏览器之流，都是基于Chorme内核编写的。】
【比较专业的人员，在回答最不喜欢的浏览器时会选IE6，因为IE6是一个很落伍的浏览器，BUG很多，对许多效果的支持性也很差;最喜欢的浏览器这个问题完全是仁者见仁智者见智，能自圆其说即可。】
10.网页中的文字小于多少像素就会开始影响识别?
12像素
11.设置一个链接在新窗口打开的方法是?
为链接添加”target=”_blank”属性
12. CSS中的id标签和class标签，哪个定义的级别高?
id的级别高于class
13. CSS样式表的三种使用方法分别是?
外部连接式：在网页头部使用链接引入一个外部的CSS样式表。举例：
内部级联式：在当前网页头部直接书写一个CSS样式。举例：
直接嵌入式：直接在元素内部嵌入CSS样式。
14.为一个div层添加边框为2像素的黑色虚线边框效果的CSS代码是?(请使用直接嵌入式)
15.位图与矢量图的区别是什么?
位图是由单个像素点组成的点阵图像，放大图像尺寸会使图像失真。位图能表现丰富的色彩、真实的画面，分辨率越高，图像质量越好;
矢量图是具有几何特性的图形，其基本组成单位是锚点和路径，无论放大多少倍画面都不会失真，矢量图绘制的物体不如照片表现得逼真，无法达到像照片一样丰富的画面效果，因此矢量图常用于制作标志、插图、图案等色块与线条特征比较明显的图形。
16.请列举出你所知道的PS抠图方法?
套索工具，快速蒙版，通道，魔棒工具，蒙版，钢笔工具，橡皮擦工具等【要求至少回答3种】
17.在PS中哪些命令可以调节图像的亮度?
亮度/对比度，曲线，色阶，高光/阴影
18.如果背景是黑色，那么字体用什么颜色能突出字体，且不显得刺眼?
字体颜色选择与黑色色系较为接近的颜色：
如#999999的灰色，#006699的靛蓝色等。
【不能选择纯白色，因为太刺眼】
19.要做一个主题为节能、环保的网页页面，你打算如何排版和用色?
【无标准答案，可自由发挥，只要言之有物，言之有理即可。回答要点：有视觉冲击力，醒目易识别，选用贴近自然的颜色(如绿色)和与自然环境相关的图像，突出绿色环保、高科技节能的特点】
20.为了使整个网站风格保持一致性，你会采取哪些措施?
【无标准答案，可自由发挥，只要言之有物，言之有理即可。回答要点：导航条统一，图像风格一致，色彩一致性，结构一致性】
css面试题的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端常见面试题、css面试题的信息别忘了在本站进行查找哦。