前端面试--CSS篇

介绍下BFC及其应用

BFC块级格式化上下文，是页面盒模型中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建BFC的方式有：

1. html根元素；
2. float浮动；
3. 绝对定位；
4. overflow不为visible；
5. display为表格布局或弹性布局；

BFC的主要作用：

• 清除浮动；
• 防止同一BFC容器中的相邻元素的外边距重叠问题。

怎样让一个div水平垂直居中？

介绍下重流和重绘，以及如何进行优化？

浏览器渲染机制

• 浏览器采用流式布局模型；
• 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并产生了渲染树；
• 通过渲染树我们就可以知道所有节点的样式，计算出他们在页面上的大小和位置，最后把节点绘制到页面上；
• 由于浏览器使用流式布局，对渲染树的计算通常只需要遍历一次就可完成。（但是table及其内部元素除外，他们可能需要多次计算，通常花费3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一）

重绘
由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，成为重绘。如：outline,visibility,color,background-color等，重绘的代价是比较高的，因为浏览器必须要验证DOM树上其他元素的可见性。
回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或者整个页面）的布局更新。一个元素的回流可能会导致其子元素及DOM中紧随其后的节点、祖先节点元素的随后的回流。大部分的回流将会导致页面的重新渲染。
回流必定导致重绘，重绘不一定会引发回流。
减少重绘和回流
1、CSS。

• 使用transform代替top；
• 使用visibilty代替display：none，前者引起重绘，后者引起回流；
• 避免使用table布局；
• 尽可能在DOM树的末端改变class；
• 避免设置多层内联样式，CSS选择符从右向左查找，避免节点层级过多；
• 将动画效果应用到position：absolute或fixed的元素上，避免影响其他元素的布局；
• 避免使用CSS表达式，可能会引发回流；

2、javascript。

• 避免频繁的样式操作，修改class最好；
• 避免频繁操作DOM，合并多次修改为一次；
• 避免频繁读取会引发回流/重绘的属性，将结果缓存；
• 对具有复杂动画的元素使用绝对定位，使其脱离文档流。

分别比较opacity：0，visibility：hidden，display：none的优劣和适用场景？

• display：none：不占用空间，不能点击，会引起回流，子元素不影响；
• visibility：hidden：占据空间，不能点击，引起重绘，子元素可设置visible进行显示；
• opacity：0:占据空间，可以点击，引起重绘，子元素不影响。

简述CSS盒模型

盒子模型margin、border、padding、content组成；
标准盒模型：box-sizing：content-box；
IE盒模型：box-sizing：border-box；

简述rem及其转换原理

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值大小。
默认根元素的font-size都是16px。如果想要设置12px的字体大小也就是12px/16px = 0.75rem。

• 由于px是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放；
• rem直接相对于根元素html，避开层级关系，移动端新型浏览器对其友好支持。

简述伪类和伪元素

伪类
伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户的行为变化而变化的。比如:hover。它只处于dom树无法描述的状态才能为元素添加样式，所以称为伪类。
伪元素
伪元素用于创建一些原本不存在文档树中的元素，并为其添加样式，比如::before。虽然用户可以看到这些内容，但是他其实不存在于文档树中。
区别
伪类的操作对象是文档树中已存在的元素，而为元素是创建一个文档树外的元素。
CSS规范中用双冒号::表示伪元素，用一个冒号表示伪类

行内元素的margin和padding

水平方向：水平方向上，都有效；
垂直方向：垂直方向上，都无效；（padding-top和padding-bottom会显示出效果，但是高度不会撑开，不会对周围元素有影响）

CSS中那些属性可以继承？

1、字体系列属性：

• font-family
• font-size
• font-weight
• font-style

2、文本系列属性

• text-indent
• text-align
• line-height
• word-spacing
• letter-spacing
• color

CSS3新增伪类有哪些？

1. elem:nth-child(n)：选中父元素下的第n个标签名为elem的元素；
2. elem:nth-last-child(n)：作用同上，从后查找；
3. elem:last-child()：最后一个元素；
4. elem:only-child()：如果elem是父元素下的唯一的子元素，则选中。

用CSS创建一个三角形

• 方案一：使用border来实现三角形：

    width: 0px;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid deeppink;
    border-left: 50px solid bisque;
    border-right: 50px solid chocolate;

实现三角形可以让其他border的颜色为transparent即可。

    width: 0px;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid chocolate;

• 方案二：使用linear-gradient来实现：

    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);

    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);

min-width/max-width和min-height/max-height属性间的覆盖规则？

未完待续。。。