大前端面试题集锦——CSS篇

CSS篇

1. px和em的区别？

• px是绝对单位,但是是相对于设备的屏幕分辨率而言的,在同一个设备上是绝对单位,在不同的设备上又是相对单位
• em是相对单位,具体大小相对于父元素计算

2.vw与vh代表什么?

• 两者是CSS3新增的度量单位,vw表示视口的宽度,vh表示视口的高度

3.什么是BFC,应用在哪些地方?

• BFC是一个独立的布局区域,其中的布局不会受到外界的影响;通过设置float,overflow及position属性可以触发
• 解决浮动元素令父元素高度塌陷问题;
• 解决非浮动元素被浮动元素遮挡问题;
• 解决垂直排列的两个元素外边距重合的问题

4.介绍BFC,IFC,GFC与FFC分别是什么?

• BFC指的是块级格式化上下文,会形成一块独立的布局区域,其内部布局与外部布局不会互相应影响
• IFC指行内格式化上下文,将一块区域以行内元素形式格式化
• GFC指网格布局格式化上下文,将一块区域以网格布局形式格式化
• FFC指弹性盒布局格式化上下文,将一块区域以弹性盒形式格式化

5.flex布局如何实现?

• 通过设置容器元素的display:flex来实现,容器会成为弹性盒布局容器,其中的元素会成为容器内的元素
• 对于容器
  • flex-warp设置容器内元素在主轴上的换行效果
  • flex-direction设置容器的主轴方向
  • justify-content设置容器内元素在主轴上的排列方式
  • align-items设置容器内元素在交叉轴上的排列方式
  • align-content在有多行元素的情况下,设置多行元素在交叉轴的排列方式
• 对于容器内元素
  • order设置元素的排列顺序,值越小越靠前
  • flex-grow设置元素的放大比例
  • flex-shrink设置元素的缩小比例
  • flex-basis设置在分配多余空间之前元素占据主轴的大小
  • flex是上述三个属性的缩写
  • align-self设置元素在交叉轴上的排列方式,会覆盖容器的排列方式

6.display:none,visibility:hidden,opacity:0三者的区别?

• 三者在肉眼上均不可见
• 结构上
  • display:none会将元素从渲染树中移除,目标元素无法被点击
  • visibility:hidden仍然占据页面空间,目标元素无法被点击
  • opacity:0仍然占据页面空间,目标元素可以被点击
• 继承性
  • display:none与opacity:0不具有继承性,更改子元素的对应属性设置无效
  • visibility:hidden具有继承性,可以更改子元素的属性使子元素显示
• 性能消耗
  • display:none会造成回流,影响了页面的整体布局,对性能消耗较大
  • visibility:hidden与opacity:0只会造成重绘,性能消耗较小

7.如何使用CSS或者JS实现多行文本溢出的省略效果?

• 使用CSS实现

// 单行文本
selector{
   
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
// 多行文本
selector{
   
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}

• 使用JS实现

// 获取元素
let ele=document.querySelector("tagName")
// 拆分字符串到数组
let words=str.spllit("")
// 定义插入到元素中的内容数组
let content=[]
// 遍历字符串数组
for(let i=0:i<words.length;i++){
   
	content.push(words[i])
	ele.innerText=content.join("")
	if(ele.clientHeight<ele.scrollHeight){
   
		content.pop() // 根据情况进行删除
		ele.innerText=content.join("")+"..."
		break
	}
}

8.什么是粘性布局?

• 粘性布局是CSS3新增的内容,在视口内,它不会受到定位属性top,left等的影响,但是当将要到达目标距离时,它又会受到定位属性的影响,在固定位置定位
• 设置粘性布局的元素仍然在文档流中
• 当到达设定好的临界位置时,会在固定位置定位
• 固定的偏移量是相对于离他最近的具有滚动框的祖先元素,如果没有,偏移量相对于视口设定

9.space-between与space-around的区别?

• space-between指的是两端对齐,最左侧与最右侧的元素紧贴容器
• space-around指的是元素之间的左右间隔被平均分配

10.CSS3中的transition与animation有什么区别?

• transition
  • transition-property设置要执行过渡的属性
  • transition-delay设置开始执行过渡的延迟
  • transition-duration设置执行过渡的持续时间
  • transition-timing-function设置执行过渡的函数
• animation
  • animation-name设置执行动画的名称
  • animation-delay设置执行动画的延迟
  • animation-duration设置执行动画的持续时间
  • animation-timing-function设置执行动画的函数
  • animation-direction设置动画执行的方向
  • animation-iteration-count设置动画执行的次数
  • animation-play-state设置动画是否暂停
  • animation-fill-mode设置当未开始播放动画时元素的样式

11.说明png8,png24与png32的区别?简单说明png的压缩原理?

• png8中的8代表8bit,即利用8bit来表示颜色的种类,可以表示2*8=256种颜色,一般适用于颜色简单的图像
• png24使用3个8bit代表颜色的种类,每个8bit分别表示RGB,可以表示256*256*256种颜色类型
• png32在png24的基础上,还有一个8bit用来表示透明度的颜色类型
• png的压缩分为预解析与压缩两个阶段,预解析阶段做准备工作方便后期的压缩,使用Deflate进行压缩,该算法结合LZ77算法与Huffman算法

12.如何使用CSS绘制一个三角形?

• 设置元素的高度与宽度为0
• 设置元素的所有边框为透明色,并指定边框的样式与粗细
• 设置元素某个方向的边框为可见颜色

13.如何实现一个自适应的正方形?

• 使用vw或者vh来设置元素的宽度与高度,这样在不同的设备可视范围内会呈现出不同大小的正方形
• 利用百分比%设置,使用width设置元素的宽度,使用padding来撑开高度,将元素的height设置为0,为元素添加背景颜色即可

14.如何清除浮动元素的影响?

• 使用clear属性清除(被覆盖元素)
• 与浮动元素的父元素同级的元素也设置为浮动(被覆盖元素)
• 为浮动元素的父元素添加高度
• 为浮动元素的父元素添加overflow属性
• 为浮动元素的父元素使用伪元素::after,并设置clear:both属性

15.简述两种盒模型的区别?

• 任何元素都遵循盒模型,它用来规定元素各个部分的占用空间
• W3C盒模型
  • 定义元素的width与height时,不会包含元素的边框与内边距
• IE盒模型
  • 定义元素的width与height时,会包含元素的边框与内边距

16.如何触发重排和重绘?

• 添加或者删除Dom(两者)
• 设置元素的display:none属性(两者)
• 设置元素的visibility:hidden属性(重绘)
• 移动或者为Dom节点添加动画(两者)
• 用户行为(两者)

17.重排与重绘有何区别?

• 重排
  • 渲染树需要重新分析,节点需要重新计算尺寸,表现为重新计算布局,重新排列元素
  • 重排消耗的性能较大
• 重绘
  • 节点的几何属性或者样式发生更改,屏幕中的部分内容发生改变
  • 重绘消耗的性能较小
• 重排一定会触发重绘,重绘不一定会重发重排

18.如何优化图片?

• 对于修饰图片,比如项目符号,可以使用CSS替代
• 小图使用base64格式
• 将多个图标文件整合到一张图片中
• 非必要时不必请求原图
• 选择合适的图片格式
  • 照片使用jpeg/jpg
  • 小图使用png
  • 矢量图使用svg
  • 尽量使用webp格式图片

19.渐进增强与优雅降级有什么区别?

• 渐进增强指的是先针对低版本浏览器实现基本的功能,然后对于高版本浏览器逐渐增加各种功能
• 渐进增强是从基础到完善的过程
• 优雅降级指的是先针对高版本浏览器实现完善的功能,然后针对低版本浏览器特殊处理
• 优雅降级是从完善到基础的过程

20.CSS3新增了哪些内容?

• 选择器(:not())
• 盒子模型属性(border-radius,border-image,box-shadow<