【面试常考】CSS3常考面试题

CSS3常考面试题：

• position

  position的常见四个属性值：static、relative、fixed、absolute。一般要配合left、right、top、bottom属性使用。

  （1）static：默认位置。设置为static的元素，它始终会处于页面流给予的位置，会忽略任何top/left/bottom/right的值。

  （2）relative：相对定位。相对定位是相对于元素默认位置的定位，它偏移的top、bottom、left、right的值都以它原来的位置为基准偏移，而不管其他元素。注意：relative移动后的元素在原来的位置仍占据空间，即未脱离文档流。

  （3）absolute：绝对定位。设置为absolute的元素，如果它的父元素设置了position为非static的属性，那么它就会依据父容器进行偏移定位。如果其父容器没有设置position属性，那么它就以body为基准进行偏移定位。注意：设置为absolute的元素，已脱离文档流，在标准流中不占据位置。

  （4）fixed：固定定位。设置为fixed的元素，可定位于相对浏览器窗口的指定位置。不论窗口滚动与否，元素都会在那个位置。它始终是以body为基准进行定位。注意：设置为fixed的元素，已脱离文档流，在标准流中不占据位置。

• display

  display属性的值有：

  （1）inline：默认值，显示为行内元素

  （2）block：块级元素

  （3）inline-block：既有行内元素的特点，又有块级元素的特点

  （4）none：不显示

  （5）table：以表格形式显示

  （6）list-item：以项目列表形式显示

• BFC

（1）定义：
BFC(Block Formatting Context)，即块级格式化上下文。它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。

（2）BFC布局规则：

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素布局不会影响到外面的元素，反之也如此。
• BFC的区域不会与浮动盒子重叠（清除浮动原理）。
• BFC内部元素在垂直方向上的margin会发生重叠，垂直方向上的距离由margin值决定，取最大值。
• 计算BFC的高度时，浮动元素也参与计算。

（3）哪些元素会生成BFC？

• 根元素
• float属性的值不为none的元素
• display属性的值为inline-block、flex、inline-flex、table-cell等的元素
• position属性的值为absolute或fixed的元素
• overflow属性的值不为visible，为auto或hidden的元素

4. 浮动与清除浮动

5. 垂直、水平、垂直水平居中元素

6. margin重合问题及解决方法

7. CSS常用选择器以及优先级

8. 伪元素与伪类

9. 盒模型

10. CSS3 动画

11. 2D、3D转换

12. 弹性盒布局

13. 重绘与重排(回流)

（1）重绘（repaint）

• 是什么？

  当元素的外观被改变时，会引起重绘。浏览器会应用新的样式重绘元素，而元素的位置、几何结构不发生变化。

• 常见的重绘场景

  color、background-color、border-color、visibility、text-decoration、border-radius等

（2）重排（reflow）

• 是什么？

  重排就是浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的过程。

• 常见的重排场景

  改变元素的宽、高，改变元素的位置，改变文字大小、元素内容的改变、激活伪类等。如：width、height、padding、margin、position、display、float等

14. overflow
15. CSS3新特性
16. CSS常见的可继承的样式
17. last-child与nth-of-child的区别？
18. css引入的方式有哪些？优先级？区别？
19. css隐藏元素的方式有哪些？区别是什么？
20. css sprites
21. 如何用CSS进行性能优化？
22. a标签的伪类:hover、:active、:visited、:link
23. display:none和visibility:hiddle的区别是什么？

详细内容待补充，敬请期待~