面试 CSS 框架八股文十问十答第四期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）CSS3中的transform有哪些属性

CSS3中的transform属性用于对元素进行变换和转换。常见的transform属性值包括：

translate：平移元素，可以指定X轴和Y轴的偏移量。
rotate：旋转元素，可以指定旋转角度。
scale：缩放元素，可以指定X轴和Y轴的缩放比例。
skew：倾斜元素，可以指定X轴和Y轴的倾斜角度。
matrix：通过矩阵变换来对元素进行复合变换。

这些属性可以单独使用，也可以组合使用，通过空格分隔多个变换。

例如，下面的代码将对一个元素进行平移和旋转变换：

css 复制代码

.element {
  transform: translate(100px, 50px) rotate(45deg);
}

2）常见的CSS布局单位

常见的CSS布局单位包括：

px：像素，是最常用的单位，表示固定的长度或尺寸。
%：百分比，相对于父元素的尺寸进行计算。
em：相对于元素的字体大小，如果没有设置字体大小，则相对于父元素的字体大小进行计算。
rem：相对于根元素（html）的字体大小进行计算。
vw：相对于视口宽度的百分比，1vw 等于视口宽度的1%。
vh：相对于视口高度的百分比，1vh 等于视口高度的1%。
vmin：相对于视口宽度和高度中较小的那个的百分比。
vmax：相对于视口宽度和高度中较大的那个的百分比。

这些单位可以根据实际需求选择使用，例如使用px进行固定布局，使用%进行相对布局，使用em和rem进行响应式布局。

3）px、em、rem的区别及使用场景

px：像素，是固定的长度单位，不会根据其他因素进行缩放。适合用于固定布局和需要精确控制尺寸的情况。
em：相对于元素的字体大小，如果没有设置字体大小，则相对于父元素的字体大小进行计算。适合用于相对布局和字体大小的设置。
rem：相对于根元素（html）的字体大小进行计算。适合用于响应式布局和相对于根元素的尺寸计算。

使用场景举例：

如果想要设置一个固定的宽度，可以使用px，例如 width: 200px;。
如果想要设置一个相对于父元素字体大小的高度，可以使用em，例如 height: 2em;。
如果想要设置一个相对于根元素字体大小的字体大小，可以使用rem，例如 font-size: 1.2rem;。

4）两栏布局的实现

两栏布局是指页面分为左右两栏的布局。常见的实现方式包括：

使用浮动：将左栏设置为浮动，右栏设置为非浮动，并使用clearfix清除浮动。

css 复制代码

<div class="container">
  <div class="left">左栏内容</div>
  <div class="right">右栏内容</div>
</div>
.container {
  overflow: hidden;
}

.left {
  float: left;
  width: 200px;
}

.right {
  margin-left: 220px;
}

使用flexbox弹性布局：将父容器设置为display: flex;，左栏设置为固定宽度，右栏设置为flex: 1;。

css 复制代码

<div class="container">
  <div class="left">左栏内容</div>
  <div class="right">右栏内容</div>
</div>
.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  flex: 1;
}

使用grid网格布局：将父容器设置为display: grid;，设置两列的宽度。

css 复制代码

<div class="container">
  <div class="left">左栏内容</div>
  <div class="right">右栏内容</div>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

5）三栏布局的实现

三栏布局是指页面分为左、中、右三栏的布局。常见的实现方式包括：

使用浮动：将左栏和右栏设置为浮动，中栏设置为非浮动，并使用clearfix清除浮动。

左栏内容

右栏内容

中栏内容

.container { overflow: hidden; }
.left {
float: left;
width: 200px;
}

.right {
float: right;
width: 200px;
}

.center {
margin: 0 220px;
}
使用flexbox弹性布局：将父容器设置为display: flex;，左栏和右栏设置为固定宽度，中栏设置为flex: 1;。

css 复制代码

<div class="container">
  <div class="left">左栏内容</div>
  <div class="center">中栏内容</div>
  <div class="right">右栏内容</div>
</div>
.container {
  display: flex;
}

.left {
  width: 200px;
}

.center {
  flex: 1;
}

.right {
  width: 200px;
}

使用grid网格布局：将父容器设置为display: grid;，设置三列的宽度。

html 复制代码

<div class="container">
  <div class="left">左栏内容</div>
  <div class="center">中栏内容</div>
  <div class="

6）水平垂直居中的实现

实现水平垂直居中的方法有很多种，以下是几种常见的方法：

使用flexbox弹性布局：将父容器设置为display: flex;，并使用justify-content: center;和align-items: center;来实现水平和垂直居中。

内容

.container { display: flex; justify-content: center; align-items: center; }
.content {
/* 其他样式 */
}
使用绝对定位和负边距：将要居中的元素设置为绝对定位，并使用负边距和left: 50%;和top: 50%;来实现水平和垂直居中。

内容

.container { position: relative; }
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 其他样式 */
}
使用表格布局：将父容器设置为display: table;，并将要居中的元素包裹在一个display: table-cell;的子元素中。

内容

.container { display: table; width: 100%; height: 100%; }
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
/* 其他样式 */
}

7）如何根据设计稿进行移动端适配？

根据设计稿进行移动端适配的基本步骤如下：

获取设计稿的尺寸：根据设计稿的宽度和高度，确定移动端页面的基准尺寸。
设置viewport：在页面的<head>标签中添加以下<meta>标签，设置viewport的宽度和缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用相对单位：在编写CSS样式时，使用相对单位（如%、em、rem）来设置元素的尺寸和间距，以适应不同屏幕尺寸。
使用媒体查询：根据不同的屏幕尺寸，使用媒体查询来设置不同的布局和样式。

/* 小于等于320px的屏幕 /
@media (max-width: 320px) {
/ 样式 */
}

/* 大于320px且小于等于768px的屏幕 /
@media (min-width: 321px) and (max-width: 768px) {
/ 样式 */
}

/* 大于768px的屏幕 /
@media (min-width: 769px) {
/ 样式 */
}
使用响应式图片：根据不同的屏幕尺寸，使用不同大小的图片，以提高页面加载速度和用户体验。

8）对Flex布局的理解及其使用场景

Flex布局是CSS3中引入的一种弹性盒模型，用于对容器中的子元素进行布局和排列。Flex布局具有以下特点：

父容器的display属性设置为flex，子元素成为弹性盒子。
父容器可以通过flex-direction属性来设置子元素的排列方向（水平或垂直）。
子元素可以通过flex-grow、flex-shrink和flex-basis属性来设置它们在父容器中的占据空间和缩放比例。
可以使用justify-content和align-items属性来设置子元素在主轴和交叉轴上的对齐方式。

Flex布局适用于以下场景：

简单的水平或垂直居中布局。
等高布局，使多个子元素的高度保持一致。
自适应布局，使子元素根据可用空间自动调整大小。
通栏布局，使子元素自动换行并填充满父容器。
多列布局，使子元素按照指定的列数进行排列。

9）响应式设计的概念及基本原理

响应式设计是一种针对不同设备和屏幕尺寸进行优化的设计方法，旨在提供更好的用户体验。响应式设计的基本原理是根据不同的屏幕尺寸和设备特性，通过CSS媒体查询和流式布局来调整页面的布局和样式，以适应不同的设备。

响应式设计的概念是在同一个网站或应用中，使用一套代码和布局，在不同的设备上提供最佳的用户体验。通过使用媒体查询，可以根据设备的屏幕尺寸、分辨率和方向等特性，为不同的设备提供不同的样式和布局。

响应式设计的优点包括：

灵活性：可以适应各种不同的设备和屏幕尺寸，无需为每个设备编写单独的代码。
统一性：通过使用一套代码和布局，可以确保在不同设备上提供一致的用户体验。
可维护性：只需维护一套代码和布局，减少了开发和维护的工作量。
SEO友好：响应式设计可以提高网站的可访问性和搜索引擎优化，因为所有的内容都在同一个URL下。

10）为什么需要清除浮动？清除浮动的方式

浮动元素会脱离正常的文档流，可能导致父元素的高度塌陷，影响布局和其他元素的定位。因此，需要清除浮动，以确保布局的正确性和一致性。

清除浮动的方式有多种，以下是几种常见的方式：

使用空的clear元素：在浮动元素后面添加一个空的<div>元素，并将其设置为clear: both;。

vue 复制代码

<div class="container">
  <div class="float-left">浮动元素</div>
  <div class="clear"></div>
</div>
.clear {
  clear: both;
}

使用overflow属性：将浮动元素的父元素设置为overflow: hidden;，可以触发BFC（块级格式化上下文），从而清除浮动。

vue 复制代码

<div class="container">
  <div class="float-left">浮动元素</div>
</div>
.container {
  overflow: hidden;
}

使用伪元素清除浮动：在浮动元素的父元素上添加一个伪元素，并设置clear: both;。

vue 复制代码

<div class="container">
  <div class="float-left">浮动元素</div>
</div>
.container::after {
  content: "";
  display: table;
  clear: both;
}

使用clearfix类：在浮动元素的父元素上添加一个clearfix类，通过设置::after伪元素来清除浮动。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐