面试集合（更）web前端经典面试题试题及答案html/css

Posted 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试集合（更）web前端经典面试题试题及答案html/css相关的知识，希望对你有一定的参考价值。

web前端经典面试题试题及答案html/css

HTML常见题目

一、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面。
这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

二、HTML5为什么只需要写<!DOCTYPE html>

<DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。
主要作用是：告知浏览器的解析器用什么标准解析这个文档。DOCTYPE不存在或者格式不正确都会导致文档以怪异模式呈现。

三、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
解释：

1）行内元素有：a( 锚点) ,b(粗体(不推荐)) ,span(常用内联容器，定义文本内区块) img(图片) input(输入框) select(项目选择) strong(粗体强调) label(表格标签) cite (引用)code(计算机代码)等等

2）块级元素有：div ul(无序列表) ol(有序列表) dl(定义列表) table(表格)form(表单) h1
(一级标题))p(段落)pre(预格式化)等等
块级元素 每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等
块级元素的特点：

块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等
行内元素的特点：

和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

注意：

  • 只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素；因为它们都是文字块级标签，里面不能再存放其他的块级标签。
  • 链接里面不能再存放链接

行内块级元素
在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性

显示模式的转换

块转行内：display:inline；

行内转块：display：block；

行内元素转换为行内块：display：inline-block

四、页面导入样式时，使用link和@import有什么区别？

区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

五、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

  • 渲染引擎：负责取得网页的内容(html,xml和图像等等)，整理讯息(例如加入css)，以及计算网页的显示方式，输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎：解析和执行javascript来实现网页的动态效果。以及交互内容

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

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

七、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

  1. 新增元素

    • 内容元素：article、header，footer,section,nav,aside
    • 表单元素：calendar，date，time，number,url,search;
    • 多媒体：video,audio;
    • 控件元素： websockt,webwork
    • 绘画：canvas;
    • 存储：localStorage;sessionStorage

  2. 移除元素

    • big font basefont,s,tt,u,frame.iframe

  3. 如何处理兼容性问题

    • IE6/IE7/IE8支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式；

    • 使用是html5shim框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

4.’何区别HTML和HTML5

  1. 1）在文档类型声明上不同： HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
  2. 2）在结构语义上不同： HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
  3. HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

八、如何区分HTML和HTML5？

  1. 在文档声明上，html有很长的一段代码，并且很难记住这段代码，都是靠工具直接生成，而html5却是不同，只有简简单单的声明，也方便人们的记忆，更加精简。
  2. 在结构语义上；html4.0没有体现结构语义化的标签，这样表示网站的头部。html5在语义上却有很大的优势。提供了一些新的html5标签。

基本说明：
1、html5最先由WHATWG(Web
超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言；
2、可以简单点理解成为HTML5 ≈HTML4.0+CSS3+JS+API。定义的这些标签，更加有利于优化，蜘蛛能识别。节省程序员写代码的时间。最主要还是在SEO的优化上。

九、简述一下你对HTML语义化的理解？

  • 内容语义化：根据内容的结构化
  • 代码语义化：选择合适的标签来做对应的事

十、HTML5的离线储存怎么使用，工作原理能不能解释一下？

原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

CSS类的题目

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

1、盒模型都是由四部分组成的，分别是margin，border， padding, content。
2、标准和模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的范围只有content，而IE和模型的width和height属性的范围包含border，padding和content。
3、一般来说我们可以通过box-sizing属性来改变元素的盒模型，存在两个值，一个是border-box表示IE盒模型，content-box表示标准盒模型。

二、CSS选择符有哪些？哪些属性可以继承？

CSS选择符：

id选择器(#myid)、

类选择器(.myclassname)、

标签选择器(div, h1, p)、

相邻选择器(h1 + p)、

子选择器（ul > li）、

后代选择器（li a）、

通配符选择器（*）、

属性选择器（a[rel=”external”]）、

伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ] !important 比内联优先级高
CSS的优先级是根据样式声明的特殊性值来判断的。

三、CSS优先级算法如何计算？

选择器的特殊性值分为四个等级，如下：

（1）标签内选择符x,0,0,0
（2）ID选择符0,x,0,0
（3）class选择符/属性选择符/伪类选择符 0,0,x,0
（4）元素和伪元素选择符0,0,0,x

计算方法：

（1）每个等级的初始值为0
（2）每个等级的叠加为选择器出现的次数相加
（3）不可进位，比如0,99,99,99
（4）依次表示为：0,0,0,0
（5）每个等级计数之间没关联
（6）等级判断从左向右，如果某一位数值相同，则判断下一位数值
（7）如果两个优先级相同，则最后出现的优先级高，!important也适用
（8）通配符选择器的特殊性值为：0,0,0,0
（9）继承样式优先级最低，通配符样式优先级高于继承样式
（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

计算实例：

（1）#demo acolor: orange;/特殊性值：0,1,0,1/
（2）div#demo acolor: red;/特殊性值：0,1,0,2/

注意：
（1）样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。

（2）特殊性值越大的声明优先级越高。

（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）

(4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑

判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，
那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。

一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，
第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，
第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等
级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引
入的顺序，后出现的规则的优先级最高。

四、 CSS3新增伪类有那些？

  • :first-of-type

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

  • :last-of-type

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

  • :only-of-type

:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

:only-child

  • :only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

:nth-child(2)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

  • :enabled和:disabled

表单控件的禁用状态。

  • :checked

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
第一种方法：

五、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

①，居中一个div：
给div设置一个宽度，margin:0px auto。
position:absolute top:50%,left:50% transform:translate(-50%，-50%)
弹性盒居中 justify-content:center align-items:center

②，居中一个浮动元素：
居中一个浮动元素（套一个大盒子给它margin:0px auto。）
设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;
其中的left是 宽度的一半。

二，第二种方法：

①，div为块级元素，居中块级元素首先要设置宽度，然后margin:0 auto;就居中了。

 <style>
    .a
        width:100px;
        margin:0 auto;
        background:red;
    
</style>
    <div class="a">123</div>

②，居中浮动元素就麻烦一点了。

<style>
.box
position: relative;
left:50%;
float:left;

.item
position: relative;
left:-50%;
float:left;
background: red;

</style>
<div class="box">
<div class="item">123</div>
</div>

注：left:50%;这个left按照百分比来设置left值实际移动是按父容器的宽度来算，
可以先看成box容器为body宽度为也就是浏览器宽度，left:50%;就是向右移动到中间，
现在还要向左移动浮动元素item一半的距离，box的float是为了让box自身收缩，这样item的父容器的宽度就是本身的宽度了，再设置为left:-50%;也就是向左移动自身宽度的一半。
第一种，position:relative很重要。
如果父元素相对定位，子元素绝对定位，此时依旧是margin-left: 50%, left: -5px;
第二种方法感觉并不是太好。因为left左移之后，还会有个二分之一的宽度。

六、display有哪些值？说明他们的作用。

1、display的值有：

none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-flex

2、作用：

none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留

inline（默认值）：表示指定对象为内联元素

block： 指定对象为块元素。

list-item： 指定对象为列表项目

inline-block： 指定对象为内联块元素。（这是CSS2中的属性）

table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）

inline-table： 指定对象作为内联元素级的表格。类同于html标签table（CSS2）

table-caption： 指定对象作为表格标题。类同于html标签caption（CSS2）

table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）

table-row： 指定对象作为表格行。类同于html标签tr（CSS2）

table-row-group： 指定对象作为表格行组。类同于html标签tbody（CSS2）

table-column： 指定对象作为表格列。类同于html标签col（CSS2）

table-column-group： 指定对象作为表格列组显示。类同于html标签colgroup（CSS2）

table-header-group： 指定对象作为表格标题组。类同于html标签thead（CSS2）

table-footer-group： 指定对象作为表格脚注组。类同于html标签tfoot（CSS2）

run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）

box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

七、position的值relative和absolute定位原点是？

1、relative的相对于自己本身定位，如设置relative后设置top:30px 则就是相对于当前位置向下移动30px
2、absolute 是相对于其第一个祖先元素position值不为默认值的元素定位，想相对谁定位可以给其设置position为非默认值实现。

relative（相对定位）：定位原点是元素本身所在位置；
absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

八、CSS3有哪些新特性？

CSS3的新特征有：1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用RGBA实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。

九、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？

一、Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box
display: flex;

行内元素也可以使用Flex布局。

.box
display: inline-flex;

Webkit内核的浏览器，必须加上-webkit前缀。

.box
display: -webkit-flex; /* Safari */
display: flex;

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性
以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。

.box
flex-direction: row | row-reverse | column | column-reverse;

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3.2 flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box
flex-wrap: nowrap | wrap | wrap-reverse;

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box
flex-flow: || ;

3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

.box
justify-content: flex-start | flex-end | center | space-between | space-around;

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。

.box
align-items: flex-start | flex-end | center | baseline | stretch;

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item
order: ;

4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item 
flex-grow: ; /* default 0 */

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item
flex-shrink: ; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item
flex-basis: | auto; /* default auto */

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item 
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item
align-self: auto | flex-start | flex-end | center | baseline | stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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

盒子模型的border就是由三角形组成的，我们可以通过设置元素的宽高为0，然后修改border的宽度，并且修改其颜色，来达到绘制三角形的目的。

以上是关于面试集合（更）web前端经典面试题试题及答案html/css的主要内容，如果未能解决你的问题，请参考以下文章

常见的10道Web前端面试题及答案分享！

vue前端面试题

前端面试题

jQuery经典面试题及答案精选

jQuery经典面试题及答案精选（转）

经典PHP笔试题