前端面试硬核之复述性问题集合(CSS)_css 临近双边,阿里P8大牛从零开始教前端开源框架

14 阅读2分钟

或者border-image,transformscale()方式


### 3.link标签和import标签的区别


link属于html标签,import则是由css提供  
 页面被加载时,link会同时被加载,而import引用的css会等到页面加载结束时加载  
 link是html标签,因此没有兼容性,而import在ie5以上才能识别  
 link方式样式的权重高于import


### 4.js动画和css3动画的差异


功能涵盖面:js比css大  
 css比js更加简单,性能跳优方向固定  
 对帧速表现不好的低版本浏览器,css3可以做到自然降级  
 css动画有天然事件支持  
 css3有兼容性问题


### 5.说一下块级元素和行级元素


块元素:独占一行,并且有自动填满父元素,可以设置marginpadding以及width height。  
 行元素:不会独占一行,widthheight失效,并且在垂直方向的paddingmargin会失效。


### 6.双边距重叠问题


多个相邻普通流的块元素锤石方向margin会重叠  
 折叠结果:  
 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值  
 两个相邻的外边距都是负数时,折叠结果是它们两者之间绝对值较大的值  
 有正有负时,折叠结果是两者的相加的和


### 7.浮动清除


方法1:使用带clear属性的空元素,或者邻接元素处理  
 在浮动元素后使用一个空元素如`<div class="clear"></div>`,并设置其css,`.clear{clear:both;}`即可清理浮动。  
 方法2:使用css的overflow属性  
 给浮动元素的容器添加`overflow:hidden;`或者`overflow:auto;`可以清除浮动.  
 方法3:伪元素处理  
 给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:afer伪元素实现元素末尾添加一个看不见的块元素清理浮动。


### 8.css的选择器


id选择器,class选择器,标签选择器,伪元素选择器,伪类选择器


![在这里插入图片描述](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0a4d52bb7b4549bdaabbf07835f0ceb4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=7CXafNv8RGPfsrD5J6lggi29BXg%3D)  
 带有!important标记的样式属性优先级最高  
 ![在这里插入图片描述](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e1da396d4fe94f65b47020cb51e058df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=G3aY9LV5ruIXe%2Be7kjLGDClr7S0%3D)


### 9.如何让一个元素消失


三种方式:



display:none; visibility:hidden; opacity:0;


### 10.重绘和重排



**对象篇**

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/217fd7199da24d6b9bd0eb2f97e375e8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=qqXmvb2TeZ8b811IDt06Z4DVTgA%3D)

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b7ceca237a694490b7a82e1a679149ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=QHKV28YCngTeu9uNG02pBlSWz7U%3D)

**模块化编程-自研模块加载器**



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/25429fffe91545b2a1e7de910269aded~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=TaGsfcnPPU%2FSLX3Ap0zLNN2NKkE%3D)



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a3691b74c9a2464bb9653718d6ad7887~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772011861&x-signature=IqnwVOsVf%2BsymJ0OU4DRhEqhfwg%3D)
**开源分享:https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**