©2016-2025 Matools All rights reserved,
粤ICP备17059708号
面试题
* 如何清除一个标签的子标签的浮动？
清除浮动的几种方法：
* 父元素有高度，此时就没有浮动的影响了
* 父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;
* 后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；
* 两个盒子之前加上一个<div class="cl"></div> .cl{clear:both}，隔墙法，盒子还是没有高度。
* 盒子加上::after{content:"",clear:both;}
，内墙法，这个元素自己最后的子元素是一个标准流元素，所以一下子给这个父盒子撑高了。特别好用。
2、描述一下浮动会造成什么影响，如何居中一个浮动元素？
【脱标】浮动的元素脱离标准文档流，【贴边】左浮动就会贴左边，又浮动贴右边，贴上一个兄弟元素的边，【字围】字会环绕这个浮动元素，【收缩】不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度、高度，原来的块级元素如果不写
width现在会自动缩减为内容宽度。
浮动的元素要想居中，必须相对定位。相对定位利用margin-left:50%; left:-宽度一半。
原理就是margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者
transform:translate(-50%,0);
也可以left:50%; margin-left:-宽度一半;
3、简单说明绝对定位和浮动的区别和应用。
绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。
浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both属性让标准流中的其他元素在此之后依次排列。
4、当float和margin同时使用时，如何解决IE6的双倍边距？
当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。解决方法：
1) 改变margin的方向，float:left; margin-right:20px; 浮动向左，margin向右
2) 给第一个元素单独写一个类叫做.no1 此时.no1{_margin-left:一半的margin;}
3) 用display:inline;不用浮动了
5、行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些？
行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。
块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。
* CSS引入的方法有哪些？都有什么区别？
外链式（也叫作外联式）<link href="1.css" type="text/css" rel="stylesheet" />
内嵌式（也叫作内联式）<style type="text/css"></style>
导入式<style>@import url(1.css)</style>
行内式<div style="width:200px;background:red;"></div>
内嵌式速度快，但是改版麻烦，可以减少HTTP请求。
外链式方便多个网页同时使用一个样式表。
行内式通常用于开发时候的临时测试，语义不清晰，不能使用。
导入式不好用，因为页面首先加载，然后导入样式表，页面在1s~2s内会有没有样式表的情况，然后突然有了样式。
7、在书写高效CSS时，需要考虑哪些问题？
基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小、多用公共类、让css变得不臃肿。
我在工作中，经常使用gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div
p{font-size:10px;color:green;} p{color:green;} 它会智能变为：div p{font-size:10px;}
p{color:green;}。
8、简述一下什么是内容与表现分离。
HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold;
text-decoration:underline; font-style:italic;
用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;CSS负责样式，不要写行内样式。
9、CSS层叠是什么？
CSS全名叫做层叠式样式表，cascading style sheet，cascading就是层叠的意思。层叠具体有两层含义：
1） 比如一个标签它可以通过多种手段给他添加属性。
<h1 id="logo" class="spec"></h1>
#logo{}
.spec{}
h1{}
body{}
此时这个标签就被多个选择器添加属性，如果属性有冲突，CSS有精确的权重计算方法来确定“听谁的”。
2） 一个选择器可以同时作用在多个标签身上，比如同一个类名可以加在不同的标签身上，也有一些属性可以继承下去。
10. 请解释浏览器是如何根据CSS选择器选择对应元素的？
#表示id，浏览器会寻找拥有id的元素。.表示类名class属性，空格表示后代，> 表示子元素, + 表示下一个兄弟 ， ~ 后面所有兄弟。
11、以下有若干个CSS选择器，请给出他们的优先级顺序。
div h1、 #div h1、 div h1 #_h、 div h1.c_h
div h1权重(0,0,2)
#div h1权重（1,0,1）
div h1 #_h权重（1,0,2） 这个最大
div h1.c_h 权重（0,1,2)
12、在HTML代码中如何做SEO？
* h标签合理使用，strong标签语义比较强，合理使用。
* title、<meta name="description" />、<meta name="keywords" />要合理设置
* a标签要写title，img要写alt
* div要有合理类名，比如.content、.header、.address，便于搜索引擎爬虫检索
* HTML层次清晰，id不要重复，便于搜索引擎爬虫检索
13、CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？
* 使用百分比布局，用百分比来写宽度、marign、padding
* 使用rem当做单位，写一点JS让html根元素的字号随着浏览器宽度的变化而等比例变化
* 使用媒体查询让不同宽度的浏览器使用不同的样式表，<link href="1.css" media="screen and
(min-width=900px)" />
14、一个页面（HTML）由哪几部分构成？分别是什么？作用是什么？
由head和body构成。
head里面放置一些配置信息，比如配置title、keyword、description、charset等等信息，不会显示在浏览器中。
body是内容，会显示在浏览器的屏幕中。
15、你如何理解HTML的语义化？能否接触或了解重构？
根据语义来选择合适的标签，而不是表现形式。HTML只负责语义，不是说要加粗了，就放一个h，只是可以让开发者能写出优雅的代码，并且利于SEO。
网页重构指的是将Table布局的网页变为标准DIV+CSS代码，让结构和表现分离，方便维护
16、如何区别CSS中的display:none和visibility:hidden？
display:none; 释放了自己的位置，后面的元素会上来占据现有位置，并且如果内部有img元素，此时img元素不会加载；
visibility:hidden如同opacity：0；只是不可见了，位置还是保留的。
17、给文字添加阴影用哪个属性？
text-shadow:1px 1px 1px red;
18、display属性值的常用取值不包括（c）。
A:inline B.block C.hidden D.none
19、标签上的alt与title属性区别是什么？
alt是alternate的简写，当图片不可以显示的时候的替代文本
title是a、img、label等等标签的悬浮提示文本。
20、清除浮动和闭合浮动的不同点？
设置高度的元素叫做闭合浮动。
清除浮动回答清除浮动的5种方法即可。
21、rem为什么可以缩放，以什么为基准？
rem以html的字号为基准，比如2rem，而html的字号是16px，此时2rem就是32px。写一段JS让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。
22、下面哪一个标签可以产生一个回车换行（b）
A.<hr> B.<br> C.<tr> D.<tl>
23、下面哪一个是&的符号码（B）
A." B.& C.&comp D.
24、font-size：62.5%，解释一下如此设计字体大小的原因？
因为默认情况下html标签的默认字号是16px，此时如果取默认，那么1em就是16px，此时fotn-size:62.5%; 此时就能将HTML
这个根元素的字号变为10px。此时页面上所有元素的尺寸就方便计算了。但是62.5%逐步退出了历史舞台，因为Chrome30版本不支持12px以下的字号了。
25、 前端工程师html<br></br>
以上代码中不合理的部分有哪些？
首先如果要空格，应该使用css中的text-indent:2em; 并且如果要换行，应该使用语义标签ｐ。非要用ｂｒ，也要写<br />，而不是标签对儿。
26、常见的网页图像格式有（C）
A.gif，tiff B.tiff，jpg C.gif，jpg
D.tiff，png
27、<img src=”name” align=”left”>的意思是（A）？
A.图像对于周围的文本左对齐
B.图像对于周围的文本右对齐
C.图像对于周围的文本底部对齐
D.图像对于周围的文本顶部对齐
28、Form中的input可以设置readonly和disable，请问这两项属性有什么区别？
readonly表示只读， 不能更改元素内容。仅仅能作用在text/password/textarea上面。
disabled表示不可用，能作用在所有控件上面，比如select、radio、checkbox。
29、列举CSS中position的参数和作用？
四种定位：absolute、relative、fixed、static。
展开说三种定位的参考点是什么。
absolute：绝对定位。使用left，right，top，bottom
等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index
属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分
fixed：固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。可通过z-index进行层次分级。
30、为什么利用多个域名来存储网站资源会更有效？
* CDN，表示让用户从离自己最近的下载点下载资源。
* 突破服务器的带宽限制。
* 节约主域名的连接数，提升并发
* 更加安全，比如静态资源服务器上面，不能运行任何代码的。
31、定义一个div，在IE8下高度为100px，在IE7下为120px，在IE6下为140px。
height:120px;
-height:140px;
height:100px\0;
还有HTML的hack：
<!--[if lt IE 7]><!--您的代码--><![endif]-->
32、当p的元素设置为bold时，以下哪条CSS语句的说法是正确的（D）
A.<p style=”text-size:bold;”> B.<p style=”font-size:bold;”>
C.p{text-size:bold;} D.p{font-weight:bold;}
33、网页设计采用div+css有什么好处？
语义清晰，DIV负责结构，CSS负责样式。便于更改，缩减页面代码，对SEO有利。便于改版，便于控制和排班布局。表现和内容相分离。
34、介绍盒子模型，说说标准盒子模型和IE盒子模型有什么区别，以及触发不同模型的条件？
标准盒子模型padding、margin外扩
IE盒子模型是padding、marign内减。如同写上了box-sizing:border-box;
width=content+padding+border
要加上标准DTD，可以让IE使用标准盒子模型。去掉DTD此时浏览器叫做Quirk(怪异模式)。
35、CSS哪些属性可以继承？
text-开头的、line-开头的、font-开头的、color、cursor。
不能继承的是一切盒模型属性。
36、<!DOCTYPE>标签的定义与用法，你常用的DOCTYPE是什么？
用在html标签之前，定义是HTML什么版本和XHTML什么版本。
我常用<!DOCTYPE html>是html5的声明头。
Strict版本不能使用b、u、i
transitional版本可以使用b、u、i，所以HTML4中我经常使用这个。
37、介绍你所知道的CSS hack技巧。
hack就是浏览器留的后门，方便对这一个版本的浏览器单独定义样式，
_ 和 - 针对IE6，*width、+width用于IE7及以下。
color:red\0; 是IE8、9、10的hack。
color:red\9\0：是IE9、10的hask
还有HTML中：<!--[if lte IE 7]> 代码 <![endif]-->
38、请用div+css简单写出一段“返回顶部”的悬浮效果。
<a name="top"></a>
...
...
..
<div class="top">
<a href="#top"></a>
</div>
样式:
.top{position:fixed;right:20px;bottom:20px;width:100px;height:100px;}
39、内联和important哪个优先级高？
<p style="color:red"></p>
还有样式表：
p{color:blue !important;}
important优先级高。如果属性是通过继承影响的，此时!important无效。
40、请解释一下CSS的优先级，并说明优先级如何计算？
当多个选择器定义了同一个属性为不同值，根据优先级来确定以谁为准。
id最大，类第二，标签名第三。数个数即可。比如：
#box ul li.spec 权重就是（1,1,2）
#box ul li权重就是（1,0,2）
如果是继承，权重是0。如果都是继承，有“就近原则”。
41、如何解决IE6下select优先级高于div而导致的无法遮盖问题？
再写一个div，用此div盖住select。当select应该出现的时候，此时让div盖住它。
42、定位的值有哪几种？区别是什么？
absolute：绝对定位。使用left，right，top，bottom
等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index
属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分
fixed：固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。可通过z-index进行层次分级。
43、在HTML页面中，position的默认值是什么？
static。
44、一个宽度不确定的div里面放三个水平对齐的div，左右2个div宽度固定为150px，中间那个div充满剩余的宽度。
就是固比固的思路，两个固定的元素绝对定位，中间的元素标准流中。此时利用绝对定位无视父盒子的padding，此时给父盒子加padding
，错开左右两边的宽度即可。
<style type="text/css">
*{
margin: 0;
padding:0;
}
.part1{
position: absolute;
width:150px;
height: 400px;
background-color: orange;
left:0;
top:0;
}
.part2{
width:100%;
height:400px;
background-color:green;
}
.part3{
position: absolute;
width:150px;
height: 400px;
background-color: orange;
right:0;
top:0;
}
body{
padding: 0 150px;
}
</style>
45、IE如何让超出宽度的文字显示为省略号？
p{
width: 50px; /*必须设置宽度*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*以省略号...显示*/
white-space: nowrap; /*强制不换行*/
}
46、首行缩进2个字符的CSS代码是什么？
text-indent:2em;
47、为什么在firefox下文本无法撑开容器的高度？
如果我们一个盒子写了height那么此时文本无法撑开盒子高度，请使用min-height。
48、写一段CSS代码，让Chrome支持小于12px的文字。
font-size:12px; -webkit-transform:scale(0.8);
49、下面哪一个属性可以在新窗口打开一个链接（B）
A. _parent B. _blank C. _self D. _top
50、谈谈对CSS Sprites技术优缺点的理解。
CSS精灵技术，优点就是减少HTTP的请求数量，加快网页渲染速度。便于一整套更换，比如圣诞节了，此时可以改变CSS中的各种按钮、logo变成圣诞风格，一下子全变了。
缺点就是不能随意改变之前已经在精灵上面的图片的位置，做repeat-x、repeat-y精灵难以实现。
51、CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？
:hover、:visited、:link、:active。
link没有点击的
visited：点击过的
hover悬停的
active是按下那一瞬间。
都兼容，但是要按照“爱恨准则”link、visited、hover、active放置。
52、以下链接到电子邮件的正确格式是：（B）
A.<a href=”mailto://[email protected]”>邮箱</a>
B.<a href=”mailto:[email protected]”>邮箱</a>
C.<a href=”#mailto:[email protected]”>邮箱</a>
D.<a href=”mail to://[email protected]”>邮箱</a>
<a href="mailto:[email protected]">Email</a>
53、怎样解决超链接访问过后hover样式不出现的问题？
要按照“爱恨准则”link、visited、hover、active放置。
54、请列举IE6的一些Bug的解决办法。
双倍margin：浮动的方向设置的和marign方便不相同即可。
有链接的图片的边框：img{border:none}即可。
3px bug ：给容器设置display:inline-block即可。
overflow:hidden失效，用zoom:1;来解决。
55、一个网页制作完成后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面？
兼容性、js特效的bug、流畅度、加载速度的测试。
56、在网页设计与制作时，为了使制作出来的网页下载速度快、布局合理、浏览方便、和谐悦目，应注意哪些问题？
* 网页文件大小
* 页面布局
* 页面导航
* 图像大小
* 颜色搭配
* 背景图像
57、IE6下为什么无法定义1px左右高度的容器？
加上伴生属性 ： _font-size:0;
58、写出5条Firefox和IE的脚本兼容问题？
绑定监听：IE是attatchEvent() 、 firefox是addEventListener();
计算样式：IE是computedStyle、 firefox是getComputedSyle();
滚动事件：IE是MouseWheel、 firefox是onmousewheel
表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]
事件对象： IE是window.event属性， firefox必须给事件处理函数注入实参event
热门工具 换一换