前端常用面试题目及答案-HTML&CSS篇

1. 行内元素和块级元素有哪些？

行内元素：

<a>     //标签可定义锚   
<abbr>     //表示一个缩写形式   
<acronym>     //定义只取首字母缩写   
<b>     //字体加粗   
<bdo>     //可覆盖默认的文本方向   
<big>     //大号字体加粗   
<br>     //换行   
<cite>     //引用进行定义   
<code>    // 定义计算机代码文本  
<dfn>     //定义一个定义项目  
<em>     //定义为强调的内容  
<i>     //斜体文本效果  
<img>     //向网页中嵌入一幅图像  
<input>     //输入框  
<kbd>     //定义键盘文本  
<label>     //标签为 input 元素定义标注（标记）  
<q>     //定义短的引用  
<samp>     //定义样本文本  
<select> // 创建单选或多选菜单  
<small>     //呈现小号字体效果  
<span>     //组合文档中的行内元素  
<strong> //加粗  
<sub>     //定义下标文本  
<sup>     //定义上标文本  
<textarea>     //多行的文本输入控件  
<tt>     //打字机或者等宽的文本效果  
<var>    // 定义变量

块级元素：

<address>//定义地址   
<caption>//定义表格标题   
<dd>    //定义列表中定义条目   
<div>     //定义文档中的分区或节   
<dl>    //定义列表   
<dt>     //定义列表中的项目   
<fieldset> //定义一个框架集   
<form> //创建 HTML 表单   
<h1>    //定义最大的标题  
<h2>    // 定义副标题  
<h3>     //定义标题  
<h4>     //定义标题  
<h5>     //定义标题  
<h6>     //定义最小的标题  
<hr>     //创建一条水平线  
<legend>    //元素为 fieldset 元素定义标题  
<li>     //标签定义列表项目  
<noframes>    //为那些不支持框架的浏览器显示文本，于 frameset 元素内部  
<noscript>    //定义在脚本未被执行时的替代内容  
<ol>     //定义有序列表  
<ul>    //定义无序列表  
<p>     //标签定义段落  
<pre>     //定义预格式化的文本  
<table>     //标签定义 HTML 表格  
<tbody>     //标签表格主体（正文）  
<td>    //表格中的标准单元格  
<tfoot>     //定义表格的页脚（脚注或表注）  
<th>    //定义表头单元格

可变元素
根据上下文语境决定转为块级元素还是行内元素

<button>     //按钮 
<del>    // 定义文档中已被删除的文本 
<iframe>     //创建包含另外一个文档的内联框架（即行内框架） 
<ins>     //标签定义已经被插入文档中的文本 
<map>     //客户端图像映射（即热区） 
<object>     //object对象 
<script>     //客户端脚本

2.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
最主要的不同
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭
标签名必须用小写字母
XHTMl文档必须拥有根元素

3.DISPLAY:NONE和VISIBLITY:HIDDEN的区别是什么？

display:隐藏对应元素但不挤占该元素原来的空间。
visiblity: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置任然存在。

4.什么是语义化的HTML？

1、用正确的标签做正确的事情。
2、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;
5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

6.超链接访问过后HOVER样式就不出现的问题时什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A（linked, visited, hover, active）。

7.什么是CSS HACK?IE6,7,8的HACK分别是什么？

针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：

#test{
    width: 300px;
    height: 300px;
    background-color: blue;
    background-color: red\9; /*  all ie */
    background-color: yellow\0; /* ie8 */
    + /* ie7 */
    _background-color: orange; /* ie6  */
    :root #test{
        background: purple\9; /* ie9 */
    }

    @media all and {min-width: 0px} #test{background-color: black\0;} /* opera */
    @media screen and {-webkit-min-device-pixel-ratio: 0 } {#test { padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important;">}

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

8.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article,footer,header,nav,section
表单控件：calendar,date,time,email,url,search
新的技术webworker,websocktGeolocation
移除的元素
纯表现的元素：basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素：frame,frameset,noframes;
支持HTML5新标签：
IE8/IE7/IE6支持通过document,createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

9.请描述一下COOKIES、SESSIONSTORAGE和LOCALSTORAGE区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

10.如何实现浏览器内多个标签页之间的通信？

调用localstorage,cookies等本地存储方式
WebSocket、SharedWorker
localstroge另一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。

11.清除浮动有哪些方式？比较好的方式是哪一种?

1、父级div定义height。
2、结尾处加空div标签clear：both。
3、父级div定义伪类：after和zoom。
4、父级div定义overflow：hidden。
5、父级div定义overflow：auto。
6、父级div也浮动，需要定义宽度。
7、父级div定义display：table。
8、结尾处加br标签clear:both。
比较好的是第3种，好多网站都这样用

12.PX、EM、REM的区别？

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

13.CSS3新特性有哪些？

1、颜色：新增RGBA、HSLA模式
2、文字阴影(text-shadow)
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
6、渐变：linear-gradient、radial-gradient
7、过渡：transition可实现动画
8、自定义动画
9、在CSS3中唯一引入的伪元素是::selection
10、多媒体查询、多栏布局
11、border-image
12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13、3D转换

14.DISPLAY有哪些值？说明它们的作用。

1、block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
2、none 缺省值。像行内元素类型一样显示。
3、inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
4、inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
5、list-item 像块类型元素一样显示，并添加样式列表标记。
6、table 此元素会作为块级表格来显示。
7、inherit 规定应该从父元素继承display属性的值。

15.描述CSS RESET的作用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

16.项目做过哪些性能优化？

减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片懒加载
减少 DOM 元素数量
减少 DOM 操作
使用外部 JavaScript 和 CSS
压缩 JavaScript 、 CSS 、字体、图片等
优化 CSS Sprite
使用 iconfont
字体裁剪
多域名分发划分内容到不同域名
尽量减少 iframe 使用
避免图片 src 为空
把样式表放在中
把脚本放在页面底部

17.水平垂直居中。

第一种

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二种

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三种

#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

18.四种定位的区别。

static 是默认值
relative 相对定位相对于自身原有位置进行偏移，仍处于标准文档流中
absolute 绝对定位相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

19.移动端适配怎么做的？

使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同 css.

20.右边宽度固定，左边自适应。

第一种

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二种

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

21.使用CSS实现一个持续的动画效果。

animation:mymove 5s infinite;
@keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}

4.哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
5.线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。