分享前端面试真题（一）

一、行内元素有哪些？块级元素有哪些？ 空元素有那些？

（1）行内元素有：a b span img input select strong。

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 

（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>

二、常见的浏览器内核有哪些？

Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器。

Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 

Presto 内核：Opera7 及以上

Webkit 内核：Safari,Chrome 

三、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览 器和服务器间来回传递。 

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。 

存储大小： cookie 数据大小不能超过 4k；sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。 

有期时间： localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭 。

四、如何在页面上实现一个圆形的可点击区域？ 

1、map+area 或者 svg  

2、border-radius  

3、纯 js 实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等 

五、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 

（1）有两种， IE 盒子模型、W3C 盒子模型

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框 (border)

（3）区别： IE 的 content 部分把 border 和 padding 计算了进去

六、如何居中 div？

1、水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性 

div{     width:200px;     margin:0 auto;     } 

2、让绝对定位的 div 居中 

div {     position: absolute;     width: 300px;     height: 300px;     margin: auto;  top: 0;     left: 0;     bottom: 0;     right: 0;    }

3、水平垂直居中，确定容器的宽高，宽 500 高 300 。 
 
div {  position: relative;  width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; } 

4、水平垂直居中，未知容器的宽高，利用 `transform` 属性 

div {   position: absolute;  width:500px;     height:300px;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); }

5、水平垂直居中，利用 flex 布局 ，实际使用时应考虑兼容性 

.container {  display: flex; align-items: center;   /* 垂直居中 */     justify-content: center; /* 水平居中 */  }    

.container div {  width: 100px; height: 100px; }

七、 用纯 CSS 创建一个三角形的原理是什么？ 

把上、左、右三条边隐藏掉（颜色设为 transparent）  

#demo {  width: 0; height: 0;  border-width: 20px;  border-style: solid;   border-color: transparent transparent red transparent;   } 

八、请解释一下为什么需要清除浮动？清除浮动的方式 。

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷， 而高度的塌陷使我们页面后面的布局不能正常显示。 
1、父级 div 定义 height；  

2、父级 div 也一起浮动；  

3、常规的使用一个 class；    .

clearfix::before, .clearfix::after {  content: " ";   display: table;    }    .clearfix::after {  clear: both;    }    .clearfix {  *zoom: 1;    }