第二阶段面试题
一． HTML
1. img标记属于什么类型元素？
答案：属于行内(inline)元素
2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？
答案：header，nav，section，aside，footer，article
都是用来做布局的，但结构标记提高了语义性和可读性
3. 行内元素，块元素，空元素有哪些？
（1）行内元素：
a， span，i，img，b ,s,u，sup,sub,label
（2）块元素：
div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5
（3）空元素：
br-换行，hr-水平分割线
二． CSS3
1.隐藏网页中的元素有几种方式？这些方法有什么区别？
答案：三种方法，
display:none; 脱离文档流，不占页面空间,会改变页面布局。
visivility:hidden ；不会脱离文档流，不会改变页面布局，仍占页面空间
opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
2.如何解决子元素的上外边距溢出？
答案：在父元素的第一个子元素位置处添加一个空的table标记.
3.常用来设置透明度的方式有几种？他们之间有何区别？
答案：opacity或rgba
opacity能设置与元素相关各种颜色的透明度
rgba()只能设置当前某一种颜色的透明度
4.浮动会对父元素的高度带来什么影响？如何解决这个问题？
答案：子元素一旦浮动，父元素的高度为0，在父元素最后一个子元素位置处添加一个空的块级元素，并设置其clear属性值为both.
.clear:after{
display:block;
content:””;
clear:both;
}
5.哪些元素默认有外边距？
答案：body，p，h1-h6，ul，ol，dl，pre
6.网页中如何定义锚点？如何连接到锚点位置？
答案：a标记用name定义锚点，其他标记用id属性定义锚点，
连接到锚点的位置：href="#锚点名称"
7.框模型默认的计算方式是什么？要改变默认的计算方式用哪个属性及值？
答案：
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式 box-sizing:border-box
8.实现时针转动效果需要用到CSS中哪些关键技术？
答案：旋转，动画，绝对定位
9.设置行内元素居中对齐用什么属性？
答案：text-align：center
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性？
答案：name和value属性
11.transition和animation的区别？
答案：
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下也会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的，也可以理解为一个animation是由多个transition组成。
12. 如何实现水平垂直居中？
1、定位+外边距 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、定位+transform 盒子高宽已知，
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
3、flex 布局
父级：
display: flex;
align-items: center;
justify-content: center;
13. 盒子模型你是怎么理解的？
元素框处理元素内容，内边距外边距以及边框的计算方式。
盒子模型有两种，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng border-box在已设定的宽度和高度之内去设定padding和border
content-box在已设定的高度和宽度之外设置padding和border
14. src和href的区别？
（1）href：
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
并行下载该文档，不会停止对当前文档的处理
（2）src：
src是source的缩写，src指向的内容会嵌入到文档当前标签所在位置
如img、script、iframe当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
15. 说出link和import的区别？
（1）使用方法不同：
link一般在html头部定义，作为html标签，链接资源，主要用于链接外部的样式表
import一般定义在css内部，并且一定要在其他所有规则之前，也就是一般写在文件头部，并且专门拿来链css的。
（2）加载顺序差别
import比link延迟一些，它会等到页面下载完后才加载，因而可能会产生闪烁
16. 改变页面元素位置的定位方式及他们的区别？
relative 相对定位 相对于自身原来位置进行偏移，仍处于标准文档流中；
absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照， 完全脱离文档流；
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在固定的位置。固定定位也会脱离文档流。
三． AJAX
1.用post方式异步向服务器端提交数据时，需要在发送请求前设置什么？提交的数据放在什么位置？
答案：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
数据放在send（）括号中
2.什么是异步数据加载？
答案：浏览器在向服务器发送请求的时候，不耽误用户在网页上做其它操作，可以同时开启多个任务，并且可以以无刷新的效果来更改页面中的局部内容。
3.异步请求数据的步骤分为哪几步？
答案：创建异步对象，绑定监听事件，创建异步请求，发送异步请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resText = xhr.responseText;
}
}
xhr.open(method,url,true);
xhr.send(body);
4.异步请求中满足什么条件时才能取出响应的结果数据？
答案：请求状态码为4，响应状态码为200时
5.如何理解JSON？
答案：
JSON是JS对象的一种表现方式，即以js对象的数据格式表现出来的字符串，JSON中的两个api如下：
将JSON字符串转换成JSON对象 JSON.parse()
将JSON对象转换成JSON字符串 JSON.stringify()
6.http和https的区别？
答案：
http传输的数据都是未加密的，也就是明文的
https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
两者使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
7.列举几种常见的3和4开头的状态码以及他们的意义？
答案：
301 ：永久性重定向
302 ：临时重定向
304 ：请求资源未被修改，命中缓存
400 (错误请求) 服务器不理解请求的语法。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
四． Bootstrap
1.用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？
答案：容器中设置行，行内设置列
默认将一行分为12个单元格（列）
2.如何编写响应式网页？
答案：
(1)声明viewport元标签
(2)所有容器/文字/图片 使用相对尺寸
(3)流式布局+弹性布局
(4)使用CSS3 Media Query技术
3.同时监听多个scss文件的命令是什么？
答案：node-sass -w scss文件夹 –o css文件夹
4.在scss中如何定义混合器以及引用？
答案：
@mixin 混合器名称{ 样式声明 }
通过@include来使用混合器。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
