web前端面试题
第一部分HTML+CSS
- 标签上title与alt属性的区别是什么？
- 答：title是设置鼠标移动到图片上时显示的内容，而alt是用于当图片没有正常显示时出现的提示文字，另外alt还用于在seo中针对图片的优化说明。
标签内的文字是什么颜色的?
<style>
.classA {color:blue !important;}
.classB {color:red;}
</stye>
<body>
<p class="classB classA' style= color:green'>123</p>
</body>
- 答:文字是blue蓝色，! important，可以更改默认的CSS样式优先级规则，使该条样式属性声明具
- css单位px,em,rem的区别。
-
答: px像素(Pixel)。相对长度单位。 像素px是相对于显示器屏幕分辨率而言的 px的特点: 1.
IE无法调整那些使服px作为单位的字体大小;
2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em, rem, 但是96%以上的中国网民使用IE浏览器(或内核)。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 -
EM特点:
1.em的值并不是固定的；
2.em会继承父级元素的字体大小。 -
REM:是CSS3新增的一一个相对单位(rootem, 根em)，这个单位引起了广泛关注。这个单位与em有什么区别呢?
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTMI根元素。这个单位可谓集相对大小和绝对大小的优点于一-
身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了1E8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写-一个绝对
单位的声明。这些浏览器会忽略用rem设定的字体大小。
4.以下哪些是css伪类?(c,d)
A.after B.before C.hover D.nth-child
(ps: after和before是伪元素)
5.以下不是html5元素的有哪些?(b,c)
A.footer B.center C.font D.frame
6.下列有关css属性position的属性值的描述。语法错误的是？(b)
A. static：没有定位，元素出现在正常的流中。
B. fixed：生成绝对定位的元素，相对于父元素进行定位。
C. relative：生成相对定位的元素，相对于元素本身正常位置进行定位。
D. ansolute:生成绝对定位的元素，相对于static定位以外的第一个祖先元素。
7.CSS实现隐藏页面元素的方法有哪些？
- display:none; visibility:hidden; opacity:0; position:anbolute;
left:-10000px;
8.xhtml和html有什么区别?
- xtml比HTML严谨性会高点，然后基本语言都还是沿用HTML的标签，只不过废除了部分表现层的标签，同时在标准上要求高了点比如标签的严格嵌套，标签结束等等。
9.每个html文件里开头都有个Doctype。这是代表了什么意思?
- 版本声明
10.strong与em的异同?
- 语义都是语气加重，strong在显示上是变粗，而em是斜体显示。
11.行内元素有哪些？块级元素有哪些?
块级:<ol>,<ul>,<dl>,<table>,<h1>...<h6>,<p>,<blockquote>,<dt>,<address>,<caption>,<div>
内联(行内): a-锚点，abbr-缩写，acronym-首字，b-粗体，bdo - bidi override，big-大字体，br-换行，cite-引用，code-计算机代码（在引用源码的时候需要），dfn-定义字段，em-强调，font-字体设定（不推荐），i-斜体，img-图片，input-输入框，kbd-定义键盘文本，label-表格标签，q-段引用，s-中划线（不推荐），samp-定义范例计算机代码，select-中划线，strong-粗体强调，sub-下标，sup商标，textareat-多行文本输入框，tt-电传文本，u-下划线。
12.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？
-
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child） -
除了这些都可以继承：display、margin、border、padding、background、height、min-height、width、min-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before和unicode-bidi
-
根据这四个级别出现的次数计算的到CSS优先级
-
CSS优先级的计算规则如下:
1.元素表标签中定义的样式（style属性）加1，0，0，0
2.每个ID选择符（如#id），加0，1，0，0
3.每个Class选择符（如.class）、每个属性选择符(如[attribute=]、每个伪类（如：hover）)加0，0，1，0
4.每个元素选择符（如p）或伪元素选择符（如：firstchild）等，加0，0，0，1
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。
13.什么叫优雅降级和渐进增强?
- 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack时间过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
- 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
14.如何解决浏览器兼容问题？
-
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
-
css兼容性问题：
-
1.cursor：hand VS cursor：pointer
firefox不支持hand，但ie支持pointer
解决方法：统一使用pointer -
2.innerText在IE中能正常工作，但在FireFox中却不行
解决方法:
需用textContent
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById('element').innerText = "my text";
}else{
document.getElementById('element').textContent = "my text";
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
