一、HTML
1.img标记属于什么类型元素?有什么特点?
答案:行内元素,允许修改尺寸。
2.结构标记有哪些?他们与div有什么相同之处,又有什么不同之处?
答案: header、section、aside、nav、article、footer
相同:属于块级元素,用于做布局
不同:结构标记提升了代码的语义性
3.行内元素,块级元素,空元素有哪些?
答案:行内元素:span,i,u,a,b,s,img,sup,sub
块级元素:h1~h6,p,div,ul,ol,dl,dt,pre,等结构标记
空元素:br,hr
二、CSS
1.隐藏网页中的元素有几种方式?这些方法有什么区别?
答案:三种
一种:display:none,不占页面空间,脱离文档流。
二种:visibility:hidden 占据页面空间,不会脱离文档流
三种: opacity:0;该元素隐藏起来,但不会改变页面布局,并且设置绑定事件。
2.如何解决子元素的上外边距溢出?
答案:1.给父元素设置上边框
2.设置父元素的上内边距,
3.父元素的第一个子元素位置处理添加空的table标记(最优方式)
.top_margin:before{
content:"";
display:table;
}
3.常用来设置透明度的方式有几种?他们之间有何区别?
答案:opacity和rgba();
opacity 设置当前元素相关的所有颜色的透明度。
rgba 设置当前某一种颜色的透明度。
4.浮动会对父元素的高度带来什么影响?如何解决这个问题?
答案:父元素的高度为0,
.clear:after{
content:"",
display:block;
clear:both;
}
5.哪些元素默认有外边距?
答案:p,h~h6,ul,body,ol,pre,dl
6.网页中如何定义锚点?如何连接到锚点位置?
答案:定义锚点的方式------两种
如果是a元素,用name属性定义锚点,其他所有元素都用id属性定义。
链接方式:如果实在当前网页“#锚点名称”
如果是在其他网页“网页的url#锚点名称”
7.框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?
答案:实际的宽度=左右外边距 + 左右边框 + 左右内边距 + width
实际的高度=上下外边距 + 上下边框 + 上下内边距 + height
属性:box-sizing:border-box
8.实现时针转动效果需要用到CSS中哪些关键技术?
答案:转换,动画,定位
9.设置行内元素水平居中对齐用什么属性?
答案:text-align:center;
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性?
答案:name属性和value属性
11.tansition和animation的区别?
答案:animation和transition大部分的属性是相同的,他们都是随时间改变元素的属性值,他们主要的区 别是transition需要触发事件才能改变属性,而animation不需要触发的情况下也会随着时间发生属性的变化。并且transition是2帧,from...to...,而animation是一帧一帧,可以将多帧连在一起,也可以理解为animation是将多个transition放到了一起。
12.如何实现元素水平垂直居中?
答案:定位 + 外边距
定位 + transform
flex 布局
13.盒子模型你是怎么理解的?
答案:元素框处理元素内容内边距外边距以及边框的计算方式。
盒子模型有两种情况:W3C和IE的盒子模型。
W3C标准:实际的宽度=左右外边距 + 左右边框 + 左右内边距 + width
实际的高度=上下外边距 + 上下边框 +上下内边距 + height
IE标准: width=content + padding + border
height=content + padding + border
与W3C标准设置box-sizing:border-box 一致
14.src和href的区别?
答案:href:HypterText Reference的缩写,表示超文本引用,用来建立当前元素与文档之间的链接。
并行下载该文档,不会停止对当前文档的处理。
src: 是source的缩写,src指向的内容会嵌入到文档标签所在的位置,如img,script,iframe当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。
15.说出link和import的区别?
答案:link在网页head标记中引入css文件,import一般定义在css内部,并且一定要在所有规则之前,也就是一般写在文件顶部,import比link延迟一些,它会等到下载完毕再加载,因而可能会产生闪烁。
16.改变页面元素位置的定位方式及他们的区别?
答案:float,position:relative/absolute/fixed;
float:解决多个块级元素在一行中显示。
相对定位:相对于元素自己做位置微调时使用
绝对定位:堆叠效果,弹出菜单
固定定位:页面滚动而元素不需要发生位置改变时使用
三、AJAX
1.用post方式异步向服务器提交数据时,需要在发送请求前设置什么?提交数据放在什么位置?
答案:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded").
放在send(body);
2.什么是异步数据加载?
答案:浏览器向服务器发送请求时,不耽误用户在网页上做其他操作,可以同时开启多个任务,并且可以无刷新的效果来更改页面的局部数据。
3.异步请求数据的步骤分为哪几步?
答案:1.创建异步对象
2.绑定监听事件
3.打开连接
4.发送请求
4.异步请求中满足什么条件时才能取出响应的结果数据?
答案:readyState ==4&&status==200
5.如何理解JSON?
答案:JSON是js对象的一种表现形式,即以js对象的数据格式表现出来的字符串。
json中常用的API:
将json字符串转换为js对象/数组:JSON.parse();
将JS对象/数组转换为json字符串:JSON.stringify();
6.http和https的区别?
答案:http传输的数据未加密,也就是明文显示,端口是80
http是加密传输,端口是:443
7.列举几种常见的3和4开头的状态码以及他们的意义?
答案:301:永久重定向
302:临时重定向
304:命中缓存
404:请求资源路径找不到
400:请求不被理解
403:服务器拒绝请求
四、Bootstrap
1.用bootstrap中的栅格布局做网页的基本结构是什么?默认将一行分为多少列?
答案:
盒子(container) -----------行(row)-------列(col-*)
默认将一行分为12列
2.如何编写响应式网页?
答案: 1.声明viewport
2.所有的容器/文本/图片使用相对尺寸
3.使用弹性布局+流式布局
4.使用媒体查询技术
3.同时监听多个scss文件的命令是什么?
答案:node-sass-w scss文件夹名称 -o CSS文件夹名称
4.在scss中如何定义混合器以及引用?
答案:@mixin 混合器名称{样式声明}
通过@include来引用混合器