前端面试题之第二弹

一、position有几种取值，分别是什么意思？

position是css中非常重要并且常用的一个属性
通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

—position的定位方式共有四个
—常用的：static、relative、absolute、fixed
—不常用的：inherit、initial、unset、sticky

static

所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。

relative

俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会"占用"一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。

relative的特点

• 仍在文档流之中，并按照文档流中的顺序进行排列。
• 参照物为元素本身的位置。

设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。

absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position：absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终以 html 元素进行位置偏移。

absolute的特点

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为第一个定位祖先或根元素(元素)

fixed

俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：

• 会改变行内元素的呈现模式，使display值变更为block。
• 会让元素脱离普通流，不占据空间。
• 默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

fixed的特点

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为视窗

二、浏览器中的回流和重绘是什么，分别在什么情况下触发？

在讨论回流与重绘之前，我们要知道：

1. 浏览器使用流式布局模型(Flow Based Layout)。
2. 浏览器会把HTML解析成DOM，把cssom，DOM和cssom合并就产生了RenderTree。
3. 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可以需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

一句话：回流必将引起重绘，重绘不一样会引起回流

回流(Reflow)
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程为回流。
会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化(文字数量或图片大小等等)
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活css伪类(例如：:hover)
  -查询某些属性或调用某些方法

重绘 (Repaint)
当页面中元素样式的改变并不影响它在文档流中的位置时(例如：color、background-color、visibility等)，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

三、px、em、rem的区别

px
—px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的。

em
—em是相对长度单位。相对于当前对象内文本的字体尺寸(参考物是父元素的font-size)
—如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：

1. em的值并不是固定的
2. em会继承父级元素的字体大小

rem
—rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小(font-size)来计算的长度单位
优点： 只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：
—除了IE8及更早版本外，所有浏览器均已支持rem
—如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

em与rem的区别：
—rem是相对于根元素(html)的字体大小，而em是相对于其父元素的字体大小
两者使用规则：
—如果这个属性根据它的font-size进行测量，则使用em 其他的一切事物属性均使用rem

未完待续…