1. 常见的浏览器及其内核有哪些？

答：

IE - trident

Firefox - Gecko

Google chrome - Webkit/blink

safari - Webkit

Opera - presto

浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。

渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。

2. 行级元素和块级元素有哪些？

答：

行级元素 inline：内联元素inline。内容决定元素所占位置，不可以通过css改变宽高。 span、strong、em、a、del、b、i

块级元素 block：独占一行，可以通过css改变宽高。 div、 h1 ~ h6、 p、 ul、 li、 ol、 section、 header、 footer、 nav、 article、 aside、form、address

行级块元素 inline-block：内容决定大小，可以改宽高。 img、 video、 input、 select、 textarea

3. 请简单描述一下块级元素、行内元素、空元素。

答：

块级元素的特点：独占一行，可以设定宽高，块级元素一般是其他元素的容器，可以容纳块级元素和行内元素。

行内元素的特点：不独占一行，不可以设置宽高，高度是内容字体的大小，宽度是内容的宽度，一般不可以包含块级元素。

空元素的特点：没有内容的 HTML 被称为空元素，空元素是在开始标签中关闭的。

4. xHTML 和 HTML 有什么区别？

答：

XHTML 是更严格更纯净的 HTML 版本。

XHTML 元素必须被正确地嵌套在 HTML 中，某些元素可以像这样彼此不正确地嵌套：This text is bold and italic；在 XHTML 中，所有的元素必须像这样彼此正确地嵌套：This text is bold and italic。
XHTML 元素必须被关闭

非空标签必须使用结束标签。空标签也必须使用结束标签，或者其开始标签必须使用/>结尾。

标签名必须用小写字母

XHTML 规范定义：标签名和属性对大小写敏感。

XHTML 文档必须拥有根元素

所有的 XHTML 元素必须被嵌套于根元素中。

5. 什么是语义化的HTML?

答：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的好处？

答：

a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；

e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化；

6. 简述一下你对HTML语义化的理解？

答：

(1)HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

(2)即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的;

(3)搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO;

(4)使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

7. 很多网站不常用table、iframe这两个元素的原因？

答：

iframe：

缺点：

是一个单独的容器，因此不会应用全局的CSS样式。

会和网页共用域名连接池，因此可能由于iframe占用了连接数导致加载阻塞。

搜索引擎爬虫不易爬取，不利于SEO。

相比直接操作DOM元素，使用iframe更耗费资源。

优点：可以用其展示广告，可以避免由于添加广告而网站被爬虫拒绝收录的情况。

table：

缺点： table的内容会等内部的所有内容加载完成才会显示，比基于div+css实现的表格布局加载速度慢。会导致网页语义发生错误，不利于无障碍功能。改动内部内容会造成整个table重绘，消耗更多资源。

优点：前期广泛用于后台管理系统，由于普通的后台管理系统大多都是表格布局，基于table编程难度低且面向内网的管理系统对性能要求没那么高。

8. css选择器的优先级（权重）问题。

答：

css权重的进制：256进制。

    !important            infinity
    行间样式               1000
    id                     100
    class|属性|伪类         10
    标签|伪元素              1
    通配符                   0

注意：如果两个css选择器同时存在时，用它们的权重相加，谁的大，就作用于谁。

9. css实现水平垂直居中。

答：

单行文本居中：text-align：center； line-height：height；

盒子居中：line-height：height； margin：0 auto；

10. display的属性值有哪些？说说它们的作用？

答：

none：元素不会显示，而且改元素现实的空间也不会保留。（但有另外一个 visibility: hidden，是保留元素的空间的）
inline： display的默认属性，将元素显示为内联元素，元素前后没有换行符。一旦将元素的display 属性设为 inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

11. 请给出页面使用display:inline-block;来布局时出现空白间隙的解决办法？

如何去掉img的间隙？（可以不解决，因为我们上传项目的时候都是压缩过的）

答：

方法一：去空格，正常手段是去空格（压缩）。方法二：把图片往左挪（利用margin）。

方法三：把父元素的font-size设置为0 。

注意：凡是带有inline的元素,带有文字特性(文本空隙)。

12. display:none; 和 visibility:hidden; 的区别？

答：

给一个元素设置了display:none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，元素所占据的空间也会消失。

给元素设置visibility: hidden，也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。

visibility: hidden不会影响有序列表排序的顺序变化。

CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果，提高用户体验。

13. 盒模型的计算问题。

答：

盒模型分为两种：标准盒模型和怪异盒模型。

标准盒模型（content-box）的 width = contentWidth + 2 * padding + 2 * border;

怪异盒模型（border-box）的 width = boxWidth；

css的盒模型有哪两种？

一种是标准盒模型content-box，一种是怪异盒模型border-box。

标准盒模型的width，包含内容区content-width + 2 padding + 2 border；

怪异盒模型的width，就是width。

如果要切换盒模型的模式就使用css的box-sizing属性，content-box就是标准盒模型，border-box就是怪异盒模型。

14. 浏览器默认的margin值是多少？

答： margin=8px（8像素）。

15. em 和 rem 的区别？

答：

rem与em都是相对单位，rem是根据html根节点来计算的，而em是继承父元素的字体。

em：

子元素的字体大小设置为2em时，相对的是父元素字体的2倍。
子元素的其它css属性设置为2em时，相对的是元素本身的字体的2倍。

rem：相对于根元素字体的大小。

16. 画一个三角形（利用border来画）。

答：

div{
    font-size: 50px;
    font-weight:bold;
    font-style: italic;
    font-family: arial;
    color:rgb(0,155,155);
    border:1px solid black;
    width:0px;
    height:0px;
    border:100px solid black;
    border-left-color:transparent;
    border-top-color:transparent;
    border-right-color:transparent;
}

17. css哪些属性可以继承？

答：

继承就是特定的css属性向下传递到子孙元素。指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

字体属性： font（font-family规定元素的字体、font-weight设置字体的粗细、font-size设置字体的尺寸、font-style定义字体的风格）

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

文本属性：

text-indent：文本缩进。

text-align：文本水平对齐。

line-height：行高。

color：文本颜色。

word-spacing：增加或减少单词间的空白（即字间隔）。

letter-spacing：增加或减少字符间的空白（字符间距）。

text-transform：控制文本大小写。

direction：规定文本的书写方向。

元素可见性：

visibility：规定元素是否可见。

表格布局属性：

border-collapse：设置是否将表格边框折叠为单一边框。

caption-side：设置表格标题的位置。

border-spacing：设置分隔单元格边框的距离。

empty-cells：设置是否显示表格中的空单元格。

table-layout：设置显示单元、行和列的算法。

列表布局属性：

list-style-type：修改用于列表项的标志类型。

list-style-image：对各标志使用一个图像。

list-style-position：可以确定标志出现在列表项内容之外还是内容内部。

list-style：简写列表样式，用于把所有用于列表的属性设置于一个声明中。

光标属性：

cursor：规定要显示的光标的类型（形状）。

页面样式属性：

page：规定元素应该被显示的页面特定类型。

page-break-inside：设置在表格元素内部避免进行分页的分页行为。

windows：设置当元素内部发生分页时必须在页面顶部保留的最少行数。

orphans：设置当元素内部发生分页时必须在页面底部保留的最少行数。

所有元素可以继承的属性：visibility、cursor。

18. BFC是什么？应用场景？

答：

BFC：块级格式化上下文（Block Formatting Contexts），是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

bfc是一块独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗讲就是，BFC中的内部元素无论如何布局，都会在边界里面，不会影响外部区域。

常见应用场景：

清除浮动
解决外边距合并问题

常见的创建BFC的方式：

浮动元素（float不为none）

绝对定位的元素（position为absolute或者fixed）

overflow不为visible的块级元素

display值为flex、 flow-root 、inline-block、table-cell等

BFC的特性：

1、内部的ＢＯＸ会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定。

3、BFC区域不会与float元素区域重叠。

4、计算BFC的高度时，浮动元素也参与计算。

5、BFC就是页面上的一个独立容器，里面的子元素不会影响外面的元素，外面的元素也不会影响里面的。

20. css隐藏元素的方法？

答：

display:none; 将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden; 元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
opacity:0; 设置透明度为0后，元素只是隐身了，它依旧存在页面中。

21. 引入css的方法？

答：

内联：在元素上添加样式。

内嵌：在head元素里添加style元素，设置css样式。

外联：这种是新建一个.css文件，通过link来引入样式。

导入：在head标签里，加一个style标签，使用@import url（）来引入css文件。

22. link 和 @import 引入css的区别？

答：

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

link属于XHTML标签，而@import完全是CSS提供的一种方式。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
@import有兼容性问题，@import只有在IE5以上的才能识别，而link标签无此问题。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。这样会对网站服务器产生过多的HTTP请求，服务器的压力增大。

23. 应该怎样优化css提高性能？

答：

加载性能（主要是从减少文件体积，减少阻塞加载，提高并发方面入手），选择器性能，渲染性能，可维护性。

1、尽量将样式写在单独的css文件里面，在head元素中引用。 (1)内容和样式分离，易于管理和维护 (2)减少页面体积 (3)css文件可以被缓存、重用，维护成本降低

2、不使用@import。

3、避免使用复杂的选择器，层级越少越好。

4、精简页面的样式文件，去掉不用的样式。

5、利用CSS继承减少代码量。

6、慎重使用高性能属性：浮动、定位。

7、css样式前缀。标准化各种浏览器前缀，带浏览器前缀的在前，标准的在后。

8、css属性值。属性值为0时，不加单位。

24. 前端性能优化方法？

答：

减少http请求

1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。

图片优化

1）尽可能的使用PNG格式的图片，它相对来说体积较小。

2）对于不同格式的图片，在上线之前最好进行一定的优化。

3）图片的延迟加载，也叫做懒加载。

使用CDN

CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

数据压缩
样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。比如，放到标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。

前端代码结构的优化

25. 对前端工程化的理解。

答：

工程化主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等。

前端工程化需要从模块化、组件化、规范化、自动化4个方面考虑。

模块化就是把一个大的文件，拆分成多个相互依赖的小文件，按一个个模块来划分。
组件化：页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件。

组件化≠模块化。模块化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。目前市场上的组件化的框架，主要的有Vue，React，Angular2。

规范化：

目录结构的制定

编码规范

前后端接口规范

文档规范

组件管理

Git分支管理

Commit描述规范

定期codeReview

视觉图标规范

自动化：简单重复的工作交给机器来做，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

26. 绝对定位和浮动的区别？

答：

绝对定位是完完全全脱离文档流，而浮动定位如果里面有文字，即使是子元素里面有文字，那么文字依然会环绕该浮动元素。

float脱离普通文档流，但是文字会环绕它的周围，也就是说文字将不会重叠放置在浮动元素之上；而绝对定位中，其他所有元素都将会放置在绝对定位的元素之上。

27. 当float和margin同时使用时，如何解决ie6双倍边距的问题？

答：将其display属性设置为inline。

28. 在书写高效css时，要考虑哪些问题？

答：

CSS书写bai顺序：

位置属性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列bai(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其他(animation, transition等)

使用CSS缩写bai属du性： CSS有些属性是可以缩写的，比如padding,margin,font等等bai，这样精简代码同时又能提高用户的阅读体验。
颜色代码缩写
提取公共样式，提高代码复用率
Css样式初始化

29. css怎样判断不同分辨率显示不同宽度布局，从而实现自适应布局？

答：使用媒体查询@media。

30. 标签上的alt和title属性的区别？

答：

alt最常见用在标签上，alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
title 属性规定关于元素的额外信息，title 属性有一个很好的用途，即为链接添加描述性文字。

31. 列举css中position的参数。

答：

static：默认值。没有定位，元素出现在正常的流中。
relative：相对定位。相对于其正常位置进行定位。
absolute：绝对定位。相对于 static 定位以外的第一个父元素进行定位。
fixed：固定定位。相对于浏览器窗口进行定位。
sticky：粘性定位。

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

32. 如何让超出宽度的文字显示为省略号？

答：

设置固定宽度，强制在一行显示（white-space:nowrap;），设置溢出隐藏（overflow : hidden;），显示省略号（text-overflow:ellipsis;）。

33. css的伪类有哪些？作用是什么？

答：css伪类有6种，分别为：动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类。

动态伪类

E:link ：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上。

E:visited ：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上。

E:active ：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上。

E:hover ：选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover。

E:focus ：选择匹配的E元素，而且匹配元素获取焦点。

结构伪类

E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同。

E:root ：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同。

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0。

E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同。

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素。

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素。

E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同。

E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同。

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素。

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素。

E:empty：选择没有子元素的元素，而且该元素也不包含任何文本节点。

语言伪类

E: lang(language)：用来匹配使用指定语言的元素。

元素状态伪类

E:checked：匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

E:enabled：匹配每个启用的的元素（主要用于表单元素）。

E:disabled：匹配每个禁用的的元素（主要用于表单元素）。

目标伪类

E:target：选择匹配E的所有元素，且匹配元素被相关URL指向。

否定伪类

E:not(F)：匹配所有除F外的E元素。

35. 简述css的布局。

答：

css中常见布局有四种：默认布局，浮动布局，定位布局，伸缩盒布局。

浮动布局：让多个块元素在一行当中显示。

特点：

1).块元素脱离文档流，默认宽度为0 文档流：可以理解为整个页面，脱离文档流就是它在整个页面中不会在占据空间。

2).失去了对父元素的支撑能力，这时需要伪元素来支撑父类。伪元素：跟普通元素一样，不过他并不是html代码中书写生成的，而是由css产生。

3).在浮动流中，当一行不能容纳更多的浮动元素时，会自动换行。

定位布局：用来指定一个元素在网页上的位置。

特点：

position:static; (默认)

position:relative(相对定位) 相对点：是该元素在该文档流中的初始位置文档流：不脱离文档流应用：一般不移动，作为相对点

position:absolute(绝对定位) 相对点：距离他最近的父定位元素，如果没有父定位元素，就只能相对于浏览器视口即左上角文档流：脱离文档流应用：一般不移动，作为相对点

position:fixed(固定定位) 相对点：浏览器视口即左上角,并且不会随着滚动条滚动文档流：脱离文档流应用：一般不移动，作为相对点

position:sticky(粘滞定位) 相对点：元素在达到阈值前是相对定位，达到后是固定定位。当position的取值为上面四个之一，就认定这个元素为定位元素定位元素可以使用定位属性：left、right、top、bottom

伸缩盒布局：与浮动布局作用类似，用于将一个容器中的多个子元素(块元素)在一行中多列排列，常用于响应式布局(移动端) 不脱离文档流。

36. 为什么要初始化css模式？

答：

浏览器差异：不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异。

提高编码质量：如果不初始化，整个页面做完会很糟糕，重复的css样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

37. 浏览器标准模式和怪异模式之间的区别?

答：

由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks mode(怪异模式或兼容模式)；当W3C标准出台之后，不同浏览器对页面的渲染有了统一的标准,即Strict mode（标准模式或严格模式）；这就是两者之间的区别。

盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；
行内元素的垂直对齐：很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在怪异模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。
可以设置行内元素的高宽：在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。
可设置百分比的高度：在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
用margin:0 auto设置水平居中在IE下会失效：使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效,怪异模式下的解决办法，用text-align属性:text-align:center；
怪异模式下设置图片的padding会失效。
怪异模式下Table中的字体属性不能继承上层的设置。
怪异模式下white-space:pre会失效。

38. 简述flex弹性布局。

答：

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

flex容器的属性：设置在容器上

flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

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

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

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

flex-start（默认值）：左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目的属性：设置在项目上

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

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

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

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

39. 如何理解渐进增强和优雅降级？

答：

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

渐进增强优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。而在前缀css3和正常css3都可用的情况下，正常css3会覆盖前缀css3.

优雅降级：一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。

优雅降级优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。而在前缀css3和正常css3都可用的情况下，前缀css3会覆盖正常css3。

总结：其实优雅降级和渐进增强都是网站开发的加分项，最重要的还是保证尽可能多的用户可以正常访问网站，在此之后再考虑降级的极端情形和现代浏览器的体验增强。

40. iframe有哪些优缺点？

答：

优点： iframe能够原封不动的把嵌入的网页展现出来。

如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点： iframe会阻塞主页面的onload事件；

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。，会产生很多页面，不容易管理。

iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）。

很多的移动设备无法完全显示框架，设备兼容性差。

iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

41. table的优缺点有哪些？

答：

优点：

在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。

缺点：

1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

5、Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。)

6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

7、table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

8、table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云)

9、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

42. 简述src和href的区别？

答：

src： src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。

href：

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

43. css伪类与伪对象的区别？

答：

伪类：伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

相当于一个特殊的class选择器。

伪元素：伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

相当于一个特殊的元素。

44. 谈谈你对重构的理解。

答：

重构就是通过调整程序代码，但并不改变程序的功能特征，达到改善软件的质量、性能，使程序的设计模式和架构更趋合理，更容易被理解，提高软件的扩展性和维护性。

为什么要重构？需求的不断变更是重构的最根本原因，而且重构是每一个开发人员都要面对的功课。代码架构最初的设计也是经过精心的设计，具有良好架构的。但是随着时间的推移、需求的剧增，必须不断的修改原有的功能、追加新的功能，还免不了有一些缺陷需要修改。为了实现变更，不可避免的要违反最初的设计构架。经过一段时间以后，软件的架构就千疮百孔了。bug越来越多，越来越难维护，新的需求越来越难实现，最初的代码构架对新的需求渐渐的失去支持能力，而是成为一种制约。最后新需求的开发成本会超过开发一个新的软件的成本，这就使这个app的生命走到了尽头。代码重构就能够最大限度的避免这样一种现象。系统发展到一定阶段后，使用重构的方式，不改变系统的外部功能，只对内部的结构进行重新的整理。通过重构，不断的调整系统的结构，使系统对于需求的变更始终具有较强的适应能力。

通过代码重构可以达到以下的目标： 1、持续偏纠和改进软件设计

2、使代码更被其他人所理解

3、帮助发现隐藏的代码缺陷

4、从长远来看，有助于提高编程效率，增加项目进度（进度是质量的敌人，质量是进度的朋友）

45. 常见的浏览器兼容性问题？如何解决？

答：

不同浏览器的标签默认的外边界和内填充不同

问题表现：不加样式控制下，margin和padding差异较大

解决方案：css里 *{margin:0; padding:0;}

块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

问题表现：IE6后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

设置较小高度标签(一般小于10px)，在IE6、IE7，高度超出设置高度值

问题表现：IE6、7这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug

问题表现：IE6的间距比超过设置的间距

解决方案：在display:block;后面加入display:inline;display:table;

图片默认有间距

问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用

解决方案：使用float属性为img布局

标签最低高度设置min-height不兼容

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器

解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important; height: 200px; overflow:visible;}

光标手形

问题表现：firefox不支持hand，但ie支持pointer

解决方案：统一使用cursor:pointer;

问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大

解决方法：使用指定的字体大小如14px或者使用em

IE6 3px bug

问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙

解决方法：对左侧left的盒子补上_margin-right: -3px;

46. div + css 布局的好处？

答：

优势： 1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。

2、对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是什么，您的网站都能很好的兼容。

3、使页面载入得更快。页面体积变小，浏览速度变快，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

4、保持视觉的一致性。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

5、修改设计时更有效率。由于使用了DIV+CSS制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。

6、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加简洁，正文部分更为突出明显，便于被搜索引擎采集收录。

劣势：尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：

1、对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

2、CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在一个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

3、对于CSS网站设计的浏览器兼容性问题比较突出。虽然搜索说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，CSS+DIV还有待于各个浏览器厂商的进一步支持。

4、CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

47. 谈谈你对响应式布局的看法。

答：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。

响应式布局的实现方案:

媒体查询 CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
百分比布局通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
rem布局 rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。
视口单位 css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

48. 什么是外边距重叠？重叠的结果是什么？

答：

外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。

作用：当我们上下排列一系列规则的块级元素时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离，这样各处距离就一致了。

外边距不重叠的情况：

水平margin永远不会重合
设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
根元素(如html)与body的margin不会重叠

防止外边距重叠的方法：

元素绝对定位postion:absolute;一般用在内层元素
内层元素加float:left;或display:inline-block;
外层元素用padding增加边距
外层元素设置overflow:hidden;
内层元素透明边框border:1px solid transparent;

49. 简述一下你对浏览器内核的理解。

答：

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行 javascript 来实现网页的动态效果。

50. rgba（）和 opacity 的透明效果有什么不同？

答：

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度。而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）。

2020前端面试题总结