WEB-第二阶段面试题
第二阶段面试题
一. 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来使用混合器。