常见前端开发面试题

为API生，为框架死，为debug奋斗一辈子，吃符号亏，上大小写的当，最后死在产品上。

1、前端页面有哪三层构成，分别是什么？作用是什么？

结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。

表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。

行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

2、Doctype是什么？如何触发严格模式与混杂模式模式？区分它们有何意义？

Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择，分别是：

　　1、过渡的(Transitional，也叫混杂模式)：要求比较宽松，允许继续使用HTML4.01的标识，完整声明为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">

　　2、严格的(Strict)：要求严格的DTD，不能使用任何表现层的标识和属性，完整声明为

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　3、框架的(Frameset)：专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD，完整声明为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　定义成相应的声明就可以触发相应的模式。

区分的意义是为了最终能达到数据与表现相分离的目地。

3、简述什么叫做标签语义化，优点是什么？

所谓标签语义化，就是指使用正确的标签表达合适的网页内容
语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义网页内容就容易被搜索引擎抓取

4、XHTML与HTML对比？

1、所有的标记都必须要有一个相应的结束标记

例如：<div></div> <p></p> <ul><li></li></ul> <span></span>

如果是单独不成对的标签，在标签最后加一个"/"来关闭它，例如：<br /> <hr /> <img /> <input />

2、所有标签的元素和属性的名字都必须使用小写

错误：<TITLE></TITLE> <BODY></BODY>

正确：<title></title> <body></body>

3、所有的XHTML标记都必须合理嵌套

错误：<p><b></p></b>

正确：<p><b></b></p>

4、所有的属性必须用引号""括起来

错误：<img width=300 />

正确：<img width=”300” />

5、把所有<和&特殊符号用编码表示

空格：  <：< >：> &：&

6、给所有属性赋一个值

错误：<input …… checked />
正确：<input …… checked= "checked"/>

7、不要在注释内容中使“--”；“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。

错误：

正确：

8、图片必须有说明文字

错误：<img src=”图片路径地址” title=”图片描述” />

正确：<img src=”图片路径地址” title=”图片描述” alt=”图片描述” />

9、XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：

<html>

</html>

5、行内元素和块级元素各有哪些？

行内元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>、<input>

块级元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>

6、行内元素和块级元素如何相互转换？

行内元素可以通过display:block转为块级元素。块级元素可以通过display:inline转为行内元素。另外块级元素的margin和padding都正常，行内元素左右maring正常，上下不识别，也就是说不能通过margin-top和margin-bottom来改变行高

7、Display都有哪些属性？

Display的各个属性值

none 此元素不会被显示。（常用）

block 此元素将被显示为块级元素，此元素前后会带有换行符。（常用）

inline 默认。此元素会被显示为一个内联元素，元素前后没有换行符。（常用）

Inline-block 行内块元素。（常用）

list-item 此元素会被作为列表显示

run-in 此元素会根据其内容被作为块级元素或内联元素显示。

compact 此元素会根据其内容被作为块级元素或内联元素显示。

marker

table 此元素会被作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table 此元素会被作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group 此元素会被作为一个或多个行的分组来显示（类似<tbody>）。

table-header-group 此元素会被作为一个或多个行的分组来显示（类似<thead>）。

table-footer-group 此元素会被作为一个或多个行的分组来显示（类似<tfoot>）。

table-row 此元素会被作为一个表格行显示（类似<tr>）。

table-column-group 此元素会被作为一个或多个列的分组来显示（类似<colgroup>）。

table-column 此元素会被作为一个单元格列显示（类似<col>）

table-cell 此元素会被作为一个表格单元格显示（类似<td> 和 <th>）

table-caption 此元素会被作为一个表格标题显示（类似<caption>）

8、使用CSS，让一个div消失在视野中；发挥想象力？

1.opacity：0； 2.height:0; 3.设置z-index的值； 4.display:none; 5.visibility:hidden;

9、Display:none与visibility:hidden的区别?

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

10、web标准中定义id与class有什么区别吗

一、web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他；

二、属性的优先级问题 ID 的优先级要高于class,看上面的例子

三、方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

11、Css盒模型

CSS盒模型：网页设计中的每个元素都是长方形的盒子，如图

盒子本身的大小的计算：

width(即offsetWidth)：width + padding-left + padding-right + border-left + border-right

height(即offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom

Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。

12、CSS引入的方式有哪些?

（1）行内式：在标签的style属性中设置CSS样式，如下：

（2）内嵌式：将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中：

body{padding:0; margin:0;} </style>

（3）链接式：将一个.css文件引入到HTML文件中，在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，如下：

（4）导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>

标记中，使用的语法如下：

@import"mystyle.css"; /*此处要注意.css文件的路径*/

</style>

13、link和@import的区别是?

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

　　1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

　　2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

　　3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

　　4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

14、CSS选择符有哪些？

CSS选择符主要有以下10类：

　　1、通配选择符：*{margin:0px;}

　　2、类型选择符：a{text-decoration:none;}

　　3、属性选择符：input[type="button"]{padding:5px;}

　　4、包含选择符：div.code a{text-decoration:none;}

　　5、子对象选择符：ul.test>li{font-size:14px;}

　　6、ID选择符：#test {color:red;}

　　7、类选择符：.test{color:red;}

　　8、选择符分组：body,ul,li{margin:0px;}

　　9、伪类及伪对象选择符：div:first-letter{font-size:16px;} a.test:hover{text-decoration:underline;}

　　10、相邻选择符：li+li{font-weight:bold;}

15、哪些属性可以继承？

CSS可以继承的属性有：

　　1、文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

　　2、列表相关：list-style-image、list-style-position、list-style-type、list-style

　　3、颜色相关：color

　　4、透明度：opacity(opacity的继承有问题，子元素会继承祖元素的opacity，但是无法更改。)

　　另外，font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。

16、优先级算法如何计算？

重要性和来源的优先级排序从低到高是：

　　1、浏览器默认样式

　　2、用户在浏览器中定义的普通样式（normal规则，不带important规则）

　　3、开发人员定义的普通样式（ normal规则，不带important规则）

　　4、开发人员定义特殊样式（带important规则）

　　5、用户在浏览器中定义特殊样式（带important规则）

　　另外还有一些原则：

　　1、相同的样式在CSS规则后添加了!important的优先于没有添加的。

　　2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。

　　3、内联样式优先于用link引入的样式和页面上<style>里的样式。

17、内联和important哪个优先级高？

important高，DEMO：

.test{padding:10px;border-radius:5px;border:1px solid red!important;}

</style>

18、你如何管理CSS文件、JS与图片？

1、对各个项目中CSS，JS里的稳定的通用代码进行提取，形成公共文件，然后利用CDN等资源进行缓存，减轻服务器压力。

2、去掉JS、CSS里的冗余代码，对代码进行精减。

3、对JS、CSS进行压缩合并，减少请求次数。

4、对页面上的小图标，背景等图片进行合并，减少请求次数。

19、背景图片合并原理是什么？

利用background-image；background- repeat；background-position；组合来进行背景图片的定位

20、合并背景图片的优缺点？

优点：1、减少网页的HTTP请求次数，从而提高页面的性能；2、解决了给图片命名的困扰；3、更换风格方便

缺点：1、合并图片的时候比较麻烦，需要进行合理的排版留出合理的空间；2、开发的时候比较麻烦，需要准确测量每一个背景单元的精确位置；3、维护比较麻烦，如果需要添加新的图标就需要更改CSS

工具：CSS Sprites样式生成工具：adobe air（自行下载了解）

21、如何居中一个浮动的元素？

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

22、背景透明，背景之上的文字不透明方法？

方法一：

.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}

.content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;

filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/

.content p{ position:relative;} /*实现IE文字不透明*/

</style>

<div class="content"><p>背景透明，背景之上的文字不透明方法</p></div>

</div>

方法二：position方法

.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}

.content { width:180px; height:260px; margin:0px auto; padding:30px 30px; postition:relative;}

.content p.pos1{ width:180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1;}

.content p.pos2{ width:180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; color:#fff; z-index:2'}

</style>

<p class="pos1">背景透明，背景之上的文字不透明方法</p>

<p class="pos2">背景透明，背景之上的文字不透明方法</p>

</div>

方法三：css3方法
<style type="text/css">

.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}

.content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6);}

</style>

<div class="content"><p>背景透明，背景之上的文字不透明方法</p></div>

</div>

23、左边固定，右边自适应方法？

方法一：position:absolute

方法二：用float来解决

方法三：用float来解决

24、三栏布局；左定右定中间自适应？

方法一：绝对定位方法

html,body { margin:0; padding:0; height: 100%; }

#left, #right { position: absolute; top:0; width: 220px; height: 100%; }

#left { left:0; }

#right { right:0; }

#main { margin: 0 230px; height: 100%; }

方法二：浮动方法

#left, #right { float: left; width: 220px;height: 200px; background: blue; }

#right{ float: right; }

#main { margin: 0 230px; background: red; height: 200px; }

<div id="right">right</div>

方法三：负的margin值

#main { float: left; width: 100%; }

#mainContainer { margin: 0 230px; height: 200px; background: green; }

#left { float: left; margin-left: -100%; width: 230px }

#right { float: left; margin-left: -230px;width: 230px; }

#left .inner, #right .inner { background: orange; margin: 0 10px; height: 200px; }

这种方法如果在ie下会存在布局混乱的bug，你可以将div#right和div#left中的width值稍作修改：

#left, #right { float: left; margin: 0 0 0 -271px; width: 50%; *width: 49.9%; }

<div id="mainContainer">main content</div>

</div>

<div id="leftContainer" class="inner">left content</div>

</div>

<div id="rightContainer" class="inner">right</div>

</div>

方法四：CSS3 Flexbox

.grid { display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; }

.col { padding: 30px; }

.fluid { flex: 1; }

.fixed { width: 400px; }

</div>

25、三栏布局，中间内容不确定高度，问怎么让两边的背景始终与内容高度一致？

纯css方法一：

/*主要利用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的*/

body, p, ul { margin:0; padding:0; }

#wrap { overflow:hidden; width:1000px; margin:0 auto; }

#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }

#left { float:left; width:250px; background:#00FFFF; }

#center { float:left; width:500px; background:#FF0000;}

#right { float:right; width:250px; background:#00FF00; }

</style>

</div>

<p>center</p>

</div>

<p>right</p>

</div>

纯css方法二：

/*利用position border技巧方法*/

* {margin:0;padding:0;}

.header, .footer {width:900px;height:50px;margin:0 auto;background:#E5E5E5;}

.content {position:relative;width:600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}

.mainBox {width:580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}

.sideBar1 {position:absolute;top:0;right:-130px;width:130px;}

.sideBar2 {position:absolute;top:0;left:-170px;width:170px;color:#FFFFFF;}

</style>

<div class="mainBox"><p>center</p><p>center</p><p>center</p></div>

<div class="sideBar2"><p>right</p></div>

</div>

纯css方法三：

/*用背景方法*/

body, p, ul { margin:0; padding:0; }

#wrap { width:1000px; margin:0 auto; background:url(1.png) repeat-y; overflow:hidden;}

#left { float:left; width:250px;}

#center { float:left; width:500px;}

#right { float:right; width:250px;}

</style>

</div>

<p>center</p>

</div>

<p>right</p>

</div>

js方法：

* {margin:0;padding:0;}

#sidebar{float:left; width:25%; background:#f00;}

#right{float:left; width:50%; background:#ccc;}

#ccc{ float:left; width:25%; background:green;}

</style>

function SameH(sidebar,right,ccc)

{

var t=document.getElementById(sidebar);

var b=document.getElementById(right);

var c=document.getElementById(ccc);

var a = new Array();

a[0]=t.scrollHeight;

a[1]=b.scrollHeight;

a[2]=c.scrollHeight;

var MaxValue;

MaxValue = a[0];

for(n in a){

if (a[n] > MaxValue) {

MaxValue = a[n];}

}

t.style.height = MaxValue + "px";

b.style.height = MaxValue + "px";

c.style.height = MaxValue + "px";

}

</script>

<div id="sidebar">sidebar </div>

</div>

SameH("sidebar","right","ccc");

</script>

26、css实现全兼容的菱形导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>菱形导航菜单</title>

ul,li,a,span{margin:0;padding:0;list-style:outside none;height:25px;line-height:25px;display:block;}

ul{padding-left:25px;}

ul li{float:left;display:inline;margin-right:26px;}

ul li a,ul li a span{background:url(http://www.codefans.net/jscss/demoimg/201112/navBg.png) -25px 0 no-repeat;}

ul li a{padding:0 25px;font-size:12px;color:#FFF;position:relative;float:left;text-align:center;}

ul li a span{position:absolute;top:0;width:25px;}

ul li a .al{left:-25px;background-position:left 0;}

ul li a .ar{right:-25px;background-position:right 0;}

ul li a:hover{background-position:-25px -25px;}

ul li a:hover .al{background-position:left -25px;}

ul li a:hover .ar{background-position:right -25px;}

ul li a:active,ul li.current a{background-position:-25px -50px;}

ul li a:active .al,ul li.current a .al{background-position:left -50px;}

ul li a:active .ar,ul li.current a .ar{background-position:right -50px;}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

27、Css实现小三角

/*三角向上*/

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

/*三角向下*/

#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

/*三角向左*/

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

/*三角向右*/

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

/*直角右下*/

#triangle-bottomright {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

28、清除浮动的方法有哪些

方法一：如果高度是固定的，给父级加height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

方法二：父级结尾处添加额外的标签<div style="clear:both;"></div>

.clearfloat{clear:both;}

<div class="right">Right</div>

</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方法三：父级div定义伪类:after和zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

.div2{background:#800080;border:1px solid red;margin-top:10px;width:98%}

<div class="right">Right</div>

</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

方法四：父级div定义 overflow：hidden

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}

.div2{background:#800080;border:1px solid red;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

<div class="right">Right</div>

</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

方法五：父级div定义 overlow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

方法六：父级div也一起浮动

原理：所有代码一起浮动，就变成了一个整体

优点：没有优点

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。

方法七：父级div定义 display:table

原理：将div属性变成表格

优点：没有优点

缺点：会产生新的未知问题。

建议：不推荐使用，只作了解。

方法八：父级结尾处添加标签<br style="clear:both;" />

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

建议：不推荐使用，只作了解。

29、Position属性是什么含义？都有哪些值，都什么含义？

Position规定元素的定位类型:包含值有：static，relative，absolute，fixed

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

30、怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css">

div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

</style>

posted on 2017-03-18 21:04 法门扫地僧阅读(238) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

法门扫地僧

常见前端开发面试题

导航

公告