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以后,元素会具备以下特性:
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启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查询
- 对于多次重排的元素,比如动画,使用绝对定位使其脱硫文档流,不影响其他元素。
本文来自博客园,作者:只做你的向日葵,转载请注明原文链接:https://www.cnblogs.com/likme/p/15593327.html