《面试题目二》

《面试题目二》

一． 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来使用混合器。