《面试题目二》
一. HTML
1. img
标记属于什么类型元素?
答案:属于行内元素
2. 结构标记有哪些?他们与div
有什么相同之处,又有什么不同之处?
答案:header,nav,section,aside,footer,article
都是用来做布局的,但结构标记提高了语义性和可读性
3. 默认情况下,使用P
标记会形成什么效果?
答案:开始新的一行,形成段落文字,并有默认外边距
4. meta标签的主要作用
答案:name
属性主要用于描述网页
5. <th>
标签和<td>
标签的区别
答案:<th>
标签是有加粗效果的,一般用于表格标题的加重效果。<td>
标签列标签,没有特殊的样式。
6. <dt>
和<li>
的区别?
答:<dt>
是列表项的标题,其中不能包裹文字外的内容,<li>
都是列表项可以包裹标签和文字
二. CSS3
1.隐藏网页中的元素有几种方式?这些方法有什么区别?
答案:*四种方法,
display:none;
脱离文档流,不占页面空间,会改变页面布局。visivility:hidden;
不会脱离文档流,不会改变页面布局,仍占页面空间opacity:0
,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click
事件,那么点击该区域,也能触发点击事件transform:scale(0)
,让元素缩放到0,完全看不到。元素没有消失,不脱离文档流。*
2.如何解决子元素的上外边距溢出?
答案:
- 父元素增加
padding-top
缺点:增加了父元素实际高度 - 增加父元素的边框,缺点:增加了父元素实际高度
- 父元素增加
overflow: hidden/auto;
,缺点,父元素就不能溢出显示内容了 - 使用空
<table></table>
放在第一个子元素前和最后一个子元素后,作用是分隔与父级的粘连 - 使用CSS3伪元素
::before
给父元素添加内容,源于增加空<table></table>
.box::before{
content:"";
display:table;
}
3.常用来设置透明度的方式有几种?他们之间有何区别?
答案:opacity
或rgba
opacity
能设置与元素相关各种颜色的透明度
rgba()
只能设置当前某一种颜色的透明度
4.浮动会对父元素的高度带来什么影响?如何解决这个问题?
答案:浮动会产生高度坍塌,影响父元素无高度,父元素无高度后,父元素的兄弟元素会向上,发生被遮盖。
- 利用高度解决:给父元素高度,弊端是未必知道子元素的高度
- 父元素也浮动:父元素浮动,会影响父元素的兄弟元素
- 父元素溢出隐藏:
overflow:hidden/auto
,父元素中的子元素可能会被隐藏
5.em
单位和rem
单位的区别?
答案:em
是一种相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小。rem: rem
是css3
的新标准也是一种相对长度单位,其相对于HTML根标签的字号大小。
6.网页中如何定义锚点?如何连接到锚点位置?
答案:a
标记用name
定义锚点,其他标记用id
属性定义锚点,
连接到锚点的位置:href="#锚点名称"
7.框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?
答案:
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式 box-sizing:border-box
8.有哪些选择器可以做隔行变色
答案::nth-child(odd),:nth-child(even),:nth-child(2n)
9.设置行内元素水平居中对齐用什么属性?
答案:text-align:center
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性?
答案:name
和value
属性
11.子元素浮动父元素设置外边距产生位移,子元素是否会移动?
答案:会,子元素浮动也受父元素控制。
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%);
}
13. 盒子模型你是怎么理解的?
元素框处理元素内容,内边距外边距以及边框的计算方式。
盒子模型有两种,W3C和IE盒子模型
- w3c的盒模型
width=content
,不包括margin,padding,border
- IE盒模型
width=content+padding+border
box-sizng border-box
在已设定的宽度和高度之内去设定padding
和border
content-box
在已设定的高度和宽度之外设置padding
和border
14. 浏览器私有前缀?
-webkit-
浏览器:chrome/safari/edge
-moz-
浏览器:firefox
-o-
浏览器:opera
- -ms- 浏览器:IE
15. 改变页面元素位置的定位方式及他们的区别?
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(参数);
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.在HTTP协议中,状态码就是服务器响应的态度,被分为了几大类?
答案:
1××:
提示信息,表示目前是协议处理的中间状态,还需要后续的操作;2××:
成功,报文已经收到并被正确处理;3××:
重定向,资源位置发生变动,需要客户端重新发送请求;4××:
客户端错误,请求报文有误,服务器无法处理;5××:
服务器错误,服务器在处理请求时,服务器内部发生了错误。
四. Bootstrap
1.用bootstrap
中的栅格做网页布局的基本结构是什么?默认将一行分为多少列?
答案:容器中设置行,行内设置列
默认将一行分为12个单元格(列)
2.bootstrap中容器有哪些类,分别代表什么?
答案:
定宽容器 container
变宽容器 container-fluid
3.同时监听多个scss文件的命令是什么?
答案:sass -w scss文件夹:css文件夹
4.在scss中如何定义混合指令以及使用指令?
答案:
@mixin 混合指令名称{ 样式声明 }
通过@include来使用混合器。