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

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

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

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

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

1）CSS3中的transform有哪些属性

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

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

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

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

.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清除浮动。

  
左栏内容
  
右栏内容

.container {
  overflow: hidden;
}

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

.right {
  margin-left: 220px;
}

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

  
左栏内容
  
右栏内容

.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  flex: 1;
}

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

  
左栏内容
  
右栏内容

.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;。

  
左栏内容
  
中栏内容
  
右栏内容

.container {
  display: flex;
}

.left {
  width: 200px;
}

.center {
  flex: 1;
}

.right {
  width: 200px;
}

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

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

  
内容

.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）如何根据设计稿进行移动端适配？

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

1. 获取设计稿的尺寸：根据设计稿的宽度和高度，确定移动端页面的基准尺寸。
2. 设置viewport：在页面的标签中添加以下标签，设置viewport的宽度和缩放比例。

1. 使用相对单位：在编写CSS样式时，使用相对单位（如%、em、rem）来设置元素的尺寸和间距，以适应不同屏幕尺寸。
2. 使用媒体查询：根据不同的屏幕尺寸，使用媒体查询来设置不同的布局和样式。

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

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

/* 大于768px的屏幕 */
@media (min-width: 769px) {
  /* 样式 */
}

1. 使用响应式图片：根据不同的屏幕尺寸，使用不同大小的图片，以提高页面加载速度和用户体验。

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元素：在浮动元素后面添加一个空的
  元素，并将其设置为clear: both;。

  
浮动元素
  


.clear {
  clear: both;
}

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

  
浮动元素

.container {
  overflow: hidden;
}

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

  
浮动元素

.container::after {
  content: "";
  display: table;
  clear: both;
}

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

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

已 300 + Star！

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