目录
HTML部分：
1. 请阐述对W3C的理解与认识
2. HTML文档中 DOCTYPE 有什么作用？
3. HTML XHTML HTML5的关系
4. HTML5对比HTML4有哪些不同之处
5. HTML5有什么变化
6. H5语义化标签和你对语义化的理解
7. 请列举几个HTML5新增的图像相关的语义化元素
8. 前缀为 data- 开头的元素属性是什么？
9. meta 元素可以定义文档的哪些元数据？
10. input 元素中的 form 属性有什么作用？
11. em 和 i 有什么区别
12. 元素属性src 和 href 有什么区别？
13. img 元素中的 title 和 alt 有什么区别？
14. img 标签的 srcset 的作用是什么
15. 什么是锚点？
16. 响应式图片处理优化：picture 标签
17. 常见的块级元素和行内元素
18. base的基本用法
19. 为什么a包含div是合法的？
20. 哪些元素可以自闭合
21. form的作用有哪些？
22. 在 script 标签上使用 defer 和 async 的区别是什么？
24. 请简单介绍一下浏览器的两种渲染模式：怪异模式和解决标准模式
25. 如何看待Web App、Hybrid App、Native App?
26. 什么是Shadow DOM（影子中的DOM）？
27. 什么是分区响应图？
28. 请列举表格布局的弊端
29. iframe 有哪些缺点？
30. 前端做本地存储的方式有哪些？
31. 用什么方法可以防止 cookie 被盗取？
32. 如何将一个html页面解析
33. 页面加载和渲染
34. HTML和DOM的关系
35. property 和 attribute 的区别
CSS部分：
1. 什么叫渐进增强？它和优雅降级有哪些区别？
2. 请谈谈你对 CSS Hack 的理解
3. 什么是外边距塌陷？当出现外边距塌陷时，外边距之间的计算方式是怎样的？
4. 将元素的 display 属性设为 inline-block 之后，能够把多个这样的元素排列在一行，但是元素之间会有空隙，如何才能消除空隙？
5. BFC的理解与应用
6. CSS常用选择器和优先级
7. 能够被子元素继承的CSS属性有哪些
8. 链接有4种状态，声明的顺序是怎样的？
9. 用过 calc() 函数吗？它是什么？有什么作用？
10. 在移动端中，经常会做整屏的专题页面。如何设置元素的高度，使得页面的背景能铺满整个屏幕？
11. Web 安全色
12. 居中对齐的实现方式
13. 请说说对浮动的理解
14. 常用的清除浮动的方法
15. Position常用取值
16. 绝对定位和浮动有哪些异同？
17. css中实现文字截断
18. 如何用纯 CSS 的方式让超出容器宽度的文本自动替换为省略号
19. CSS 中的 @font-face 有什么作用？
20. 对 CSS 中行高（line-height）的理解
21. line-height如何继承
23. 默认情况下，当img元素和span元素混排时，图像下方会留出几像素的空隙，这是为什么？
24. 对于图片下面本身自带的空隙，如何去除？
25. 利用纯 CSS 设计一个三角形
26. 表格
27. 不使用 CSS 属性 border，使用其他属性模拟边框
28. 关于 border: none; 和 border: 0; 的描述
29. 什么是CSS Sprite（雪碧图）以及它的原理和优缺点
30. animation 属性
31. transition（过渡） 及其属性
32. 对媒体查询的理解
33. 什么是设备像素比
34.什么是响应式设计？
35. 定位布局
36. 请简单介绍一下弹性布局
37. 圣杯布局和双飞翼布局的理解和区别
38. 弹性盒模型(flex)及其常用属性
39. 如何让一个浮动中的元素水平居中？
40. 谈谈你对标准盒子模型的理解
41. hsla与rgba的区别：
42. base64的使用：
43. 如何实现流式布局和响应式布局
44. flex如何实现一个直径100px的圆放在屏幕中间
45. 如何判断数据类型，各有什么区别
46. margin纵向重叠问题
47. margin负值问题
48. window.onload和DOMContentLoaded的区别
49. 什么是 CSS 预处理器
50. Bootstrap 有哪些优势
51. 实现两栏（三栏布局的方法）
52. 如何进行移动端的适配
53. 标准盒模型和怪异盒模型的区别有哪些？
54. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？
55. px、em、rem之间有什么区别？
HTML部分：
1. 请阐述对W3C的理解与认识
W3C是一个指定各种标准的非盈利组织，标准包括HTML、CSS、XHTML以及XML等
Web标准定制后，具有以下几个特点：
- 学习成本低，只需按照W3C标准学习即可，不用再去学习各个浏览器厂商所制定的标准
- 统一开发流程，用标准化的工具进行开发（例如：VSCode、Sublime、WebStorm等）、用标准化的浏览器进行网页测试（例如：火狐、谷歌等），便于多人协作
- 简化网站代码的维护，不会有不同浏览器的多个版本，网页的寿命也更长
- 跨平台，可方便迁移到不同设备中。例如添加无障碍标准后，能让残障人士更便捷的使用设备访问网页
- 标准大部分是由使用它们的人制定的，例如浏览器制造商、Web开发人员等，这样所制定的标准就既有实用性又有专业性
2. HTML文档中 DOCTYPE 有什么作用？
DTD即文档类型定义，一种标记符的语法规则
HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准
DOCTYPE 即 Document Type，网页文件的文档类型标准。
主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面，从而确保不同浏览器以相同的方式进行解析文档，以执行相同的渲染模式
DOCTYPE的意义：
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性（例如写个DOCTYPE是HTML4的那么浏览器就知道写的是HTML4的那么有些写法是不合法的）
DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如：
<!DOCTYPE html>
<html>
...
</html> (目前主流)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...
</html> (早期)3. HTML XHTML HTML5的关系
它们都属于标记语言
语言 | 中文名 | 说明 |
HTML4 | 超文本标记语言 | 主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常混乱和松散，语法非常的不严谨。 |
XML | 可扩展标记语言 | 主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。可以自定义一些标签名。有且只能有一个根标签 |
XHTML | 可扩展超文本标记语言 | 属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。 |
HTML5 | 超文本标记语言 | 在HTML的基础上进行拓展，用于页面呈现 (目前标准) |
XHTML属于XML，是HTML进行XML严格化的结果，HTML5比XHTML宽松
XML的要求会比较严格:
- 有且只能有一个根元素
- 大小写敏感
- 正确嵌套
- 必须双引号
- 必须闭合标签
...
<?xml version="1.0" encoding="utf-8"?>
<root>
<father id='box'>
<child>小张</child>
<child>小王</child>
</father>
</root>4. HTML5对比HTML4有哪些不同之处
不同点 | 备注说明 |
只有一种 DOCTYPE ⽂件类型声明(统一标准) |
|
增加了一些新的标签元素(功能, 语义化) | section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup... |
input 支持了几个新的类型值 |
|
新增了一些标签属性 | charset（⽤于 meta 标签）；async（⽤于 script 标签） |
新增的全域属性 | contenteditable, draggable... hidden... |
新增API | 本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信WebSocket... |
获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)
记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...
5. HTML5有什么变化
- 旧版本的HTML比较依赖浏览器的插件，例如播放视频需要安装的Flash插件而HTML5不需要
- HTML5不再基于SGML，所以文档声明类型就只有一种（DOCTYPE）
- HTML5消除了过时或冗余的元素，例如font、center等
- HTML5新增了许多语义化的元素（例如：header、article、footer、nav等）和新功能（例如：video、canvas等），并且提供了更好的跨平台支持
- HTML5新增了许多表单增强，包括新的元素（type=week...）以及表单验证(required)
- 新的API（离线、音视频--audio radio、图形--canvs svg、实时通信--web worker、本地存储--localstorage fetch、设备能力--定位 获取陀螺仪的状态等），这些主要表现在JS层面
- HTML5规定了新的全局属性和元素属性，全局属性有（dragable、contenteditable等），元素属性有（accept、placeholder等）
6. H5语义化标签和你对语义化的理解
所谓的语义化其实就是对词语或者句子含义的正确理解即让元素、属性或者属性值有含义，更够更准确的标记特定类型的内容
对元素语义化的目的就是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS只负责样式
这样做的优势：
- 可以使HTML文档结构清晰、布局合理、主体突出、可读性更强，便于开发者更快速地理解代码的意图
- 促进无障碍访问，降低信息污染，帮助残障人士的辅助设备识别元素含义，做出正确反馈
- 改善搜索引擎优化（SEO）。经语义化的HTML能够提供丰富的上下文信息和内容的含义
HTML5中新增的语义化标签包括：
- header 头部
- nav 导航条
- aside 侧边栏
- article 主要内容，例如文章、帖子、博客
- section 区块，相当于div
- footer 页脚
7. 请列举几个HTML5新增的图像相关的语义化元素
HTML新增了两个与图像相关的语义化元素：figure、figcaption。都属于内容分组，两者组合，可用于插入图像，以及对图像的描述，示例如下：
<figure>
<img src="cc" />
<figcaption>头像图片....</figcaption>
</figure>8. 前缀为 data- 开头的元素属性是什么？
这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性
我们可以直接在元素标签上声明这样的数据属性：
<div id="mydiv" data-message="Hello,world" data-num="123"></div>也可以使用 JavaScript 来操作元素的数据属性：
let mydiv = document.getElementById('mydiv')
// 读取
console.log(mydiv.dataset.message)
// 写入
mydiv.dataset.foo = "bar!!!"
// 或者
mydiv.setAttribute("data-foo", "bar!!!")在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可
例如: vue实现删除功能时需要 id, 可以直接传值
<tr v-for="item in list" :key="item.id">
<td>张三</td>
<td>18</td>
<td>体育好</td>
<td>
<button @click="del(item.id)">删除</button>
<button>编辑</button>
</td>
</tr>9. meta 元素可以定义文档的哪些元数据？
<meta> 标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。
- 如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词）
- 如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）
一些常用的功能及写法：
- 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">- 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">- 设置 http 响应头：Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!-- 设置字符集可简写为 -->
<meta charset="utf-8">10. input 元素中的 form 属性有什么作用？
form 属性是 HTML5 的新增属性，用于关联某个 form 元素。以往 input 元素需要放在 form 元素之内，定义了 form 属性后，就可以放在文档的任何位置，示例如下：
<!--form元素内-->
<form id="info" method="post">
<input type="text" />
</form>
<!--关联 id 为 info 的 form 元素-->
<form id="info" method="post">
</form>
<input type="text" form="info" />11. em 和 i 有什么区别
em是语义化的标签，表强调
i 是纯样式的标签，只是表示斜体没有强调的意思
HTML5中i标签其实已经算是基本上废弃了的，只是一般使用字体图标的时候会用i标签
12. 元素属性src 和 href 有什么区别？
两者功能不同。href 能够建立一条通道，将当前文档和定义的资源连接起来。src 是将定义的资源嵌入到当前文档中
13. img 元素中的 title 和 alt 有什么区别？
- title 是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link 和 style元素中的 title 比较特殊，表示样式表的名称
- alt 是局部属性，仅可用在 img、input等元素中，提供在图片为载入或者载入失败时的替代文本，注意只有当input元素的type属性值为img时，才能使用有alt属性
14. img 标签的 srcset 的作用是什么
考察点: 处理响应式图片的方式 (css媒体查询换的是背景图片, 而不是 img 标签的 src)
开发者和设计师们竞相寻求 处理响应式图片 的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，
使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？
你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。 博客链接
其实通过使用 img 标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示。
也就是图片的响应式处理能力。
如果你的响应式需求比较简单，只需要针对屏幕的不同 dpr （device pixel ratio，设备像素比）来决定图片的显示的话，
dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3)
那么就只要这么写：
<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。
w描述符告诉浏览器列表中的每个图象的宽度。sizes属性需要至少包含两个值，是由逗号分隔的列表。
根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。
sizes属性有两个值：
- 第一个是媒体查询条件；
- 第二个是图片对应的尺寸值，
在特定媒体条件下，此值决定了图片的宽度。
需要注意是，源图尺寸值不能使用百分比，如果要用100%,vw是唯一可用的CSS单位。
<img alt="img元素srcset属性浅析"
srcset="
320.png 320w,
480.png 480w,
640.png 640w"
sizes="
(max-width: 320px) 100vw,
(max-width: 360px) 320px,
(max-width: 480px) 360px,
(max-width: 640px) 480px,
640px"
src="640.png"
/>为 img 定义以上属性后，浏览器的工作流程如下：
- 检查设备的实际宽度
- 检查 img 标签的 sizes 属性中定义的媒体查询条件列表，并计算哪个条件最先匹配到
- 得到图片此时的响应式宽度
- 加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片
注意:
测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了且我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的
15. 什么是锚点？
锚点(anchor)是一种特殊链接，能定位到HTML文档中的某个特定位置，这个文档既可以在当前域名下，也可以在其他域名下
<a href="#">返回顶部</a>
<a href="#anchor">内部定位</a>
<a href="#www.baidu.com#anchor">外部定位</a>通过HTML元素的id或name属性来设置锚点。目前只有a元素可以用name属性设置锚点，但HTML5将a元素的name属性废弃了，所以推荐都用id来设置锚点
16. 响应式图片处理优化：picture 标签
考察点：响应式图片处理
picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载的图片
在 <picture> 下可放置零个或多个<source>标签、以及一个<img>标签，为不同的屏幕设备和场景显示不同的图片。
如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找
使用picture元素选择图像，不会有歧义。
浏览器的工作流程如下：
- 浏览器会先根据当前的情况，去匹配和使用
<source>提供的图片 - 如果未匹配到合适的
<source>，就使用<img>标签提供的图片
<picture>
<source srcset="640.png" media="(min-width: 640px)">
<source srcset="480.png" media="(min-width: 480px)">
<img src="320.png" alt="">
</picture>17. 常见的块级元素和行内元素
常见的块级元素：div、p、h1-h6、ol、ul、li、dl、dd、dt、table、tr、td、form、header、nav、aside、footer、section、article等
常见的行内元素：span、a、img、b、i、s、u、del、sup、sub、strong、input、button、font、textarea、video、audio等
块级元素和行内元素的区别：
- 块级元素独占一行，行内元素在同一行显示
- 块级元素默认宽度为100%，行内元素默认宽度由内容撑开
- 块级元素可以设置宽高、行内元素设置宽高不生效
- 块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右
- 块级元素默认的display属性为block，行内元素默认的display属性为inline
- 布局时，块级元素即可包含块级元素也可包含行内元素，而行内元素一般不要包含块级元素
拓展：
- 都是文本加粗标签，其中：b标签：定义粗体的文本；strong标签：重要的文本应该用 <strong> 标签表示
- 都是文本倾斜标签，其中：<em> 标签是一个短语标签，用来呈现为被强调的文本；<i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本，被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等
- 都是删除线标签，其中：<del> 标签定义文档中已删除的文本，所有主流浏览器都支持 <del> 标签；<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线；所有主流浏览器都支持 <s> 标签，对那些不正确、不准确或者没有用的文本进行标识，不应该用来定义替换的或者删除的文本
- 都是下划线标签，其中：<ins> 标签定义已经被插入文档中的文本；<u> 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词；尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接
18. base的基本用法
规定页面上所有链接的默认 URL 和默认目标(指定一个基础路径，所有的连接都会以该路径为基准来进行计算)
所有主流浏览器都支持 <base> 标签
在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部
把 <base> 标签排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了
如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="//www.runoob.com//images/" target="_blank">
</head>
<body>
<p><img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"</p>
<p><a href="//www.runoob.com/">runoob.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</p>
</body>
</html>
19. 为什么a包含div是合法的？
不一定合法，主要取决于a标签外面是什么元素。首先a标签本质上是一个透明元素，即在计算的时候是要将a标签拿掉的，因此取决于 div 前面是什么，如果 div 前面的是一个 div 或者 body 那么就是可以的，反之就是不合法的
从HTML4和XHTML中，元素的分类基本是按照默认的inline和block来分类的，所以嵌套的规则也是这样来规定的
那么所谓的行内元素一般不能包含块级元素也是HTML4和XHTML中的一个规范，如果按照这个规范实际上a包含div是不合法的
因此a包含div不一定是合法的，它取决于外面是什么元素，因为a是一个transparent model 也就是在计算时是要将a拿掉的
所以主要取决于div前面是什么，如果div前面是一个div或者body这样的就是合法的，但是如果是一个p或者是一个span那就是不合法的
20. 哪些元素可以自闭合
- 表单元素：input
- 图片：img
- 换行符：br
- 水平线：hr
- meta link
21. form的作用有哪些？
- 直接提交表单
- 使用submit/reset按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方库可以进行表单验证
22. 在 script 标签上使用 defer 和 async 的区别是什么？
明确: defer 和 async 的使用, 可以用于提升网页性能
script标签存在两个属性，defer和async，因此 script标签 的使用分为三种情况：
<script src="example.js"></script>没有defer或async属性，浏览器会立即加载并执行相应的脚本。
不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载<script async src="example.js"></script>有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；<script defer src="example.js"></script>有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的(异步)，此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
下图是使用了 defer、async、和未使用时的运行情况对比：
绿线：HTML 的解析时间
蓝线：JS 脚本的加载时间
红色：JS 脚本的执行时间
23. 从图中我们可以明确一下几点：
1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部, 也不会阻塞页面的加载, 与页面加载同时进行)
2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载)
所以, js脚本加上 async 或 defer, 放在头部可以减少网页的下载加载时间, 如果不考虑兼容性, 可以用于优化页面加载的性能
24. 请简单介绍一下浏览器的两种渲染模式：怪异模式和解决标准模式
怪异模式：用于模拟旧浏览器的行为。早期网站并不会遵循完整的规范，随着浏览器支持的规范越来越多，在一些旧的浏览器中开发的页面，显示时会被破坏。为了向后兼容，浏览器就发明了怪异模式。一行错误或无效的 DOCTYPE 都会触发怪异模式。
常见的怪异模式的一些怪癖：
- 触发IE模型，宽度和高度的算法与W3C盒模型不同
- 在表格中的字体样式（例如：font-size等）不会被继承，如果在body中设置了字体样式，表格中的字体样式需要再设置一次
- 对元素设置左右外边距自动(即左右margin为auto)和宽度，并不会实现水平居中
- 当内容超出容器高度时，会把容器拉伸而不是溢出
- 颜色值必须使用十六进制标记法，即以#开头
- ......
接近标准模式：是由某些 DOCTYPE 触发的，基本上就是标准模式，但有一些调整，例如计算表格单元的尺寸遵循CSS2规范，可以消除单元格中图像底部的空隙
25. 如何看待Web App、Hybrid App、Native App?
随着HTML5功能的不断完善，促进了Web App与Hybrid App的发展，同时也影响了Native App的市场占有率
Web App：利用Web浏览器和Web技术通过网络执行任务的应用
Native App：以特定编程语言编写的只能手机应用，例如用于安卓系统的java
Hybrid App：将Web App包装在本机容器中（常用的有WebView），从而可以通过使用本机SDK来增强Web代码。会运行在App内嵌的容器中（例如：WebView），在容器中可架起一座桥梁，从而能够间接调用一部分的系统API，还能借此搭建一套离线应用程序。其迭代周期分为两种：如果只更新web部分，那么周期就短，可随时将代码提交到服务器上进行更新；否则与Native App相同，需要先打包，再提交到应用商店审核，审核通过后才算更新完成
26. 什么是Shadow DOM（影子中的DOM）？
Shadow DOM 是浏览器的一种功能，能够自动添加子元素，例如 audio 元素在网页中能够使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成。在HTML文档中可以简单的使用该元素，代码示例如下：
<audio controls src="xxx"></audio>27. 什么是分区响应图？
分区响应图即热点区域，也就是能让图像上的部分位置有超链接，将map元素和area元素组合使用，可创建分区响应图，代码如下所示：
<img src="xx" usemap="#Map" />
<map name ="Map">
<area shape="circle" coords="50,50,30" href="/">
<area shape="rect" coords="50,50,30,40" href="/">
</map>map 元素中的 name 属性必须定义，且赋予一个名称，以便 img 元素使用 usemap 属性引用它，如果同时还指定了 id 属性，那么两个属性必须具有相同的值
28. 请列举表格布局的弊端
可访问性差。表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系，无障碍工具（如屏幕阅读器）从这些文档中获取的数据会非常混乱，从而影响可读性
难以实现响应式。通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并要用到 clospan 和 rowspan 属性，不能用 CSS 属性简单的设置
可维护性差。表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套。这使得代码的可读性差，特别是如果不缩进的话，标签就没有层次感，从而更加难以理解代码的意图
不够语义化。表格布局会使用大量的单元格，单元格不像nav、header等元素有明确的含义。
加载速度慢。嵌套表越多，文档就会变得越臃肿，不仅会加长网络传输的时间，而且也会增加渲染的时间
29. iframe 有哪些缺点？
iframe 元素能够把一个文档嵌入到另一个文档中，并且能够让两个文档保持独立
缺点：
浏览器对同一域名的并发请求数是有限制的。iframe中的文档即子文档与父文档会共享连接，当并发请求数达到上限时，子文档中的资源只能等待，直到前面的通信完成
阻塞父窗口的load事件
脚本的执行是同步和阻塞的，将script元素放置于iframe之前同样也会阻塞iframe中资源的请求
制造点击劫持，将一个不可见的iframe或包含用户感兴趣内容的iframe覆盖在文档的某个位置上，诱使用户点击iframe中的内容
30. 前端做本地存储的方式有哪些？
方式名称 | 标准说明 | 功能说明 |
Cookies | HTML5 前加入 | 1.会为每个请求自动携带所有的Cookies数据，比较方便，但是也是缺点，浪费流量； 2.每个domain(站点)限制存储20个cookie； 3.容量只有4K 4.浏览器API比较原始，需要自行封装操作。 (js-cookie) |
localStorage | HTML5 加入 | 1.兼容IE8+，操作方便； 2.永久存储，除非手动删除； 3.容量为5M |
sessionStorage | HTML5 加入 | 1.功能基本与 localStorage 相似，但当前页面关闭后即被自动清理； 2.与Cookies、localStorage 不同点是不能在所有同源窗口间共享，属于会话级别的存储 |
Web SQL | 非标准功能 | 1.2010年已被废弃，但一些主流浏览器中都有相关的实现； 2.类似于 SQLite 数据库，是一种真正意义上的关系型数据库，⽤SQL进⾏操作； |
IndexedDB | HTML5 加入 | 1.是一种 NoSQL 数据库，⽤键值对进⾏储存，可进⾏快速读取操作； 2.适合复杂 Web存储场景，⽤JS操作⽅便 (前端大量存数据的场景较少, 如果有, 可以用) 3.存储空间容量, 大于等于 250MB，甚至没有上限 |
31. 用什么方法可以防止 cookie 被盗取？
Cookie 是先由浏览器向服务器发起请求，再由服务器响应后回传 Set-Cookie 首部（此时可以设置 HttpOnly 属性）并向客户端浏览器写入 Cookie。在给 Cookie 设置 HttpOnly属性后，就能够禁止页面的 JavaScript 访问这个 Cookie，从而避免被盗取
32. 如何将一个html页面解析
- 用户输入网址(假设是个html页面，并且是第一次访问)，浏览器向服务器发出请求，服务器返回html文件
- 2浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件
- 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。同理也会返回链接的其他css，js文件等
- 4浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了
- 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码
- 如果浏览器在html文件底部发现了一段Javascript代码；Javascript脚本执行了这条语句，假设这段代码是隐藏前面的某一个，浏览器不得不返回重新渲染这部分代码
- 最终加载到结尾标签，完成页面的加载
- 页面加载完后，如果又执行一些会导致页面变化的js，浏览器会返回重新渲染这段代码
33. 页面加载和渲染
加载过程：
形式：html代码、媒体文件(图片、音视频等)、javascript、css
过程：DNS解析(域名-->IP地址)、浏览器根据IP地址向服务器发起http请求、服务器处理http请求，并返回给浏览器
渲染过程：
- 根据HTML代码生成DOM Tree
- 根据CSS代码生成CSSOM
- 将DOM Tree和CSSOM整合形成Render Tree
- 浏览器根据Render Tree渲染页面
- 遇到<script>则暂停渲染，优先加载并执行JS代码，完成后再继续
- 直到把Render Tree渲染完成
34. HTML和DOM的关系
我们用 HTML 去写一个网页的结构，其实就是去写一些文本，那么写出来的其实就是一些一串一串的字符串，所以HTML是“死”的也就是我们写的所谓的结构看起来是结构而已，不管是用缩进还是换行让整个网页看起来有结构，但是本质上HTML就是一个字符串而已
HTML是需要通过浏览器进行解析，解析之后才会变成DOM
而DOM是浏览器内存里的一个结构，是一个DOM树，它会知道body下面有哪一些元素，是活的。而HTML是不知道的，是没有的
JS是可以维护DOM的，比如在页面的body下面插一个script标签进去，这个时候其实并不是写一段HTML进去，而是操作的是一个DOM
这里有一点比较让人混淆的是，DOM API 里其实提供了 innerHTML 这样一个属性，可以去写例如 body.innerHTML = p.innerHTML ，然后body下面就会有这么一段内容，但是其实这一段并不是HTML而是DOM，它是由body寄于的这个DOM元素提供给你的API，body接受到一串字符串后，会将其解析成DOM结构，然后显示出来
35. property 和 attribute 的区别
中文意思都是属性
一般我们认为 property 表达的是特性，attribute 表达的是属性
区别在于 attribute 是“死”的，也就是写在HTML中的
经过解析之后每个DOM元素会有一个 property ，也就是它的特性，因此这个 property 是活的
CSS部分：
1. 什么叫渐进增强？它和优雅降级有哪些区别？
渐进增强并不是一种技术而是一种设计思想。由于各个浏览器的渲染能力不一样，因此要做一个网站并且所有人的感受都是一样的，这是不可能的。但还是得确保网站的可访问性，保证用户在任何环境下，都能正常访问核心内容或使用基本功能，并为他们提供在当前环境下最好的用户体验，这就是渐进增强的核心思想
优雅降级也是一种设计思想，保证在高版本浏览器中提供最好的体验，遇到低版本浏览器再降级进行兼容处理，使其能够正常浏览
区别：
- 渐进增强是向上兼容，优雅降级是向下兼容
- 渐进增强是从简单到复杂，优雅降级是从复杂到简单
- 渐进增强关注的是内容，优雅降级关注的是浏览体验
2. 请谈谈你对 CSS Hack 的理解
CSS Hack 是一种编程技巧，它让 CSS 代码能兼容各个浏览器，尽量让页面取得想要的效果，避免出现错误的布局。不同厂商的浏览器或者是相同浏览器的不同版本对 CSS 的解析能力都有差异，并且还会存在各种各样的 BUG ， CSS Hack 就会利用这些特点来执行或忽略相应的 CSS 样式。虽然 CSS Hack 能提升兼容性，但还是尽量少用，因为每次都要多写几段额外的代码并且在浏览器升级后在 CSS 的兼容上也会得到增强，因此原先的写法可能就会失效
3. 什么是外边距塌陷？当出现外边距塌陷时，外边距之间的计算方式是怎样的？
外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距。不过只有上下外边距 才会有塌陷
元素的外边距可以用正数或者负数来指定，使用不同的组合会改变其计算方式，针对不同组合总共有三种计算方式：
两个都是正数时去最大值
两个都是负数时取绝对值较大的值
一正一负取两个值相加的和
4. 将元素的 display 属性设为 inline-block 之后，能够把多个这样的元素排列在一行，但是元素之间会有空隙，如何才能消除空隙？
之所以会有空隙是因为在编写HTML 文档的时候，为了便于阅读，通常会将结构格式化（如以下代码所示），格式化后的文档不但会包含换行符，而且还会包含空白符。浏览器会将这些额外的字符合并成一个空白符
<div>
<span style="display: inline-block">行内块元素</span>
<span style="display: inline-block">行内块元素</span>
<span style="display: inline-block">行内块元素</span>
</div>解决方法如下：
i. 在父元素 div 中定义 CSS 属性，并且设置其 font-size 为0
ii. 将3个 span 元素写在一行
iii. 给父元素 div 定义负的 CSS 属性 letter-spacing，减小字符之间的距离，再将 span 元素中的 letter-spacing 定义为0，清除间距即可
5. BFC的理解与应用
什么是BFC?
BFC(Block format context 块级格式化上下文)，是一个用于在盒模型下布局块级盒子的独立渲染区域
将处于BFC区域内和区域外的元素进行互相隔离。
浮动元素和标准文档流的元素默认会重叠，但是给标准文档流设置BFC，那么浮动元素就会和BFC容器一行排列
同一容器中的margin会重叠，可以让两个重叠的元素在不同的BFC空间里，这样就可以解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[class*="box"]{
width: 300px;
height: 200px;
border: 1px solid #f40;
}
.container {
/* 将 container 容器变为 BFC */
overflow: hidden;
}
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
子元素浮动，父元素高度坍塌，使用BFC就可以解决父元素高度坍塌的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[class*="box"]{
width: 300px;
height: 200px;
border: 1px solid #f40;
}
.container {
width: 820px;
border: 1px solid;
/* 将 container 容器变为 BFC */
overflow: hidden;
}
.box1 {
float: left;
width: 400px;
height: 400px;
background-color: #f40;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
</div>
</body>
</html>BFC有5条规则：
- BFC有隔离作用，即内部元素不会受外部元素的影响（反之亦然）
- 一个元素只能存在于一个BFC中，如果能同时存在两个BFC中那么就违反了隔离原则
- BFC内的元素按正常流排列，元素之间的间隙由元素的外边距控制
- BFC中的内容不会与外面的浮动元素重叠
- 计算BFC的高度，需要包括BFC内浮动子元素的高度
形成BFC的常见条件：
float不是none
position是absolut或fixed
overflow不是visible
display是fle inline-block等
BFC常见的应用：
1. 场景一：防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)
属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠，如果想让它们不重叠，可通过让这两个相邻块级子元素分属于不同的BFC
以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了10px的外边距，我们期望它们之间的间距是 20px，但实际效果却只有 10px）：
<style>
.box1 {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 10px; /* 下外边距为 10px */
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px; /* 上外边距为 10px */
}
</style>
<div class="box1"></div>
<div class="box2"></div>
下面我们让其中一个盒子触发BFC，从而达到间隔 20px 的期望效果：
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px;
display: inline-block; /* 通过设置 display 为 inline-block 可以触发 BFC */
}
2. 清除浮动
.container{
background-color: #f1f1f1;
}
.left{
float: left;
}<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" alt="" class="left">
<p class="bfc">某一段文字......</p>
</div>
.bfc{
overflow: hidden;
}
场景三：实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)
以下示例中，box2 会被设置了浮动的 box1 覆盖：
<style>
.box1 {
float: left;
width: 300px;
background-color: red;
height: 400px;
}
.box2 {
background-color: blue;
height: 600px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
要避免这种覆盖行为，可以让 box2 触发 BFC, 实现布局效果, 左边固定右边自适应：
.box2 {
background-color: blue;
height: 600px;
overflow: hidden; /* 将 overflow 设置为非 visible 值可触发 BFC */
}
三栏布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 100%;
}
.left {
float: left;
width: 300px;
height: 200px;
background-color: #f6bfbc;
}
.center {
width: auto;
height: 200px;
background-color: #cd5e3c;
/* BFC */
overflow: hidden;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #f40;
}
</style>
</head>
<body>
<div class="container">
<!-- 前面两个盒子一个左浮动，一个右浮动，
中间盒子放最后，设置成BFC容器 -->
<div class="left">左</div>
<div class="right">右</div>
<div class="center"></div>
</div>
</body>
</html>
6. CSS常用选择器和优先级
1.基础选择器：
- 全局选择器 *
- 元素选择器 div
- 类选择器 .类名，可以重复，同一个标签可以有多个
- ID选择器 #类名，不可重复，同一个标签只能有一个
2.关系选择器：
- 后代选择器 空格，选中所有的后代 div p
- 子代选择器 >，选中所有直接子代元素 div > p
- 相邻兄弟选择器 +，选中后面紧挨着的一个兄弟元素 div + p
- 通用兄弟选择器 ~，选中后面的所有兄弟元素 div ~ p
3.伪类选择器：
- :link 点击之前
- :visited 点击之后
- :hover 鼠标悬停
- :active 鼠标按下未松开
- :first-child ：父元素中第一个元素，只要这个元素是在第一个位置即可 div:first-child {}
- :last-child
- :first-of-type：父元素中第一个相同类型的元素，即具有相同的元素名 div p:first-of-type {}
- :nth-child()
- :only-child
- :empty
- :not()
- :nth-of-type()
- ......
4.伪对象（元素）选择器：
::before/:before {
content: '';
}
::after/:after{
content: '';
}
伪类和伪元素的区别：
伪类（pseudo-class）是以冒号:为前缀，可被添加到⼀个选择器的末尾的关键字。
它用于让样式在元素的特定状态下才被应用到实际的元素上。比如：:checked、:hover、:disabled、 :first-child等。
:hover
:nth-child(1)
:nth-child(2)
:checked
注意: 伪类, 虽然是写法比较特殊, css选择器的权重, 和类一致的
伪元素：
:before / :after
伪元素⽤于创建⼀些并不在 DOM 树中的元素，并为其添加样式。伪元素的语法和伪类类似，可以一个冒号或两个冒号为前缀。
⽐如，可以通过 :before 、:after 来在⼀个元素前、后增加⼀些额外的⽂本并为它们添加样式；
并且，虽然⽤户可以看到这些⽂本，但其实它们并不在 DOM 树中。(坑: 伪元素是无法注册事件的, 所以不要通过js控制伪元素)
两者的区别：
虽然它们在语法上是一致的，但是它们的功能区别还是非常明显的。
- 伪类是用来匹配元素的特殊状态的
- 伪元素是用来匹配元素的隶属元素的，这些隶属元素可以在界面中展示，但在 DOM 中不体现
5.属性选择器：
- [属性]
- [属性=属性值]
- [属性=^属性值]
- [属性=$属性值]
- [属性*=属性值]
- [属性|=属性值]
选择器的优先级：
!important(无穷)>行内样式(1000)>ID(100)>类选择器/属性选择器/伪类选择器(10)>元素选择器/伪元素选择器(1)>关系选择器(+、>、~、'') /全局[通配符]选择器（0）
7. 能够被子元素继承的CSS属性有哪些
与元素外观相关的属性，例如：字体、颜色、对齐方式等，能够被继承
与布局相关的属性，例如：边框、外边距、内边距、尺寸等，不能被继承
8. 链接有4种状态，声明的顺序是怎样的？
未访问状态：link
已访问：visited
激活：active
悬停：hover
推荐遵循爱恨法则 love hate即：
link>visited>hover>active
9. 用过 calc() 函数吗？它是什么？有什么作用？
calc() 是 CSS 的一个函数，只有一个数学表达式参数，可处理加减乘除等数学运算，并且在表达式中可混用不同的单位，如以下代码：
div {
width: calc(50% - 2px);
}在用百分比做自适应布局时，如果要进行计算会比较困难，例如为了让两个有边框的元素排列在一起，需要准确的计算出各个元素的宽度，而宽度都是百分数，边框却是像素。单位不同就很难得出结果，但是有了calc() 就可以很轻松的解决
10. 在移动端中，经常会做整屏的专题页面。如何设置元素的高度，使得页面的背景能铺满整个屏幕？
为了能让背景铺满整个屏幕，可以把根元素（html）的高度设置为（100%），然后在该元素中设置背景
根元素的百分比高度之所以有效，是因为根元素的包含块是由视口提供的初始包含块，初始包含块的高度就是视口高度
11. Web 安全色
Web 安全色是指在各种平台下显示效果与预期一致。如果不是安全色，操作系统可能在处理颜色的时候产生抖动（抖动就是混合几种颜色，模拟出系统没有的颜色），这样形成的颜色在不同平台中会有色差，例如在Mac中显示为绿色，而在Thinkpad中却显示为淡绿。
当用十六进制标记法表示Web 安全色时，需要用 00、33、66、99、CC或FF组合的值
12. 居中对齐的实现方式
a.水平居中：
inline元素：text-algin: center;
block元素 ：margin: auto;
absolute元素：left: 50%;+margin-left: 负值（必须要知道子元素的宽度）
flex布局
b.垂直居中:
inline元素：line-height的值等于height值
absolute元素：top: 50%+margin-top负值（必须要知道子元素的高度）
absolute元素：transform(-50%,-50%)
absolute元素：top,left,bottom,right=0+margin:auto
flex布局
示例：
公共部分：
.box {
width: 500px;
height: 500px;
background-color: skyblue;
}
.box1 {
background-color: #f40;
}<div class="box">
<div class="box1">123456</div>
</div>利用flex布局实现：
.box {
display: flex;
/* 设置子元素相对于父元素主轴居中 */
justify-content: center;
/* 设置子元素相对于父元素侧轴居中 */
align-items: center;
}
利用绝对定位实现：
.box {
position: relative;
}
.box1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
}
13. 请说说对浮动的理解
浮动（float）最初仅仅是为了让内容环绕在浮动元素周围，后来利用它的特点逐渐将其用于布局。浮动元素让布局多样化，但它会脱离正常流，造成一些副作用（例如：高度坍塌、影响兄弟元素的位置或样式），如果不加以解决，那么就会直接影响整体布局。
浮动有3个关键字可以选择：left为左浮动、right为右浮动、none为不浮动
14. 常用的清除浮动的方法
1.给受影响的元素加clear:left/right/both;
2.给浮动元素的父元素加高，对于高度未知时不适用
3.给浮动元素的父元素加overflow:hidden/auto;，当子元素比父元素大时则不适用
4.空div法，在浮动元素后面加一个空的div，并设置其clear:both；会增加很多空的div
5.伪对象法（推荐）：加在浮动元素的父元素上
::after {
content: '';
display: block/table;
clear: both;
}
15. Position常用取值
1) static 静态定位 默认值
2) Relative 相对定位，相对于自己原位置定位，定位后原位置保留，配合 left、right、 top、bottom 移动
3) Absolute 绝对定位，相对于已经定位的父元素定位，如果父元素没有定位，逐级往上找，最后相对于 body 定位，定位后原位置不保留，配合 left、right、top、bottom 移动，会使元素脱离正常流，并且将元素变为块级元素，能删除元素所占的空间，并且让元素相对于包含块偏移
4) Fixed 固定定位，相对于浏览器窗口定位，定位后原位置不保留，配合 left、right、top、 bottom 移动，会使元素脱离正常流（除此之外还有浮动也会使元素脱离正常流），能删除元素所占的空间，并且让元素相对于包含块偏移
16. 绝对定位和浮动有哪些异同？
绝对定位和浮动都会使元素脱离正常流，改变元素盒类型，将元素变为块级元素，同时都能创建BFC。两者的不同点如下：
不同点 | 绝对定位 | 浮动 |
包含块 | 离它最近的position不为staticd 的祖先元素的内容区域内 | 离它最近的块级祖先元素的内容区域 |
兄弟元素的影响 | 原先所占据的空间会被删除，不会影响兄弟元素 | 影响兄弟元素的位置或样式 |
摆放位置 | 可以摆放在任意位置 | 不能超出包含块的内容区域，并且向上浮动也会受限制 |
z-index | 可以设置为任意的整数或auto | 无法设置z-index，默认值为0 |
17. css中实现文字截断
公共部分：
<div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</p>
</div>单行文本截断 text-overflow：
优点有：
1.响应式截断，根据不同宽度做出调整
2.文本超出范围才显示省略号，否则不显示省略号
3.浏览器原生实现，所以省略号位置显示刚好
但是缺点也是很直接，因为 -webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性，像 Firefox, IE 浏览器统统都不支持这个属性，浏览器兼容性不好。
使用场景：多用于移动端页面，因为移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。
div {
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 */
overflow: hidden;
/* 显示多少行 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
定位元素实现多行文本截断：
原理：通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字。
优点：
1.兼容性好，对各大主流浏览器有好的支持
2.响应式截断，根据不同宽度做出调整
但是它无法识别文字的长短，即文本超出范围才显示省略号，否则不显示省略号。还有因为是我们人为地在文字末尾添加一个省略号效果，就会导致它跟文字其实没有贴合的很紧密，遇到这种情况可以通过添加 word-break: break-all; 使一个单词能够在换行时进行拆分。
适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。
p {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
}
p::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
/* 为了展示效果更好 */
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
float 特性实现多行文本截断：
优点：
1.兼容性好，对各大主流浏览器有好的支持
2.响应式截断，根据不同宽度做出调整
3.文本超出范围才显示省略号，否则不显示省略号
<div class="wrap">
<div class="text">
That's the basic idea. You can imagine the light blue region as the title, and the yellow region as the ellipsis. Then you may think that the pink box takes up space, but will the title be delayed as a whole? Here you can come out by the negative value
of margin. Set the negative value of the pale blue box to be the same width as the pink box, and the title can also be displayed normally.
</div>
</div>.wrap {
height: 40px;
line-height: 20px;
overflow: hidden;
}
.wrap .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
.wrap::before {
float: left;
width: 5px;
content: '';
height: 40px;
}
.wrap::after {
float: right;
content: "...";
height: 20px;
line-height: 20px;
/* 为三个省略号的宽度 */
width: 3em;
/* 使盒子不占位置 */
margin-left: -3em;
/* 移动省略号位置 */
position: relative;
left: 100%;
top: -20px;
padding-right: 5px;
background-color: #FFF;
}
18. 如何用纯 CSS 的方式让超出容器宽度的文本自动替换为省略号
可以使用 text-overflow 属性，这个属性用于显示内容溢出时的省略标记，例如当内容太多时，将超出的部分替换为省略号
但要实现这个效果，需要先满足3个条件，那就是容器要有明确的宽度、强制在一行显示以及隐藏溢出的内容，代码如下：
p {
width: 200px; /*容器宽度*/
white-space: nowrap; /*强制在一行*/
overflow: hiddden; /*隐藏溢出*/
}把 text-overflow 设为 ellipsis 后（如下所示），就能将溢出的内容替换为省略号，需要结合上面的 3 个条件
.overflow-ellipsis {
text-overflow: ellipsis;
}19. CSS 中的 @font-face 有什么作用？
CSS 原先只能使用操作系统上安装的字体，自从引入了 @font-face 后，就打破了这个限制，允许使用在线字体，不再拘泥于几种字体
@font-face 能将放置在服务器上的自定义字体嵌入到页面中，装饰文本，这个字体还可以是矢量图标
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}20. 对 CSS 中行高（line-height）的理解
行高是指两行文本基线之间的垂直距离。基线即字母排列的基准线，汉字中不存在基线，当汉字与字母混排时，汉字的下端沿并不在基线上，而是会被调整到基线下边一点：
line-height 影响的是行内元素而不是块级元素，如果给块级元素设置行高，那么受影响的将会是行内内容
21. line-height如何继承
写具体数值，如30px，则继承该值
body{
font-size: 20px;
line-height: 50px;
}
p{
font-size: 16px;
background-color: #ccc;
}<p>AAA</p>
写比例，如2/1.5，则继承该比例
body{
font-size: 20px;
line-height: 1.5;
}
p{
font-size: 16px;
background-color: #ccc;
}<p>AAA</p>
写百分比，如200%，则继承计算出来的值
body{
font-size: 20px;
line-height: 200%;
}
p{
font-size: 16px;
background-color: #ccc;
}<p>AAA</p>
注意：数字和百分比都需要与字体大小（font-size）相乘才能得到真实的行高。主要区别在于如果父元素的行高是数字，那么子元素继承的也将是这个数字；如果父元素的行高是百分数，那么子元素继承的将会是经过计算后的真实行高
23. 默认情况下，当img元素和span元素混排时，图像下方会留出几像素的空隙，这是为什么？
img是一个替换元素，替换元素没有自己的基线，如果将它和非替换元素混排那么其行内盒的底端将会与基线对齐。由于与基线对齐，因此图像下方就会留出几像素的空隙
24. 对于图片下面本身自带的空隙，如何去除？
原理：它是按照inline去做这样排版，排版就会涉及到字体对齐，默认的是按照baseline(元素放置在父元素的基线上)方式对齐的而baseline跟底线之间是有偏差的，偏差的大小由字体大小而定，如果是12px的大小，那么有可能图片的间隙就是3px左右
解决方式：
- vertical-align:bottom; 方式1
- display:block; 方式2(把img变为块级元素从而来消除这段空隙)
25. 利用纯 CSS 设计一个三角形
设计思路：
- 现将元素（如div）的宽高设置为0，边框的宽度设置为50px
- 这样4个部分的边框就可以拼接成一个正方形
- 然后将其他3个边框的颜色设置为透明
- 最后剩下的部分就是一个三角形了
代码示例如下：
<div class="triangle"></div>.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: gray;
}
26. 表格
i. 在表格中，两个相邻的单元格有一条边框会共用，当一边的 border-style 设置为 hidden，另一边的 border-style 设为 yellow时，最终的border-style属性值为：hidden
将边框的外观（border-style）设为 hidden 表示隐藏边框，当应用于表格单元格的时候， hidden 的优先级比较高
ii. 在表格中，两个相邻的单元格有一条边框会共用，当一边的 border-style 设置为 node，另一边的 border-style 设为 yellow时，最终的border-style属性值为：yellow
将边框的外观（border-style）设为 none表示无边框，当应用于表格单元格的时候， none的优先级比较低
27. 不使用 CSS 属性 border，使用其他属性模拟边框
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
值 | 说明 |
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色 |
inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
这里可以用 box-shadow（阴影）来模拟，这是 CSS3 新增的属性，可向边框添加一个或者多个阴影。利用阴影可以模拟边框，使得元素可以嵌套无限层边框。示例如下：
<div></div>div {
width: 150px;
height: 50px;
box-shadow: 0 0 0 5px #ccc,
0 0 0 10px #000,
0 0 0 5px #F00 inset;
}
28. 关于 border: none; 和 border: 0; 的描述
当为 border: none; 时，宽度和颜色会被覆盖，宽度变为默认值 medium，颜色变为默认的前景色（元素 CSS 属性 color 的值），示例代码如下：
div {
border: none;
/* 等价于 */
border-width: medium;
border-style: none;
border-color: 前景色;
}当为 border: 0; 时，外观和颜色会被覆盖，外观变为默认值 none，颜色变为默认的前景色（元素 CSS 属性 color 的值），示例代码如下：
div {
border: 0;
/* 等价于 */
border-width: 0;
border-style: none;
border-color: 前景色;
}29. 什么是CSS Sprite（雪碧图）以及它的原理和优缺点
Css 雪碧图是一项图片整合技术，把许多小的背景图片整合到一张图片上，形成一张大图
当用这张大图作背景图像时，可以利用 background-position 属性进行背景定位，从而找到想要的小图标
原理：
利用 background-images、background-repeat、background-position
优点：
1）减少图片的字节数，提升网页性能
2）减少命名的困扰
3）减少请求多张小图片带来的网络消耗（因为发起的HTTP请求数变少了）
4）实现提前加载资源的效果
缺点：
- CSS Sprites中任意一张小图的改动，都需要重新生成大图；并且用户端需要重新下载整张大图，这就降低了浏览器缓存的优势
- 随着HTTP2的逐渐普及，HTTP2的多路复用机制可以解决请求多个小图片所创建多个HTTP请求的消耗，让CSS Sprites存在的价值降低了
- 图片如果放大, 是会失真
目前其他主流的处理图片的方案: iconfont 字体图标, svg矢量图...
30. animation 属性
动画（animation）有8个子属性，如下表所示：
动画的子属性
animation-name | 动画名称，名称不能定义为其他子属性的关键字 |
animation-duration | 动画持续的时间 |
animation-delay | 动画的延迟时间 |
animation-timing-function | 缓动函数（例如：ease、linear、ease-in、ease-out...），steps()函数（CSS3 transition-timing-function 属性 | 菜鸟教程） |
animation-iteration-count | 循环次数，可以用数字和关键字表示 |
animation-direction | 播放方向（例如：reverse、alternate... ） |
animation-play-state | 动画的状态，运行（running）或暂停（paused） |
animation-fill-mode | 动画开始之前或结束之后的状态 |
31. transition（过渡） 及其属性
transition: property duration timing-function delay;
transition 属性设置元素当过渡效果，四个简写属性为：
- transition-property CSS属性的name，transition效果
- transition-duration transition效果需要指定多少秒或毫秒才能完成
- transition-timing-function 指定transition效果的转速曲线（例如：ease、linear、ease-in、ease-out...）
- transition-delay 定义transition效果开始的时候
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果
设置了元素的过渡后，不能立刻看到效果，需要满足如下3个触发条件之一：
CSS伪类触发。例如：:hover、:checked等
媒体查询触发。当改变窗口的尺寸时，就会触发媒体查询，然后执行过渡
JavaScript触发。用脚本更改元素样式
示例代码如下：
<div></div>div {
width: 100px;
height: 100px;
background-color: #f40;
transition: width 0.3s ease 0.1s;
}
div:hover {
width: 300px;
}
<div></div>div {
width: 100px;
height: 100px;
background-color: #f40;
/*
drift：动画名
2：循:2次
3s：动画持续时间
alternate:动画方向-反向
*/
animation: drift 3s 2 alternate;
}
@keyframes drift {
from {
transform: translateX(0) scale(1);
}
to {
transform: translateX(100px) scale(1.5);
}
}
过渡与动画的区别：
过渡只能指定元素的初始状态和结束状态，而动画可以通过关键帧控制变化过程中的更多状态
动画不需要触发条件，当HTML文档和相关样式嵌入载入完成后，就能立即执行
动画的子属性比过渡多，可以控制动画的循环次数、播放方向以及动画状态
32. 对媒体查询的理解
媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。
媒体查询由两部分组成：
- 一个可选的媒体类型（如 screen、print 等）
- 零个或多个媒体功能限定表达式（如 max-width: 500px、min-width: 400px、orientation: landscape 等）
操作符可用only、and、only 可作为媒体查询的开头，可以对不支持媒体查询，但支持媒体类型的设备隐藏样式；and操作符用来连接媒体类型和媒体特性的表达式，只有都为真的时候才执行里面的样式
这两部分最终都会被解析为 true 或 false 值，然后整个媒体查询值为 true，则和该媒体查询关联的样式就生效，否则就不生效。
示例如下：
@media screen and (min-width: 900px) and (max-width: 1024px) {}
@media screen and (min-width: 1024px), (max-width: 900px) {}
@media not screen and (min-width: 900px) and (max-width: 1024px) {}33. 什么是设备像素比
设备像素比就是物理像素与设备独立像素在水平或垂直方向的比例
物理像素即设备像素，是屏幕上的最小显示单元，在设备生产的时候就已经定好在屏幕上需要多少个这样的单元
设备独立像素是一种虚拟像素，是逻辑上衡量像素的单位，相当于CSS像素
以 iPhone5 为例，设备的宽高为350x568，可理解为设备独立像素在屏幕水平和垂直方向的数量，而物理像素比则是640x1136，那么它的设备像素比就是2，1个设备独立像素包含4个物理像素
34.什么是响应式设计？
响应式设计即可根据不同设备的可视区域改变网页布局，展现不同设计风格，力求在当前设备中达到完美的效果，从而减少用户浏览网页的额外操作（例如缩放、平移等）
例如同一个网页，在移动端移除不支持CSS伪类，少用消耗性能的特效，考虑横屏和竖屏之间的变化；在屏幕阅读器中确保CSS插入的内容仅仅是装饰，过渡、转换和动画也仅仅是装饰，不是关键功能
响应式设计是流式布局（页面中元素的宽度按照屏幕分辨率自动进行适配调整，也就是我们常说的适配）、自适应图像和媒体查询的结合体
35. 定位布局
定位布局适用于不同规则的排版，通常会将需要排列的元素定义为绝对定位或固定定位
定位元素可往上下左右四个方向随意偏移，由于偏移的距离没有限制，因此可以偏移到包含块的外面
如果多个元素偏移到同一位置，那么可以用z-index属性改变元素的层叠顺序
36. 请简单介绍一下弹性布局
移动设备（例如手机、平板）的屏幕尺寸和分辨率千差万别，在分辨率高的设备中，元素看着会太小；而在分辨率低的设备中，元素看着又太大。
弹性布局是一种相对布局，需要参照物，参照的是字体大小。使用rem单位实现弹性布局是现在比较流行的做法
单位是rem的值会参照根元素也就是html的字体大小进行计算，在不同款的移动端设备中，根元素的字体大小可能会略有不同，这就需要JavaScrit进行动态计算得出，计算方案例如淘宝的 flexible.js等
37. 圣杯布局和双飞翼布局的理解和区别
作用：
解决的问题是相同的，两边定宽、中间自适应的三栏布局，其中中间栏要放在文档流前面以优先渲染，一般用于PC端
圣杯布局和双飞翼布局的技术总结：
- 使用float
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding，一个用margin
圣杯布局：
优点：无需添加dom节点
缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉
圣杯布局：
<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>.box {
padding: 0 200px;
height: 300px;
}
.center {
width: 100%;
height: 300px;
background-color: orange;
float: left;
}
.left {
width: 200px;
height: 300px;
background-color: #f40;
float: left;
position: relative;
left: -200px;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: skyblue;
position: relative;
right: -200px;
margin-left: -200px;
float: left;
}
双飞翼布局：
<div class="box">
<div class="center">
<div class="box">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>.center {
width: 100%;
float: left;
}
.box {
height: 300px;
background-color: orange;
margin: 0 200px;
}
.left {
width: 200px;
height: 300px;
background-color: #f40;
float: left;
left: -200px;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: skyblue;
right: -200px;
margin-left: -200px;
float: left;
}
38. 弹性盒模型(flex)及其常用属性
flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局
flex：弹性盒模型
- display:flex; 开启弹性盒模型，子元素默认水平排列
- flex-direction:row|column; 设置弹性盒的方向
Row：默认值，子元素水平排列
Column：子元素垂直排列
- justify-content:; 设置子元素在主轴的对齐方式
Flex-start：弹性盒的开始
Flex-end：弹性盒的结束
Center：居中
Space-around：在子元素四周分配父元素剩余的距离，但是左右两侧是中间的二分之一
Space-between：子元素之间平均分配父元素剩余的距离，两侧没有
- align-items:; 设置子元素在侧轴的对齐方式
Flex-start：弹性盒的开始
Flex-end：弹性盒的结束
Center：居中
- flex-grow:; 设置子元素分配父元素剩余的距离
- algin-self:;定义flex子项单独在侧轴（纵轴）方向上的对齐方式
auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch：元素被拉伸以适应容器；如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center：元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start：素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐
initial：设置该属性为它的默认值
inherit：从父元素继承该属性
如果要设置伸缩容器中子元素的显示位置，可以用order属性来实现，它的值是一个数字，位置在前的先显示
可参考 flex布局教程
示例：实现3色子
.box{
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;/*两端对齐*/
}
.item{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.item:nth-child(1){
background-color: #f40;
}
.item:nth-child(2){
align-self: center;/*第二项居中对齐*/
background-color: #666;
}
.item:nth-child(3){
align-self: flex-end;/*第三项居中对齐*/
background-color: orange;
}<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
39. 如何让一个浮动中的元素水平居中？
浮动元素通常会在水平方向上往上或者往右移动，如果要居中，首先需要往反方向偏移一定距离。
元素的偏移可以用相对定位和偏移属性实现
如果容器和浮动元素的宽度都已定义，那么偏移距离可以计算得到，反之需要用百分数
<div class="float">
<p></p>
</div>.float {
float: left;
position: relative;
left: 50%;
}将偏移距离设为50%，元素的左边缘被移动到了容器的中间位置，要得到元素的居中效果可以借用子元素或使用CSS3新增的位移功能实现
p {
position: relative;
left: -50%;
}使用CSS3新增的位移功能就不需要添加子元素了，而是直接让浮动元素反向位移50%就能实现居中，水平位移中的百分数是参照自身的宽度，因此50%即宽度的一半
<div class="float"></div>.float {
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}40. 谈谈你对标准盒子模型的理解
浏览器的渲染引擎在对网页文档进行布局时，会按照 “CSS 基础盒模型” （CSS Basic Box Model）标准，将文档中的所有元素都表示为一个个矩形的盒子，再用 CSS 去决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、背景、边框等）
1）组成部分 Content+padding+border+margin
2）实际宽度 Width+padding+border+margin
3）content 内容区域 块级元素默认宽度为 100% 行内元素默认宽度由内容撑开 块级元素可以设置宽高 行内元素设置宽高不生效
4）padding 内边距 设置内容距边框的距离
5）Margin 外边距 设置元素之间的距离
6）border 边框
盒模型宽度计算：offsetWidth=（width+padding+border），无外边距
41. hsla与rgba的区别：
RGBA:
rgba分别对应红绿蓝以及透明度，其中rgb区间为0（纯黑）至255（纯色）透明度a区间为0（完全透明）~1不透明
HSLA:
HSLA(H,S,L,A) 的参数说明：
- H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
- S：Saturation(饱和度)。取值为：0.0% - 100.0%
- L：Lightness(亮度)。取值为：0.0% - 100.0%
- A：Alpha透明度。取值0~1之间。
默认情况下，背景的颜色会延伸至边框下层，在css3中，我们可以通过设置background-clip:padding-box来改变背景的默认行为，达到我们想要的效果
42. base64的使用：
用于减少HTTP请求
适用于小图片
base64的体积约为原图的4/3
43. 如何实现流式布局和响应式布局
px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem是一个长度单位，相对于根元素，常用于响应式布局
流式布局：
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）
缺点：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调
响应式布局：
响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局，可以监测屏幕方向(移动设备)，设备类型等等，核心在于感知。在不同屏幕下可以显示不同版式。响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果
44. flex如何实现一个直径100px的圆放在屏幕中间
<div class="box">
<div class="box1"></div>
</div>.box {
width: 200px;
height: 200px;
border: 4px solid skyblue;
box-sizing: border-box;
display: flex;
/* 设置子元素相对于父元素主轴居中 */
justify-content: center;
/* 设置子元素相对于父元素侧轴居中 */
align-items: center;
}
.box1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f40;
}
45. 如何判断数据类型，各有什么区别
数据类型分为基本数据类型和引用类型
其中基本数据类型有：number、string、null、undefined、boolean
引用类型：array、object、function等
对于基本数据类型用 typeof 判断即可
因为所有对象的原型链最终指向Object，Object是所有对象的祖宗，typeoof判断引用类型返回的都是object，因此对于引用类型的判断使用 instanceof 来判断
Object.prototype.toString.call() 对象的一个原生原型扩展函数，能够精确的区分数据类型，是目前判断一个对象类型的最好的办法
注意：
null返回的是“object”，因为null被认为是一个空的对象引用
对于未声明变量Null，typeof会返回“undefined”
46. margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠(取两者中最大值)
空白内容也会重叠(被忽略)，例如：<p></p>
实例：
p{
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>答案：15px
47. margin负值问题
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
body{
margin: 20px;
}
.float-left{
float: left;
}
.clearfix:after{
content: "";
display: table;
clear: both;
}
.container{
border: 1px solid #ccc;
padding: 10px;
}
.container .border-blue{
border: 1px solid blue;
}
.container .border-red{
border: 1px solid red;
}<p>用于测试 margin to bottom 的负值情况</p>
<div class="container">
<div class="item border-blue">
this is item 1
</div>
<div class="ietm border-red">
this is item 2
</div>
</div>
<p>用于测试 margin left right 的负值情况</p>
<div class="container clearfix">
<div class="item border-blue float-left">
this is item 3
</div>
<div class="item border-red float-left">
this is item 4
</div>
</div>修改如下：
.container .border-blue{
border: 1px solid blue;
margin-top: -20px;
margin-left: -20px;
}
.container .border-red{
border: 1px solid red;
margin-bottom: -20px;
margin-right: -20px;
}
48. window.onload和DOMContentLoaded的区别
window.addEventListener('load', function() {
//页面的全部资源加载完才执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function() {
//DOM 渲染完即可执行，此时图片、视频等可能还未加载完
})49. 什么是 CSS 预处理器
CSS预处理器能为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用、代码冗余、可维护性差的问题
常见的有：Less、Sass、Stylus
优点：
- 用变量存储多次引用的信息（例如字体），只需修改一个地方，即可让所有引用之处都随之修改
- 新语法中的混合能够重用一段样式代码，可用混用将自动截取的或列表中的小箭头样式组织在一起，需要这段代码的选择器只需简单引入即可
- 内置丰富的函数，可处理颜色、字符串等，也可以自定义函数
- 可像JavaScript那样通过属性运算（加减乘除），条件判断和循环，几行代码就可描述一大段CSS样式
- 选择器可以嵌套选择器，这样使选择器之间的关系更加明显，增强了文件的可读性
- 导入规则可让各部分代码保持独立，便于模块化管理，导入的文件最终会被生成对应的css文件
缺点：
通过编译生成的CSS文件，降低了对CSS文件的控制力
调试难度增加
带来了一定的学习成本。因为需要学习里面的一些语法规则
50. Bootstrap 有哪些优势
Bootstrap 从诞生到现在，一直在更新，从响应式布局到移动设备优先，总是走在时代的最前沿
Bootstrap 包含了常用的页面级组件和交互效果，美观精致、文档齐全，上手快、兼容性强
Bootstrap 中的命名都由明确语义的单词组成，用途一目了然
Bootstrap 拥有极佳的定制性，它的样式是用Less编写的，动态交互都被封装成了插件，因此可以有选择性的下载自己需要的部分
51. 实现两栏（三栏布局的方法）
表格布局
float + margin 布局
inline-block 布局（需要注意间隙问题）
flexbox布局
52. 如何进行移动端的适配
1.设置 head 里的 viewport
2.通过 rem/viewport/media query 方式去
3.在设计上可通过隐藏、折行以及自适应的方式去设计
53. 标准盒模型和怪异盒模型的区别有哪些？
两者的区别主要体现在元素尺寸的表示上。
盒模型的指定：
在CSS3中，我们可以通过设置 box-sizing 的值来决定具体使用何种盒模型：
- content-box 标准盒模型
- border-box 怪异盒模型
标准盒模型：
box-sizing: content-box; (默认值)
在标准盒模型下，元素的宽（width）和高（height）值即为盒模型中内容（content）的实际宽高值
因此，计算一个元素宽度的公式如下(不考虑margin, margin是外边距, 如果是计算占用页面的空间, 就要带上margin)：
盒子宽度 =
border-left+padding-left+width+padding-right+border-right占据页面宽度 =
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
怪异盒模型：
box-sizing: border-box; (目前主流常用值)
在怪异盒模型下，元素的 width 和 height 值却不是 content 的实际宽高，而是去除 margin 后剩下的元素占用区域的宽高，即：
因此，计算一个元素占用了页面总宽度的公式如下：
盒子宽度 =
width盒子占据页面宽度 =
margin-left+width+margin-right
54. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？
方式 | 说明 |
opacity: 0 | 通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互 |
visibility: hidden | 与透明度为0的方案非常类似，会占据空间，但不可以进行交互 |
overflow: hidden | 只会隐藏元素溢出的部分；占据空间且不可交互 |
display: none | 可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局 |
z-index: -9999 | 通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果 |
transform: scale(0,0) | 通过将元素进行缩放，缩小为0；依然会占据空间，但不可交互 |
left: -9999px | 通过将元素定位到屏幕外面，达到看起来看不到的效果 |
55. px、em、rem之间有什么区别？
单位名称 | 说明 |
px | 绝对单位。代表像素数量，页面会按照给出的精确像素进行展示 |
em | 相对单位。默认的基准点为父元素的字体大小，而如果自身定义了字体大小则按自身的来算。所以即使在同一个页面内，1em可能不是一个固定的值。 |
rem | 相对单位。可以理解为 |
正常开发 px 使用率较高, 如果要做 rem 适配, 会用到 rem 单位!
rem布局的原理:
- 使用 rem 为单位
- 动态的设置 html font-size (媒体查询, js设置, 插件设置都可以)
