html+css3面试题（4）

一、哪些操作会引起页面回流（Reflow）

回流（Reflow）与重绘（Repaint）
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。

由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的话，回流比重绘做的事情更多，带来的开销也更大。但这两个说到底都是吃性能的，所以都不是什么善茬。我们在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。

要避免回流与重绘的发生，最直接的做法是避免掉可能会引发回流与重绘的 DOM 操作
引起页面回流：

• 改变 DOM 元素的几何属性
  常见的几何属性有 width、height、padding、margin、left、top、border 等等。
• 当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，你就要注意了！

因此浏览器为了获取需要通过即时计算得到这些值，也会进行回流。

除此之外，当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。

---

二.前端需要注意哪些SEO

一、什么是SEO？
它是由英文Search Engine Optimization缩写而来，中文意思是“搜索引擎的优化”。
SEO具体是指通过网站结构调整、网站内容建设、网站代码优化、以及站外优化（网站站外推广、网站品牌建设等），使网站满足搜索引擎的收录排名需求，提高网站在搜索引擎中关键字的排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。
二、需要注意的

• 合理的title，description，keyswords 搜索引擎对这三项的权重逐个减小，title 值强调重点即可，重要的关键
  词出现不要超过两次，而且要靠前。

• 不同页面的tilte要有所不同；description把页面的内容高度概括，长度合适，不可过分堆叠关键词，不同页面
  description有所不同。keyswords列举出重要的关键词即可。

• 语义化的HTML代码，符合W3C 规范：语义化代码有利于搜索引擎理解网页。

• 重要的内容HTML代码放在前面：搜索引擎抓取HTML 的顺序是从上到下，有的搜索引擎对抓取长度有限制，保
  证重要内容一定会被抓取。

• 重要的内容不要用js输出，爬虫不会执行js获取内容。

• 尽量少用iframe ，搜索引擎不会抓取iframe中的内容。

• 非装饰的图片必须加alt 。

• 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

---

三、Canvas和SVG有什么区别？

svg是什么？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。
SVG 用来定义用于网络的基于矢量的图形。
SVG 使用 XML 格式定义图形。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟的标准。
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas和svg的区别比较：
1、时间

• canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。
• svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

2.功能

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

3.技术应用：

• canvas不依赖分辨率。
• canvas支持事件处理器。
• canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。
• canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
• canvas不适合游戏应用。

–

• svg依赖分辨率。
• svg不支持事件处理器。
• svg弱的文本渲染能力。
• svg能够以 .png 或 .jpg 格式保存结果图像。
  svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

---

四、HTML全局属性(global attribute)有哪些

全局属性兼容性特别不好，几乎各个浏览器很少支持
accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素

class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素

contextmenu: 自定义鼠标右键弹出菜单内容

data-*: 为元素增加自定义属性

dir: 设置元素文本方向

draggable: 设置元素是否可拖拽

dropzone: 设置元素拖放类型： copy, move, link

hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id: 元素id，文档内唯一

lang: 元素内容的语言

spellcheck: 是否启动拼写和语法检查

style: 行内css样式

tabindex: 设置元素可以获得焦点，通过tab可以导航

title: 元素相关的建议信息

translate: 元素和子孙节点内容是否需要本地化

---

五、iframe有哪些缺点？

iframe是什么
iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。

iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

---

六、网页验证码是干嘛的？是为了解决什么安全问题？

网页验证码介绍：”验证码”的英文表示为CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart），翻译过来就是”全自动区分计算机和人类的图灵测试”，顾名思义，它是用来区分计算机和人类的。

验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。攻击者编写的robot程序，很难识别验证码字符，顺利的完成自动注册，登录；而用户可以识别填写，所以这就实现了阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰强度了。就实际的效果来说，验证码只是增加攻击者的难度，而不可能完全的防止。

---

七、.请解释一下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-direction定义主轴以及主轴方向，row（横向自左向右）、row-reverse（横向自右向左）、column（纵向自上向下）、column-reverse（纵向自下向上）。交叉轴始终与主轴成相对状态。

最常见的主轴与交叉轴的切换应用就是导航栏在屏幕足够宽的时候呈横排展示，当浏览器窗口缩小到一定程度时，导航栏呈纵向排列展示。
可动态增加标签导航栏
经典：
使用flex实现圣杯布局

---

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

1.采用的是均分原理
盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部
2.代码的实现

• 第一步 保证元素是块级元素
• 第二步 设置元素的边框
• 第三步 不需要显示的边框使用透明色

示例代码 ：

.box{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid blue;
border-left:50px solid rgba(0,0,0,0);
}

---

九、为什么要初始化CSS样式

1、因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

---

十、display:none与visibility：hidden的区别？

display:none 隐藏的元素不占据物理空间,display:none不能被子元素继承
visibility:hidden隐藏的元素占据物理空间。visibility可以被子元素继承
dipslay:none,visibility:hidden都会被构建DOM树

浏览器的渲染过程分为以下几步：

1.解析HTML，构建DOM树

2.解析CSS样式表，构建CSSOM(CSS Object Model)

3.将DOM和CSSOM进行合并生成Render Tree(渲染树)

4.根据Render Tree计算布局

5.依据Render Tree进行渲染

-------
1.display:none的元素会被构建为DOM树，因为解析HTML构建DOM树在前面；而display:none样式的加载在后面一步

2.dispaly:none的元素不会被加入到Render Tree 而visibility:hidden的元素会被加入到Render Tree；

而这也正是为什么visibility会占据空间而display:none不占据空间的原因，没有加入到Render树，那么在计算布局的时候就不会计算display:none元素。但是会计算visibility:hidden的元素。

---

十一.position跟display、overflow、float这些特性相互叠加后会怎么样？

1、'display'、'position' 和 'float' 的相互关系；
2、position跟display、overflow、float下的margin collapse。
这是寒冬大神提出的一个题目：
参考

---

十二、上下margin重合的问题

1、两个普通元素上下的margin会合并为一个margin，哪个大选哪个！

两个浮动元素不会出现margin传递的问题，依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值。

2、两个元素如果是包含关系，父元素和子元素上下margin值也会合并

参考

---

十三、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的基本方法：
方法
1：脚底插入clear:both;冗余元素，不符合语义化。
2.采用伪元素，这里我们使用:after。

---