Web前端⾯试题及答案——HTMLCSS、JS、DOM
css特效文字虽然个⼈认为有些知识不是必须记忆的，需要的时候可以查阅笔记，但是对于得到⾯试的机会还是很重要的。
HTML&CSS
1、清除浮动的⼏种⽅式，各⾃的优缺点
清除浮动：使⽗元素围住浮动的⼦元素，避免对后续元素造成影响。
（1）给⽗元素设置overflow:hidden；或float:left；或position:absolute；或position:relative;。触发块级格式化上下⽂（BFC），从正常⽂档流脱离，⽗元素本⾝实现独⽴布局，围住其中的浮动元素。但专门这样设置，可能会改变布局，对于后三者，使block变为inline-block，⽗元素宽度变化。
适⽤于⽗元素也需要浮动。
（2）在⼦元素后⾯添加空的block元素，并设置其样式为clear:both。添加了额外的元素，且block元素带有margin等。
（3）在⽗元素上加clearfix类名，在⽗元素的最后加块级元素.（伪元素选择器），通过clear:both使⽗元素括住浮动的元素来清除float的影响，使.不可见。常⽤这种⽅式，Bootstrap⽀持clearfix类名。
通常推荐这种⽅式。
<style>
.clearfix::after{content:".";display:block;clear:both;height:0;visibility:hidden;}
.clearfix{zoom:1;} /*IE低版本不⽀持after*/
div{background-color:red;}
#p1{float:left;background-color:yellow;}
#p2{float:right;background-color:green;}
</style>
<div class="clearfix">
<p id="p1">p1</p>
<p id="p2">p2</p>
<!-- <p ></p> 添加空的p元素，使div可以围住p1p2，不推荐-->
</div>
2、块级元素⽔平垂直居中的⽅法
<style>
.parent{background:#ddd;height:200px;width:300px;}
.child{background:#666;color:#fff;font:30px/2 'microsoft yahei';}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>
⽗元素和⼦元素的⼤⼩不确定。
（1）table-cell+inline-block
兼容IE6,7需要把结构换为<table>，通过display:inline; zoom:1；模拟inline-block。
.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}
（2） relative+absolute+transform
绝对定位脱离⽂档流，不会对其它元素产⽣影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在⾼版本浏览器需要加前缀。
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
（3）flex
IE6,7,8可能没法兼容flex。
.parent{display:flex; justify-content:center; align-items:center;}
如果⼦元素⼤⼩确定。
.parent{position:relative;}
.child{
width:100px; height:100px;
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}
3、CSS选择器有哪些？优先级如何计算
（1）普通选择器：通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:
（2）伪元素选择器::
（3）组合选择器：后代选择器 、⼦选择器、兄弟选择器+、只要前⾯有某种元素~
优先级：将权重相加。a=⾏内样式style，1000；b=id选择器，100；c=类、伪类和属性选择器，10；d=标签选择器和伪元素选择器，1。相同属性优先级⾼覆盖低、后⾯覆盖前⾯，不同属性合并。
超链元素伪类的设置顺序:link :visited :hover :active
4、px、em和rem的区别
px，像素，相对于显⽰器屏幕分辨率⽽⾔；
em，相对长度单位，相对于当前对象内⽂本的字体⼤⼩，若字体⼤⼩未显式设置，则相对于浏览器默认的字体⼤⼩；
rem，相对长度单位，相对于html根元素的字体⼤⼩。
5、display:none和visibility:hidden的区别
display:none设置元素不显⽰，是彻底消失，不在⽂档流中占位，浏览器也不会解析该元素。visibility:hidden是视觉上消失，可理解为透明度为0的效果，在⽂档流中占位，浏览器会解析该元素。
使⽤visibility:hidden⽐display:none性能上要好。display:none切换显⽰时，页⾯产⽣回流reflow（页⾯
中的部分元素需要改变规模尺⼨、布局、显⽰隐藏等，页⾯重新构建）。⽽visibility:hidden切换是否显⽰时则不会引起回流，只是元素的外观被改变，且在没有改变布局的情况下发⽣。
6、⽤⼀个div写出三条横线的⼩图标
div{
height:5px;
width:30px;
background-color:#DD575C;
background-clip:content-box;
padding-top:5px;
padding-bottom:5px;
border-top:#DD575C solid 5px;
border-bottom:#DD575C solid 5px;
}
7、⽤⼀个div实现倒三⾓
div{
width:0;
border-top:10px solid #DD575C;
border-left:5.77px solid transparent;
border-right:5.77px solid transparent;
}
其它⽅法仅供参考。ASCII码31是倒三⾓。
/
* 正⽅形旋转加截取 */
.parentDiv {
height:50px;
overflow:hidden;
}
.triangleDiv {
position: relative;
height:70.7px;
width:70.7px;
top:-35.4px;
left:19.6px;
background-color:#DD575C;
transform:rotate(45deg);
}
8、盒模型
在⽹页中，⼀个元素占有空间的⼤⼩由⼏个部分构成，其中包括元素的内容（content）、内边距（padding）、边框（border），外边距（margin）四个部分。
标准盒⼦模型 ＝ margin + border + padding + content （content =  width | height）
IE盒⼦模型 ＝ margin + content （content = border + padding + width | height）
box-sizing:content-box|border-box  切换标准模型和IE模型
9、position的absolute和fixed的共同点与不同点
共同点：脱离⽂档流，⽂档流中没有它的空间，未设置偏移时在原位置。默认宽度为内容宽度。
absolute：绝对定位。参照物为第⼀个定位元素（⾮static）/根元素html（与浏览器窗⼝同等⼤⼩的⾸屏区域）。元素随页⾯的滚动⽽滚动。
fixed：固定定位。参照物是视窗。不随页⾯的滚动⽽滚动。
10、sprite精灵图
把设计稿上的⼩图标拼合到同⼀张图⽚中，减少⽹络请求，提升⽹页加载速度。
①排列常⽤横向排列和纵向排列。 ②图⽚之间必须保留孔隙，⼩图标20像素。如果更改按钮⼤⼩，CSS⾥背景图位置属性不须改变；容错，如果CSS设置错误，不会导致下⾯图⽚露出来。③合并原则：同属于⼀个模块、⼤⼩相近、⾊彩相近。只本页⽤到的图⽚合并、集中使⽤，有状态的图标合并。④IE6不⽀持PNG24半透明，存两份：⾼级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。
background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;
11、HTML5
表现页⾯中的章节结构：<header><footer><nav><aside><article><section>
嵌⼊资源：<video><audio><canvas><svg>
新的<input>类型：email、url、number、tel、search、range、color、date
新的表单元素（datalist、keygen、output）和属性
getCurrentPosition()、web存储（localStorage、sessionStorage）、拖放
12、CSS3
选择器：属性选择器、伪类选择器
盒模型：box-shadow、box-sizing
边框：border-radius、border-image
背景：background-image、background-size、background-origin、background-clip、渐变
⽂字特效：text-shadow、text-overflow、word-wrap、word-break、字体@font-face
2D/3D转换：transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility
过渡和动画：transition、animation、@keyframes
多列布局：column-count、column-width、column-fill、column-gap、column-rule、column-span
⽤户界⾯：resize、outline-offset
弹性盒⼦：flex
13、<img>的alt和title
alt：描述图⽚含义。地址写错或⽹络状况不好，⽆法查看图像时，显⽰该说明。可⽤于屏幕阅读软件和搜索引擎。
title：光标悬浮在图像上时以提⽰的⽅式显⽰该特性内容。
14、href和src的区别
href标识超⽂本引⽤，在当前元素和引⽤资源之间建⽴联系。<link><a>。当浏览器解析到css⽂件时会下载，但不会停⽌对当前⽂档的处理。
src引⽤资源，指向外部资源的位置，将外部资源下载并替换当前元素。⽤在<img><script><iframe>。当浏览器解析到含src的标签时，会暂停其它资源的下载和处理，直⾄将该资源加载、编译、执⾏完毕，将该元素所指向的资源嵌套⾄当前标签内。
15、盒⼦内阴影和外阴影
box-shadow: inset? ⽔平偏移 垂直偏移 模糊半径? 阴影⼤⼩? 颜⾊?（？表⽰可选；⽔平、垂直偏移可正可负；颜⾊默认为⽂字颜⾊；这些参数可有多组，⽤，隔开）
外阴影box-shadow:3px 3px 5px 2px;      内阴影box-shadow:inset 0 0 5px red;
16、块级格式化上下⽂（BFC）
块级格式化上下⽂（BFC，Block formatting context），是⼀个独⽴的渲染区域，是布局过程中⽣成块级盒⼦的区域，也是浮动元素与其他元素的交互限定区域。下列⽅式会创建块级格式化上下⽂：
根元素
浮动元素，即float不为none
绝对定位元素，即position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible（hidden, scroll, auto）
17、input输⼊类型并简述其⽤途
text：默认，单⾏⽂本框，默认宽度为20字符。
radio：单选按钮。
checkbox：复选框。
file：输⼊字段和“浏览”按钮，供⽂件上传。
button：可点击按钮。
reset：重置按钮。
submit：提交按钮。
image：图像形式的提交按钮。
password：密码字段，该字段中字符被掩码。
hidden：隐藏的输⼊字段。
email：email地址。
tel：电话号码。
url：url地址。
number：数值。
range：滑动条，包含⼀定范围内的数值。
color：选择颜⾊。
Date pickers(date, month, week, time, datetime, datetime-local)。
search：搜索字段。
18、Cookie、sessionStorage和localStorage的区别
Cookie是客户端的会话跟踪技术，⽤来记录信息确定⽤户⾝份。通过kie可以获取或设置Cookie值。
Cookie由”; ”隔开的键值对构成，作⽤是将⽹页中的数据保存到浏览器中。Cookie必须从服务器访问，直接打开html⽂件则设置Cookie ⽆效。
Cookie有个数（20~50）和⼤⼩（4KB左右）的限制。默认情况下，Cookie的⽣命周期是⼀次会话，如果通过expires设置了过期时间，过期⽴即删除保存的数据。Cookie由每个对服务器的请求来传递，使得Cookie速度很慢且效率也不⾼。安全性问题，明⽂传递。
WebStorage克服了Cookie的⼀些限制，有两种API：localStorage（本地存储，没有时间限制）和sessionStorage（会话存储，在浏览器关闭后消失）。通过setItem(key, value)、getItem(key)、remov
eItem(key)、clear()操作数据。要访问同⼀个WebStorage对象，页⾯必须来⾃同⼀个域名（⼦域名⽆效），使⽤同⼀种协议，在同⼀个端⼝上。
WebStorage只能存储字符串类型，可使⽤JSON对象的stringify和parse来处理。保存在客户端，不与服务器进⾏交互通信。
WebStorage存储⼤⼩⼀般是5MB。不会传送到服务器，存储在本地的数据可以直接获取，节省了⽹络流量，且速度更快。安全性相对Cookie较⾼。
19、响应式设计的基本技巧和好处

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。