css经典面试题(二)

文章目录

1、清除浮动

先来回答一个问题,为什么会需要清除浮动?

如果一个dom内的所有子dom都是float:left 或者float:right,那么所有的子dom都处于另外一个层级,父dom所在的层级将为空,所以如果不规定父dom的高度,那父dom的高度就是0

1.清除浮动最简单的方式就是规定父dom的高度 height:xxxpx;

2.给父级dom添加overflow:hidden 清除浮动方法 当overflow 属性不为 visible时,会形成一个BFC的独立渲染区域,这个区域将会视float为同一个独立层级进行渲染,所以float dom的高度,就是整个BFC渲染区域的高度

3.万能清除法 ::after 伪元素清浮动(现在主流方法,推荐使用)给父dom加一个clear类名。

css 复制代码
	.clear::after {
		content:"";
	    display:block;
	    height:0;
	    clear:both;
	    visibility:hidden;
	}

2、opacity: 0、visibility: hidden、display: none 的区别

display: none (让dom彻底不排布也不渲染,自然是不占空间,也不能点击)

visibility: hidden(让dom只排布,不渲染,所以占据空间,但不能点击)

opacity: 0(让dom既排布,又渲染出来,只不过颜色是透明的,看不见,但不代表没渲染出来,它是存在的,占据空间,可以点击)

3、css画一个三角形

css 复制代码
div{
	width: 0;
	height: 0;
	border: 10px solid red;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

4、常见的主流浏览器前缀

-moz-:firefox 火狐浏览器兼容性前缀

-o-:opera 浏览器兼容性前缀

-ms-:早期ie浏览器以及edge浏览器兼容性前缀

-webkit-:主流的google浏览器以及Safari,Opera的较新版本,几乎所有的iOS浏览器 的兼容性前缀

随着前端技术的发展,曾经的五大主流浏览器也会使用统一的内核,目前来看webkit最有希望。

5、重绘与重排的区别?

首先确立一点,渲染树是合成了html和css之后才渲染到页面上的,也就是说,至少会有一次排布和绘图的过程。css计算->排布->绘图,总是这样一个过程。

排布就是计算dom放置在页面的位置和大小,绘图就是将dom的每一个像素点展示出来。

1.如果用户的操作,或者前端程序的变化,导致页面发生了变化,就可能发生重绘和重排。

2.通俗意义上讲,如果一个dom的大小,位置发生变化,就会造成重排,如果一个dom只是颜色,背景发生变化,可能只会造成重绘。

3.重排必定会重绘,而重绘不一定会重排。

4.重绘与重排也是有范围的,页面的dom不总是处于同一层级,比如position:fixed/absolute,z-index,transform等动画,都会让部分dom在一个全新的层级中进行布局,层与层之间是相互独立的,层内的重绘与重排不会影响到层外,所以开发过程中,合理切割层级将会有效降低重绘与重排带来的性能消耗。

6、如何优化图片

css处理图片也有多种手段

1.将多个图标文件整合到一张图片中(雪碧图或者精灵图)在background中我们可以设置position的xy坐标,来展现不同的内容。

2.一般图片的size小于8k的情况下,直接转为base64使用。

3.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好

4.对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。

5.一些简单的装饰图片,或者是简单的动图,尽量使用css动画效果或者css来实现。

7、CSS3 中 transition 和 animation 的属性分别有哪些

transition 过渡动画:

transition-property:指定过渡的 CSS 属性

transition-duration:指定过渡所需的完成时间

transition-timing-function:指定过渡函数

transition-delay:指定过渡的延迟时间

animation 关键帧动画:

animation-name:指定要绑定到选择器的关键帧的名称

animation-duration:动画指定需要多少秒或毫秒完成

animation-timing-function:设置动画将如何完成一个周期

animation-delay:设置动画在启动前的延迟间隔

animation-iteration-count:定义动画的播放次数

animation-direction:指定是否应该轮流反向播放动画

animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式

animation-play-state:指定动画是否正在运行或已暂停

8、居中为什么要使用 transform(为什么不使用 marginLeft/Top)

先说一下transform和marginleft/top是如何居中的

marginleft/top如何居中

html 复制代码
.position-outter {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: plum;
}

.position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: pink;
}

transform如何居中

css 复制代码
.translate-position-outter { 
	position: relative; 
	width: 300px; 
	height: 300px; 
	background-color: plum; 
}

.translate-position-center {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: pink;
	transform: translate(-50%, -50%);
}

transform不会造成页面大面积的重绘与重排

transform 属于合成属性(composite property),对合成属性进行 transition/animation 动画将会创建一个合成层(composite layer),这使得被动画元素在一个独立的层中进行动画。只要该层的内容不发生改变,就没必要进行重绘(repaint),浏览器会通过重新复合(recomposite)来形成一个新的帧。

top/left属于布局属性,该属性的变化会导致重排(reflow/relayout),所谓重排即指对这些节点以及受这些节点影响的其它节点,进行CSS计算->重排->重绘过程,浏览器需要为整个层进行重绘造成了极大的性能开销。

9、 用于控制图像滚动的属性是什么?

background-attachment:该属性设置背景图像是随页面其余部分滚动还是固定滚动。

css 复制代码
.box {
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

10、伪类与伪元素

伪元素:能够在视觉上呈现出来,但在又无法在dom中找到的元素,常见一些页面icon或者tooltip是通过伪元素实现的,伪元素常用的有,xxx::after,xxx::before,xxx::first-line,xxx::first-letter

伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素,常见的包括,:hover,:nth-child(),:first-child,等

11、css样式权重(优先级)

!important > 内联样式 > id > class > tag

相关推荐
耶啵奶膘40 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro