是神代利世

已于 2023-07-12 10:31:22 修改

阅读量46

点赞数

文章标签： javascript 前端

于 2023-07-09 19:07:14 首次发布

本文链接：https://blog.csdn.net/weixin_59785046/article/details/131625914

版权

前端面试总览

1.说说你对盒子模型的理解
2.css选择器有哪些？优先级？哪些属性可以继承？
3.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
4.怎么理解回流跟重绘？什么场景下会触发？
5.什么是响应式设计？响应式设计的基本原理是什么？如何做？
6.如果要做优化，CSS提高性能的方法有哪些？

1.说说你对盒子模型的理解

盒子模型是一种用于描述网页元素布局和定位的概念。在网页中，每个元素都被看作是一个矩形的盒子，它具有四个边界，包括外边距（margin）、边框（border）、填充（padding）和内容区域（content）。
两种模式的转换（通过box-sizing的方法）：
box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式。
当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；

2.css选择器有哪些？优先级？哪些属性可以继承？

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1:after	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

选择器优先级
内联样式:1000
id选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1
关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

quotes：设置嵌套引用的引号类型

光标属性

cursor：箭头可以变成需要的形状

3.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

使用flexbox布局：

将父元素的display属性设置为flex，并使用align-items和justify-content属性来使子元素在父元素中水平垂直居中。例如：

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

使用position和transform属性：

将父元素设置为相对定位（position: relative），将子元素设置为绝对定位（position: absolute），并使用top、bottom、left和right属性以50%的偏移量，再结合translate属性来使子元素在父元素中居中。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用table和table-cell布局：

将父元素的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align和text-align属性来使子元素垂直和水平居中。例如：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

使用grid布局：

使用CSS Grid布局，将父元素的display属性设置为grid，并使用place-items属性来使子元素在网格中居中。例如：

.parent {
  display: grid;
  place-items: center; /* 居中 */
}

使用绝对和负边距：

将父元素设置为相对定位（position: relative），子元素设置为绝对定位（position: absolute），并使用负边距将子元素的左上角定位于父元素的中心。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4.怎么理解回流跟重绘？什么场景下会触发？

重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个概念。
重绘指的是当元素样式发生改变，但并不影响其布局的时候，浏览器需要重新绘制元素。例如，改变元素的颜色或背景色。
回流是指当页面布局发生改变，浏览器需要重新计算元素的大小和位置，然后重新构建页面的过程。这个过程会涉及到整个页面布局树的重新计算和渲染。例如，添加、删除、修改元素的内容或样式，改变元素的尺寸或位置，以及浏览器窗口的大小发生变化等。
重绘和回流都是很消耗性能的操作，因为它们会引起浏览器的重新渲染。尤其是回流，它不仅会更新页面上的元

素，还会对其他相关元素进行影响和重新计算。频繁的重绘和回流会导致页面的卡顿和性能下降。

为了优化页面的渲染性能，可以采取以下措施：

减少回流和重绘次数：合并多次修改样式的操作，尽量在一个或者少数几个操作中一次性进行，避免频繁单独修改样式。
使用 CSS3 动画替代 JavaScript 操作：CSS3 动画通常会在 GPU 上执行，因此比使用 JavaScript 实现的动画性能更好。
使用离线文档片段进行操作：在对 DOM 进行频繁操作时，可以将 DOM 元素存储在离线文档片段（DocumentFragment）中，最后一次性添加到文档中，减少回流次数。
使用 CSS transform 和 opacity 进行动画：这是一种有效的优化方法，因为它们可以触发 GPU 加速，减少回流和重绘。
在以下情况下，会触发重绘和回流：

重绘与回流触发场景
修改元素样式：当改变元素的颜色、背景色、边框样式、字体样式等时，会触发重绘。
修改元素几何属性：当改变元素的尺寸（width、height）或位置（top、left）等属性时，会触发回流和重绘。
修改文档结构：当添加、删除、移动元素，修改文本内容，修改元素的 class 或 ID，改变 DOM 元素的层次结构等时，会触发回流和重绘。
操作布局相关属性：当修改浏览器窗口大小、滚动页面、获取布局信息（如 offsetTop、offsetWidth 等）时，会触发回流和重绘。

5.什么是响应式设计？响应式设计的基本原理是什么？如何做？

什么是响应式设计?
响应式设计是一种网页设计和开发的方法，旨在使页面在不同设备和屏幕尺寸下提供最佳的用户体验。响应式设计的目标是使网页自动适应不同的屏幕大小，以便在桌面电脑、平板电脑和手机等各种设备上都能正常显示和操作。

响应式设计的特点包括：
1.自适应布局：根据屏幕大小和设备特性，动态调整页面的布局和元素的排列方式。通过使用流式网格、弹性图像和媒体查询等技术来实现。
2.弹性图像和媒体：通过使用CSS中的百分比单位和max-width属性，使图像和媒体（如视频）能够自适应父容器的尺寸变化。
3.媒体查询：根据不同屏幕尺寸应用不同的CSS样式和布局规则，以实现适应性布局。媒体查询可以根据屏幕宽度、高度、设备类型、浏览器特性等条件来选择应用相应的CSS规则。

响应式设计的原理是什么？
响应式设计的基本原理是基于CSS3的媒体查询和弹性网格布局。媒体查询是一种CSS3功能，它允许网页样式根据屏幕尺寸和其他特征进行自适应调整。弹性网格布局则是一种可以自适应调整网页布局的方法，它使用相对单位来定义页面元素的尺寸，从而保证在不同设备上呈现相同的比例和布局。

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
		}
		
		.box {
			flex-basis: 25%;
			padding: 10px;
			box-sizing: border-box;
		}
		
		@media only screen and (max-width: 768px) {
			.box {
				flex-basis: 50%;
			}
		}
		
		@media only screen and (max-width: 480px) {
			.box {
				flex-basis: 100%;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box" style="background-color: red;">Box 1</div>
		<div class="box" style="background-color: green;">Box 2</div>
		<div class="box" style="background-color: blue;">Box 3</div>
		<div class="box" style="background-color: orange;">Box 4</div>
	</div>
</body>
</html>

6.如果要做优化，CSS提高性能的方法有哪些？

减少HTTP请求：

每个CSS文件都需要被下载和解析，这会增加网页的加载时间。因此，我们可以将多个CSS文件合并为一个，或者将它们分散在不同的页面上。这样可以减少HTTP请求的数量，从而提高网页加载速度。

使用资源预加载技术：

资源预加载技术可以将CSS、JavaScript和其他资源在页面加载之前预加载。这可以减少页面的负载，从而减少HTTP请求的数量，从而提高网页的加载速度。常用的资源预加载技术包括JavaScript、图片、字体等。

使用CSS媒体查询：

CSS媒体查询可以根据设备的屏幕尺寸、分辨率等条件来动态地改变样式。它可以将CSS代码分割为多个查询，并在不同的设备上应用不同的查询。这可以减少样式的重复计算，从而提高网页的渲染性能。

使用异步加载：

异步加载可以允许浏览器在需要时动态地加载资源。这样可以减少页面的负载，从而减少HTTP请求的数量，从而提高网页的加载速度。常见的异步加载技术包括图片、字体、JavaScript等。

使用CSS压缩：

CSS压缩可以减少CSS文件的大小，从而减少HTTP请求的数量。这可以提高网页的加载速度。常用的CSS压缩技术包括CSS Loader、Gzip等。

使用CSS缓存：

CSS缓存可以缓存已经下载的CSS文件，从而减少再次下载和解析的时间。浏览器会自动缓存已经下载的CSS文件，如果再次下载相同的文件，浏览器会从缓存中读取文件。