2021前端面试css（三）

overflow 原理

---

块格式化上下文是css可视化渲染的一部分，它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系，当元素设置了overflow 样式且值不为visible时，元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生坍塌，所以达到了清除浮动的效果。

画出三角形

---

div {
  width: 0px;
  height: 0px;
  border-top: 10px solid red;
  border-right: 10px solid transparent;
}

link标签和import的区别

---

link标签属于html标签，import是css提供的，页面被加载时，link会被同时加载，而import引用的css会等到页面加载结束后加载，link方式的样式权重高于import。

说一说BFC什么？

---

BFC块级格式化上下文，页面的隐含属性，全名：Block Formattin Context，用于清除浮动，防止margin重叠等。

当开启BFC以后，元素会具备以下特性：

1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

多行元素的文本省略号

---

display:  -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

visivility=hidden,opacity=0,display:none三者之间的区别

---

• opacity=0，该元素隐藏，不改变页面布局，元素绑定事件后也会被触发。
• visivility=hidden，该元素隐藏，不改变页面布局，元素绑定事件后不会被触发。
• display=none，元素隐藏，会改变页面布局。

inline-block、inline和block的区别

---

• block是块级元素，能设置宽高，margin、padding水平垂直方向都有效。
• inline 设置宽高无效，margin在竖直方向上无效，padding在4个方向上都有效。
• inline-block 能设置宽高，margin、padding4个方向上均有效。

了解重绘和重排吗，知道怎么去减少重绘和重排吗

---

DOM 的变化影响到了预算的几何属性，比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排；浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘。

引起重排重绘的原因：

• 添加或者删除DOM元素
• 元素尺寸位置改变
• 浏览器页面初始化
• 浏览器窗口大小发生改变

重排一定导致重绘，重绘不一定导致重排

减少重绘重排的方法：

• 不在布局信息改变时做DOM查询
• 对于多次重排的元素，比如动画，使用绝对定位使其脱硫文档流，不影响其他元素。