# HTML_CSS

**Repository Path**: guanghua_pan/html_css

## Basic Information

- **Project Name**: HTML_CSS
- **Description**: 本项目内置了基础的html、css常见面试题场景
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-04
- **Last Updated**: 2023-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML_CSS

#### 介绍
本项目内置了基础的html、css常见面试题场景

# HTML + CSS 专题

## 1.什么是 BFC ？如何触发？有何特点？如何解决 margin "塌陷"?

BFC 指的是块级格式上下文（Block Formatting Context），是一个页面布局的一部分。BFC 决定了元素如何在页面中布局及相互作用。

BFC 可以通过以下方式触发：

1. 根元素（html）
2. 浮动元素（float 不为 none）
3. 绝对定位元素（position 为 absolute 或 fixed）
4. 行内块元素（display 为 inline-block）
5. 表格单元格（display 为 table-cell）
6. 表格标题（display 为 table-caption）
7. overflow 的值不为 visible 的元素

BFC 的特点包括：

1. 内部的块级盒子在垂直方向上一个接一个地放置，每个盒子的左边与包含块的左边对齐，垂直方向上的间距由 margin 决定。
2. 在同一个 BFC 内，两个相邻的块级盒子的上下外边距会发生重叠（margin “塌陷”）。
3. BFC 区域不会与浮动元素重叠。
4. BFC 是页面上一个独立的布局单位，其内部的元素不会影响到外部元素。

要解决 margin “塌陷” 问题，可以通过触发元素的 BFC 来实现。例如，可以给父元素设置 overflow: hidden 或者 float: left/right 来触发 BFC，这样就可以避免上下外边距重叠的问题。



## 2.CSS 如何出来溢出？说一下 overflow 不同值的区别？

在CSS中，当元素的内容超过其指定的尺寸时就会出现溢出。针对这种情况，在CSS中提供了`overflow`属性来控制并处理溢出。

`overflow`属性有以下几个值：

1. `visible`：默认值，不剪裁溢出的内容，可能会超出父元素显示。
2. `hidden`：剪裁溢出的内容，超出的部分将被隐藏。
3. `scroll`：显示滚动条，即使内容没有超出。
4. `auto`：自动显示滚动条，仅当内容溢出时才显示。
5. `inherit`：继承父元素的`overflow`属性的值。

除了这些值之外，还可以分别设置`overflow-x`和`overflow-y`属性来控制溢出在水平方向和垂直方向的表现。这两个属性可以使用上述相同的值，也可以单独使用`visible`、`hidden`和`scroll`。

总结一下各个值的区别：

- `visible`：内容溢出时不做任何处理，会超出父元素显示。
- `hidden`：剪裁溢出的内容，超出的部分会被隐藏。
- `scroll`：显示滚动条，无论内容是否溢出。
- `auto`：自动显示滚动条，仅当内容溢出时显示。
- `inherit`：继承父元素的`overflow`属性的值。

使用这些属性，可以根据具体需求来控制溢出内容的显示效果。



## 3.三栏布局有什么实现方式？

三栏布局的实现方式有以下几种：

1. 使用浮动：将左栏和右栏设置为浮动，将中间栏设置为自适应宽度，通过控制浮动方向和宽度比例来实现三栏布局。但是在使用浮动布局时需要注意清除浮动的问题，以避免影响其他元素的布局。
2. 使用绝对定位：将左栏和右栏设置为绝对定位，通过设置左栏和右栏的左右位置和宽度来实现三栏布局。这种方式相对较为简单，但是需要注意父元素的定位方式必须是相对定位或绝对定位。
3. 使用flexbox弹性布局：通过设置父容器的display属性为flex，再设置子元素的flex属性来实现三栏布局。这种方式比较灵活且兼容性较好，但是需要注意一些浏览器的兼容性问题。
4. 使用grid网格布局：通过设置父容器的display属性为grid，再设置子元素的grid-area属性来实现三栏布局。这种方式是最现代化的布局方式，但是需要注意一些浏览器的兼容性问题。

每种实现方式都有其各自的特点和适用场景，根据具体的需求和兼容性要求选择合适的方式来实现三栏布局。



## 4.css calc 属性作用是什么？主要用于解决什么问题？

CSS的`calc()`属性用于执行动态计算，它可以在CSS中使用数学表达式来设置元素的尺寸、位置和其他样式属性的值。`calc()`函数能够接受任意的数学表达式作为参数，并返回计算结果。

主要用途和解决的问题包括：

1. 动态尺寸调整：`calc()`可用于根据视口大小或其他元素的尺寸来计算元素的宽度、高度或其他尺寸属性。例如，可以使用`calc(50% - 20px)`来计算一个元素的宽度为其父容器宽度的50%，再减去20像素。
2. 响应式设计：通过结合`calc()`和媒体查询（media queries），可以实现响应式布局。例如，可以根据设备屏幕的宽度调整元素的尺寸或间距。
3. 自适应布局：`calc()`使得布局更加灵活，可以自动适应不同内容的长度或宽度。它可以用于计算列的宽度，以确保多个列总宽度等于容器的宽度。
4. 解决盒模型计算问题：当使用CSS的盒模型时，元素的实际尺寸可能与所设置的尺寸不一致，因为边框和内边距会影响实际的可用空间。`calc()`可以用于准确计算元素的尺寸，减去边框和内边距的影响。

总而言之，`calc()`属性为开发人员提供了一种在CSS中执行动态计算的方式，使得样式更加灵活和适应不同的布局需求。





## 5.有一个固定长宽 div ，怎么实现在屏幕上垂直水平居中

当需要将一个固定长宽的`div`在屏幕上垂直水平居中时，可以使用以下三种方案：

**方案一：使用 Flexbox**

```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  width: 300px;
  height: 200px;
}
```

这段CSS样式将`body`元素设置为 Flex 容器，并使用`justify-content: center; align-items: center;`将其内容水平和垂直居中。通过设置`height: 100vh;`使得`body`元素占满整个视口高度。最后，给`div`元素设置固定的宽度和高度。

**方案二：使用绝对定位和 transform**

```css
body {
  position: relative;
  height: 100vh;
}

div {
    width: 1000px;
    height: 500px;
    background: #b0b0b0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%); /*Chrome、Safari 和 Opera 浏览器的兼容前缀*/
    -moz-transform: translate(-50%,-50%); /*Firefox 浏览器的兼容前缀*/
    -ms-transform: translate(-50%,-50%); /*Internet Explorer 浏览器的兼容前缀*/
    -o-transform: translate(-50%,-50%); /*旧版 Opera 浏览器的兼容前缀*/
    transform: translate(-50%,-50%);
}
```

这段CSS样式将`body`元素设置为相对定位，通过设置`height: 100vh;`使得`body`元素占满整个视口高度。然后，将`div`元素设置为绝对定位，使用`top: 50%; left: 50%;`将其顶部边缘和左侧边缘分别定位到父容器的垂直和水平中心。最后，使用`transform: translate(-50%, -50%);`将`div`元素向左和向上平移自身宽度和高度的一半，从而实现垂直和水平居中。

**方案三：使用 Grid 布局**

```css
body {
  display: grid;
  /*place-items: center;*/
  height: 100vh;
}

div {
  width: 300px;
  height: 200px;
}
```

这段CSS样式将`body`元素设置为格子布局（Grid Layout），使用`place-items: center;`将其内容居中对齐。通过设置`height: 100vh;`使得`body`元素占满整个视口高度。然后，给`div`元素设置固定的宽度和高度。

以上是三种常用的方法将一个固定长宽的`div`在屏幕上垂直水平居中。每种方法都有其优缺点，可以根据具体的需求选择最合适的方案。





## 6.描述一下渐进增强（ progressive enhancement ）和优雅降级（ graceful degradation )

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是两种不同的前端开发理念，旨在提供更好的用户体验，并确保网站或应用程序能够在各种浏览器和设备上正常工作。

**渐进增强（Progressive Enhancement）**是一种设计和开发方法，它从基本功能和内容开始构建网页或应用程序，然后逐步添加更高级的功能和样式，以满足现代浏览器和设备的能力。核心思想是以最简单的形式构建可访问性和可用性良好的基础版本，然后通过逐步增强来提升用户体验。这意味着无论用户使用什么设备或浏览器，他们都能够获得基本的功能和内容，而高级功能仅在支持它们的环境中可用。例如，在构建一个网页时，可以首先使用标准的HTML元素和语义化标记来创建内容，然后通过CSS样式和JavaScript来增加交互性和动态效果。

**优雅降级（Graceful Degradation）**是一种设计和开发方法，它首先针对现代浏览器和设备构建完整的功能和富有交互性的网页或应用程序，然后通过在旧版浏览器或不支持某些功能的设备上提供替代方案来降低用户体验的损失。核心思想是确保所有用户都能够访问和使用网站或应用程序，即使它们可能无法享受到最新的功能和效果。例如，通过使用浏览器功能检测和兼容性技术，可以在旧版浏览器上提供基本的功能和内容，并根据用户的环境逐步增强体验。

渐进增强和优雅降级都是为了实现跨浏览器和设备的可访问性和可用性。它们的主要区别在于关注点的不同。渐进增强从简单的基础版本开始，并根据现代浏览器和设备的能力逐步增加功能和样式。而优雅降级则从完整的功能和交互性出发，并通过提供替代方案来降低对旧版浏览器和不支持功能的设备的依赖。

无论选择哪种方法，目标都是提供一致且可访问的用户体验，同时尽可能地利用现代浏览器和设备的功能。开发人员应该根据目标用户、预算和项目需求来决定使用哪种策略或两者的结合方式。



## 7.iframe 有哪些优点？哪些缺点？用它来解决过什么问题？

使用 `<iframe>` 标签可以将其他网页或文档嵌入到当前页面中，它具有以下优点和缺点：

**优点：**

1. **分离内容和样式：** 使用 `<iframe>` 可以将内部文档的样式和布局与外部页面分离，使得不同部分可以独立管理和更新。
2. **实现跨域通信：** `<iframe>` 可以用于与不同域名或子域名下的页面进行通信，通过在不同的 `<iframe>` 中加载不同域的页面，可以实现跨域通信，方便数据共享和交互。
3. **提供代码复用：** 通过 `<iframe>` 可以将可重复使用的组件或功能封装成单独的页面，并在多个页面中重复使用，减少了代码冗余和维护成本。
4. **实现异步加载：** 使用 `<iframe>` 可以将某些内容延迟加载，从而提高页面加载速度，特别是对于大型或复杂的内容可以按需加载。

**缺点：**

1. **性能影响：** `<iframe>` 的加载会增加页面的请求量和渲染时间，特别是如果嵌入的内容较大或者数量较多，可能会导致性能下降。
2. **访问受限：** 嵌入的外部页面可能存在访问限制，例如使用了 X-Frame-Options 头或 Content Security Policy (CSP) 的页面可能禁止在 `<iframe>` 中显示。
3. **不利于 SEO：** 搜索引擎的爬虫对于 `<iframe>` 中的内容处理有限，可能无法正确解析和索引嵌入的页面内容，从而影响网站的搜索引擎优化（SEO）。
4. **安全风险：** `<iframe>` 可能面临一些安全风险，例如点击劫持（clickjacking）攻击，恶意网站可以在 `<iframe>` 上覆盖透明层，并诱使用户在其上执行操作，而不知道自己实际上是在操作 `<iframe>` 中的内容。

使用 `<iframe>` 可以解决一些特定的问题，比如：

1. **嵌入外部内容：** `<iframe>` 可以用于嵌入来自其他网站或来源的内容，例如嵌入地图、视频、社交媒体小部件等。
2. **防止样式污染：** 在某些情况下，如果需要在当前页面中加载来自第三方的内容，但又希望保持样式的隔离，可以使用 `<iframe>` 来加载该内容，以防止样式冲突和污染。
3. **实现插件或组件机制：** 使用 `<iframe>` 可以将某些功能封装成独立的页面，然后在其他页面中通过 `<iframe>` 进行加载和展示，实现代码的复用和模块化。

需要注意的是，使用 `<iframe>` 应谨慎，根据具体情况权衡其优点和缺点，并考虑替代方案，以确保最佳的用户体验和性能。



## 8.Google Chrome 如何支持大小小于12px的文字？

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .p1 {
            background: #333;
            color: #fff;
            /*zoom: 50%;*/
            zoom: 0.5;
        }
        .p2 {
            background: #595959;
            color: #fff;
            font-size: 12px;
            display: inline-block;
            -webkit-transform: scale(0.5);
        }
    </style>
</head>
<body>
    <div class="d1">
        测试数据1
    </div>
    <div class="d2">
        测试数据2
    </div>

    <p class="p1">这里支持小于8px的文字。</p>
    <p class="p2">这里支持小于8px的文字。</p>
</body>
</html>
```



## 9.描述一下 css 盒子模型

盒模型是一种用来描述网页元素大小和位置的模型，它由四个部分组成：内容区域content、内边距padding、边框border和外边距margin。

- 标准盒子模型
  - width 和 height 指的是内容content的宽高
- IE盒子模型
  - width 和 height 包括 ： 内容 + padding + border
- 标准转IE :  box-sizing: border-box; 



## 10.HTML5的特性有哪些？

HTML5是一种用于构建和呈现网页的标准，它引入了许多新的功能和特性。以下是HTML5的一些主要特性：

1. 语义化标签：HTML5引入了一些新的**语义化标签**，如<header>、<footer>、<nav>、<article>等，使开发者能够更好地描述页面结构，提高可访问性和搜索引擎优化。
2. **视频和音频支持**：HTML5支持直接在网页中嵌入视频和音频内容，无需使用第三方插件（如Flash）。通过<video>和<audio>标签，可以轻松地添加和控制媒体元素。
3. **Canvas绘图**：HTML5的<canvas>元素允许开发者使用JavaScript动态绘制图形、图表和动画等。这为游戏开发和数据可视化提供了强大的功能。
4. **本地存储**：HTML5提供了一些本地存储机制，如Web Storage和IndexedDB，使得网页可以在用户浏览器中存储数据，以便离线访问或提高应用性能。
5. **无连接通信**：HTML5的Server-Sent Events和**WebSocket**等技术，使得网页可以与服务器进行实时、双向的通信，打开了构建实时聊天、即时更新和协作应用等可能性。
6. **地理定位**：HTML5的地理定位API使得网页可以获取用户的地理位置信息，这为基于位置的服务和应用提供了便利。
7. **表单增强**：HTML5引入了一些新的表单元素和属性，如日期选择器、邮箱验证、自动完成和表单验证等，简化了表单处理过程。
8. **支持多媒体**：HTML5提供了对矢量图形、SVG和WebGL等技术的支持，使开发者能够创建丰富的多媒体内容和交互体验。

这些是HTML5的一些主要特性，它们为开发者提供了更多的功能和灵活性，使得构建现代化、响应式的网页和应用变得更加容易和强大。



## 11.CSS3的特性有哪些？

CSS3引入了许多新的特性和模块，为开发者提供了更多的样式控制和动画效果。以下是CSS3的一些主要特性：

1. 选择器：CSS3引入了一些新的选择器，如属性选择器（[attribute]）、子选择器（>）、相邻兄弟选择器（+）等，使得选择元素变得更加灵活和精确。
2. 盒子模型：CSS3中引入了盒子模型的新特性，如box-sizing属性，可以控制盒子模型计算宽度时包含边框和内边距的方式。
3. 文字效果：CSS3提供了丰富的文字效果，包括文字阴影、文字渐变、文字描边、文字换行（word-wrap）等，使得文字能够呈现更丰富的样式。
4. 边框样式：CSS3增加了更多的边框样式选项，如圆角边框（border-radius）、边框图片（border-image）、多重边框（multiple borders）等，使得边框的设计变得更加灵活和多样化。
5. 渐变：CSS3引入了渐变效果，通过linear-gradient()和radial-gradient()函数，可以创建线性渐变和径向渐变背景，使得页面能够实现更丰富的颜色过渡效果。
6. 过渡和动画：CSS3提供了过渡（transition）和动画（animation）的功能，使得元素的样式变化能够平滑过渡或产生动画效果，通过指定动画的关键帧（keyframes）来控制元素在不同阶段的样式。
7. 2D/3D转换：CSS3引入了transform属性，可以通过translate、rotate、scale等方法对元素进行2D/3D的转换和变换，实现旋转、缩放、倾斜等效果。
8. 媒体查询：CSS3的媒体查询功能允许开发者根据设备的尺寸、屏幕分辨率和其他特性，自适应地调整页面样式和布局，以提供更好的移动设备支持。

这些是CSS3的一些主要特性，它们为开发者提供了更多的样式选择和动画效果，使得网页设计和开发变得更加精确、灵活和创意。



## 12.如何实现水平居中？

在网页开发中，有几种常见的方法可以实现水平居中：

1. 使用文本对齐属性：

   ```html
   <div style="text-align: center;">
     <!-- 在此处放置要居中的内容 -->
   </div>
   ```

   这种方法适用于块级元素和内联元素。

2. 使用 margin 属性自动计算：

   ```css
   selector {
     display: block; /* 将元素设置为块级元素 */
     margin-left: auto; /* 左外边距设为自动 */
     margin-right: auto; /* 右外边距设为自动 */
   }
   ```

   这种方法也适用于块级元素和内联元素。将左右边距都设置为 "auto" 会使元素在水平方向上自动计算并居中。

3. 使用 Flexbox 布局：

   ```css
   container {
     display: flex; /* 将父容器设置为flex布局 */
     justify-content: center; /* 子元素水平居中 */
   }
   ```

   这种方法使用了 Flexbox 布局，通过设置容器的 `display` 属性为 `flex`，并使用 `justify-content` 属性来指定内容在水平方向上的对齐方式为居中。

4. 使用网格布局：将父容器设置为grid布局，并使用`justify-items: center;`将子元素水平居中。

   ```css
   container {
     display: grid; /* 将父容器设置为grid布局 */
     justify-items: center; /* 子元素水平居中 */
   }
   ```




## 13.如何实现垂直居中？

在Google Chrome中实现垂直居中有多种方法，以下是三种常用的方案：

1. 使用行高和文字居中：如果要垂直居中的是文本内容，可以通过设置行高等于容器的高度，并将文字垂直居中来实现。

```
container {
  height: 200px; /* 设置容器高度 */
  line-height: 200px; /* 设置行高等于容器高度 */
  text-align: center; /* 文字居中 */
}
```

2. 使用Flexbox布局：将父容器设置为flex布局，并使用`align-items: center;`将子元素垂直居中。

```
container {
  display: flex; /* 将父容器设置为flex布局 */
  align-items: center; /* 子元素垂直居中 */
}
```

3. 使用网格布局：将父容器设置为grid布局，并使用`align-items: center;`将子元素垂直居中。

```
container {
  display: grid; /* 将父容器设置为grid布局 */
  align-items: center; /* 子元素垂直居中 */
}
```

4. 使用绝对定位和 transform 属性： 这种方法适用于已知高度的元素。通过将子项的位置设置为绝对定位，并使用 `top: 50%;` 和 `transform: translateY(-50%);` 属性来使其在垂直方向上居中。例如：

```
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```



## 14.如何实现双圣杯布局？

双圣杯布局是一种常见的三栏布局，其中两个侧边栏固定宽度，中间栏自适应，以下是三种实现双圣杯布局的代码：

1. 使用浮动布局：

```
<div class="container">
  <div class="left">Left Sidebar</div>
  <div class="content">Main Content</div>
  <div class="right">Right Sidebar</div>
</div>
cssCopy code.container {
  overflow: hidden;
}

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

.content {
  margin: 0 200px;
}
```

2. 使用flex布局：

```
<div class="container">
  <div class="left">Left Sidebar</div>
  <div class="content">Main Content</div>
  <div class="right">Right Sidebar</div>
</div>
cssCopy code.container {
  display: flex;
}

.left, .right {
  width: 200px;
}

.content {
  flex-grow: 1;
}
```

3. 使用grid布局：

```
<div class="container">
  <div class="left">Left Sidebar</div>
  <div class="content">Main Content</div>
  <div class="right">Right Sidebar</div>
</div>
cssCopy code.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

.left, .right {
  width: 200px;
}
```

以上是三种常见的实现双圣杯布局的代码。根据您的具体需求和喜好，选择合适的方法来实现所需效果。



## 15.CSS中选择器的优先级？

CSS中的选择器主要有以下几种：

1. **元素选择器**（element selector）：根据HTML元素标签进行选择，如p、div、h1等。
2. **类选择器**（class selector）：根据HTML元素的class属性值进行选择，以"."开头，如.class1、.class2等。
3. **ID选择器**（id selector）：根据HTML元素的id属性值进行选择，以"#"开头，如#id1、#id2等。
4. **属性选择器**（attribute selector）：根据元素具有某个属性值进行选择，如[type="text"]、[href^="http"]等。
5. **伪类选择器**（pseudo-class selector）：根据元素的状态或特定位置进行选择，如**:hover、:nth-child()、:first-child**等。
6. **伪元素选择器**（pseudo-element selector）：在元素的特定位置插入内容或样式，如**::before、::after**等。
7. **后代选择器（**descendant selector）：选择某个元素的后代元素，使用空格进行分隔，如div p、ul li等。

选择器的优先级从高到低依次为：

1. !important：被标记为!important的样式具有最高优先级。
2. 行内样式（Inline style **1000**）：直接应用在HTML元素上的style属性。
3. ID选择器（ID selector **100**）：通过id属性进行选择。
4. 类选择器（class selector **10**）、属性选择器（attribute selector **10**）和伪类选择器（pseudo-class selector**10**）：通过class、属性、伪类进行选择。
5. 元素选择器（element selector **1**）和伪元素选择器（pseudo-element selector **1**）：通过元素或伪元素进行选择。
6. 通用选择器（universal selector）和选择器组合（combinators）：选择器的权重最低。

当多个选择器有相同的权重时，后面的样式会覆盖前面的样式。如果优先级相同且样式都被标记为!important，则根据样式的具体位置来确定优先级。



## 16.CSS权重如何计算？

权重计算规则如下：

1. 行内样式（Inline style）的权重为1000。
2. 每个ID选择器的权重为100。
3. 每个类选择器、属性选择器和伪类选择器的权重为10。
4. 每个元素选择器和伪元素选择器的权重为1。
5. 通用选择器（*）和选择器组合（combinators）不增加权重。
6. !important声明的样式总是具有最高的权重，优先级最高。

对于具体的选择器，可以通过将其权重的每个部分相加来计算。例如：

- .class1的权重为10。
- \#id1的权重为100。
- div的权重为1。
- p:nth-child(2)的权重为11（10+1）。

当比较两个样式的优先级时，权重高的样式会覆盖权重低的样式。如果两个样式的权重相同，则根据样式的具体位置来确定优先级。



## 17.HTML5 input 元素 type 属性有哪些？

HTML5中，input元素的type属性可以设置为以下值：

1. text：文本输入框。
2. password：密码输入框，输入的内容会被隐藏。
3. date：日期选择框。
4. month：月份选择框。
5. week：周选择框。
6. time：时间选择框。
7. datetime：日期和时间选择框（不推荐使用）。
8. datetime-local：本地日期和时间选择框（不推荐使用）。
9. email：电子邮件输入框，会验证输入内容是否符合电子邮件格式。
10. number：数字输入框，可以输入数字。
11. range：范围输入框，可以选择一个范围内的值。
12. search：搜索输入框。
13. tel：电话号码输入框。
14. url：URL输入框。
15. color：颜色选择框。
16. checkbox：复选框。
17. radio：单选按钮。
18. file：文件上传框。
19. submit：提交按钮。
20. image：图像按钮。
21. reset：重置按钮。
22. button：普通按钮。

除了上述类型，还可以使用自定义类型，自定义类型必须以x-字母开头。



## 18.CSS 中哪些属性可继承，哪些不可以？

在CSS中，有一些属性是可以继承的，这意味着父元素的样式将会被子元素继承。而也有一些属性是不可继承的，子元素不会继承父元素的样式。

下面是一些常见的可继承和不可继承的CSS属性：

可继承的属性包括但不限于：

1. 字体属性（font-family、font-size、font-weight等）
2. 文本属性（color、text-align、text-decoration等）
3. 行高（line-height）
4. 元素可见性（visibility）
5. 元素对齐方式（vertical-align）
6. 元素的列表标记（list-style-type）

不可继承的属性包括但不限于：

1. 盒模型属性（width、height、margin、padding等）
2. 背景属性（background-color、background-image等）
3. 定位属性（position、top、left等）
4. 浮动属性（float）
5. 清除浮动属性（clear）
6. 边框属性（border）
7. 字体样式属性（font-style）
8. 元素显示方式（display）
9. 显式层叠上下文属性（z-index）



## 19.CSS 单位中 px 、 em 和 rem 的区别？配合 font - size 如何计算？（移动端适配方案）

- px（像素）：是一种绝对单位，表示屏幕上的物理像素。1px 等于显示设备上的一个物理像素点。在移动端开发中常用 px 单位进行准确的像素级布局。
- em（相对单位）：相对于父元素的字体大小来确定其自身的大小。比如，如果一个元素的 font-size 为 16px ，设置其宽度为 2em ，则其宽度将为 32px 。em 单位具有继承性，它的值取决于父元素的 font-size。
- rem（相对单位）：相对于根元素（HTML）的字体大小来确定其自身的大小。比如，如果根元素的 font-size 为 16px ，设置某个元素的宽度为 2rem ，则其宽度将为 32px 。rem 单位的值永远都是相对于根元素的 font-size 。

在移动端适配方案中，为了适应不同设备的屏幕大小，一种常用的方法是使用 rem 单位进行布局。具体步骤如下：

1. 设置根元素（HTML）的字体大小为适配设备的基准值（如，iPhone 6/7/8 的基准值为 37.5px ）：

   ```
   html {
     font-size: 37.5px;
   }
   ```

2. 其他元素的尺寸都使用 rem 单位进行设置，根据设计稿上的尺寸进行计算。

   例如，设计稿中一个按钮的宽度为 100px ，按照基准值来计算为：

   ```
   .btn {
     width: 100px / 37.5 = 2.6667rem;
   }
   ```

   如果使用 em 单位来计算，需要知道父元素的字体大小并进行计算。

   例如，父元素的字体大小为 16px ，按钮的宽度为 2em ，则计算为：

   ```
   .parent {
     font-size: 16px;
   }
   .btn {
     width: 2em * 16px = 32px;
   }
   ```

总结起来，rem 单位在移动端适配中更加灵活，它相对于根元素的字体大小，不受继承影响；而 em 单位更多用于相对于父元素来计算大小。



## 20.如何画一条0.5px的线

CSS 中的像素单位（px）通常被认为是最小可见单位，默认情况下，无法使用小于 1px 的值来画线。然而，在某些情况下，我们可能需要绘制更细的线条，比如在 Retina 屏幕上显示更加锐利的线条。

为了实现绘制 0.5px 的线条，可以使用 CSS3 中的 transform 属性结合 scale 缩放的方法。通过缩放元素的高度或宽度为 0.5 倍，可以产生一个视觉上的 0.5px 细线效果。以下是一种实现方式：

```CSS
<div class="line"></div>
.line {
  width: 100%;
  height: 1px;
  background-color: black;
  transform-origin: center;
  transform: scaleY(0.5);
}
```

```css
.line {
   width: 100%;
   height: 1px;
   box-shadow: 0 0.5px black; /* 设置阴影的偏移量和颜色 */
}  
```

在上述代码中，我们创建了一个 div 元素，并添加了一个 line 类。这个类设置了这个 div 的宽度为 100% ，高度为 1px ，并设置背景颜色为黑色。

为了实现 0.5px 的线条效果，我们使用 transform 属性，其中 transform-origin: center 设置了缩放的基准点在元素的中心，而 transform: scaleY(0.5) 则将元素在垂直方向上缩放为原来的 0.5 倍。

请注意，这种方法只能在高 DPI 屏幕上（如 Retina 屏幕）才能显示出细线效果。在低 DPI 屏幕上，缩放后的线条可能会被放大并显示为 1px。



## 21.隐藏一个元素有哪些方法？ display :none 与 visibility : hidden 与 opacity :0之间的区别？

隐藏一个元素有以下几种方法：

1. 使用display: none;：这会完全从文档流中移除元素，并且不占据任何空间。元素会被隐藏，无法看到或与之交互。
2. 使用visibility: hidden;：元素仍然占据空间，但是内容将不可见。虽然内容不可见，但元素仍然存在于文档流中，可以与之交互。
3. 使用opacity: 0;：元素保留其空间，并且仍然存在于文档流中，但是其内容变为透明。元素仍然可见，但是内容不可见。

这些方法之间的主要区别在于元素对布局和交互的影响。使用display: none;会彻底从文档流中移除元素，不占用空间，也不可见，无法与之交互。使用visibility: hidden;元素仍然占据空间，但内容不可见，可以与之交互。而使用opacity: 0;元素仍然占据空间，内容可见（尽管透明），可以与之交互。



## 22.position 的值有哪些，分别有什么特点？

CSS的`position`属性用于指定元素在文档中的定位方式。以下是常见的`position`取值及其特点：

1. `static`（默认）：元素处于正常文档流中，不进行任何特殊定位。此时`top`、`right`、`bottom`、`left`和`z-index`属性对元素没有影响。
2. `relative`：相对定位。元素相对于其正常位置进行定位。可以通过设置`top`、`right`、`bottom`、`left`属性来调整元素的位置。相对定位不会使元素脱离文档流，即便元素位置改变了，其原有空间也会保留。
3. `absolute`：绝对定位。元素相对于最近的已定位祖先元素（非`static`定位）进行定位，如果没有已定位祖先元素，则相对于最初的包含块（通常是浏览器视口）进行定位。通过设置`top`、`right`、`bottom`、`left`属性来确定元素的位置。绝对定位会使元素脱离文档流，其他元素的布局不会受到其影响。
4. `fixed`：固定定位。元素相对于浏览器视口进行定位，即使页面滚动，元素的位置也不会改变。通过设置`top`、`right`、`bottom`、`left`属性来确定元素的位置。固定定位会使元素脱离文档流，其他元素的布局不会受到其影响。
5. `sticky`：粘性定位。元素在满足特定条件时将保持相对定位或固定定位，即根据滚动位置进行切换。通过设置`top`、`right`、`bottom`、`left`属性来调整元素的位置。粘性定位会使元素脱离文档流，在特定条件下切换定位方式。

这些`position`取值可以通过设置`top`、`right`、`bottom`、`left`属性来调整元素的具体位置，以实现灵活的布局效果。





## 23.什么是浮动，浮动会引起什么问题，有何解决方案？

浮动是CSS中一种常用的布局技术，通过设置元素的`float`属性为`left`或`right`，使元素脱离正常的文档流，向左或向右浮动，并允许其他内容环绕在其周围。

浮动可能会引起以下问题：

1. 布局破坏：浮动元素脱离了文档流，可能导致其后面的元素错位或重叠，破坏整体布局的结构。
2. 父元素塌陷：父元素不会包裹浮动元素的高度，导致父元素无法自适应内部浮动元素的高度，出现高度塌陷。
3. 清除浮动问题：浮动元素会影响紧随其后的元素，可能导致后续元素无法正确排列。

解决浮动问题的常见方法包括：

1. 清除浮动：可以在包含浮动元素的父元素上使用`clearfix`技术，如在父元素上添加一个额外的空元素并设置`clear: both;`，或使用伪类选择器来清除浮动。例如：

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

1. 使用`overflow: auto;`：将包含浮动元素的父元素设置为具有自动溢出的容器，可以触发BFC（块级格式化上下文），从而解决父元素塌陷的问题。
2. 使用CSS网格布局或弹性盒子布局：这些新的布局技术提供了更灵活的布局方式，并能够避免浮动带来的一些问题。
3. 使用CSS框架：使用现成的CSS框架（如Bootstrap）可以简化浮动相关的处理，并提供了解决浮动问题的方法和样式。

需要根据具体情况选择适当的方法来解决浮动引起的问题。





## 24.line - height 和 height 的区别

`line-height`和`height`是CSS中用于控制元素高度的属性，它们有以下区别：

1. `line-height`（行高）：该属性用于设置元素内文本行之间的距离，即行高。它不仅可以影响文本的垂直对齐方式，还可以作用于包含块级元素的高度计算。当应用于块级元素时，`line-height`会影响元素的实际高度，包括空白间隙。例如，如果`line-height`的值大于文本字体大小，那么元素的实际高度将超过字体大小。
2. `height`（高度）：该属性用于显式设置元素的高度。它指定了元素在垂直方向上所占据的固定空间。通过设置`height`属性，可以确保元素始终以相同的高度呈现，无论其内容的高度如何。注意，如果元素的内容超出了指定的`height`值，溢出的内容可能会被隐藏或显示滚动条。

总结来说，**`line-height`影响文本行之间的垂直间距**，并且在某些情况下也会影响元素的实际高度；而`height`是用于显式设置元素的固定高度。



## 25.设置一个元素的背景颜色，背景颜色会填充哪些区域？

当你设置一个元素的背景颜色时，背景颜色将填充以下区域：

1. **元素的内容区域**：即元素内部实际包含的文本、图像或其他内容的区域。
2. **元素的内边距区域**：内边距是元素内容区域与边框之间的空白区域。背景颜色会延伸到元素的内边距区域。
3. 元素的边框区域：边框是围绕元素内容和内边距的线条或样式。背景颜色会填充边框所占据的区域。

请注意，背景颜色不会填充元素的外边距区域（外边距是元素和其他元素之间的空白区域）。

需要注意的是，如果元素设置了`border-box`的`box-sizing`属性，那么背景颜色也将填充元素的边框和内边距区域，而不会超出这些区域。但是，默认情况下，背景颜色会填充整个元素的宽度和高度，包括边框和内边距区域。

在常规的 CSS 盒模型中，背景颜色（`background-color`）不会填充边框区域。背景颜色只会应用于内容区域（包括内边距）。

如果你想要将背景色扩展到边框区域，你可以考虑使用其他方法，例如使用伪元素 `::before` 或 `::after` 来创建一个与父元素大小相同的覆盖层，并为该覆盖层设置背景颜色。

以下是一个示例代码片段：

```css
.container {
  position: relative;
  padding: 20px;
}

.container::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-color: red;
  z-index: -1;
}
```

在上述示例中，我们使用 `::before` 伪元素创建了一个覆盖层，并通过设置其位置和大小与 `.container` 元素相同，然后为该覆盖层设置了背景颜色。注意要将其 `z-index` 设置为负值以使其位于内容之后。

这样做的效果就是背景颜色覆盖整个容器，包括边框区域。但请注意，这种方法可能会影响到容器内部的其他元素的交互性和可访问性，因此需谨慎使用。



## 26.inline- block 、 inline 和 block 的区别；为什么 img 是 inline 还可以设置宽高

在 CSS 中，`inline-block`、`inline`和`block`是三种元素的显示属性，它们在布局上具有不同的特性。而`img`元素是一个特殊的元素，具有一些与默认`inline`显示属性不同的特殊规则。

1. `block`：元素呈现为块级元素，独占一行。它会撑满父元素的宽度，并独占一行的空间。常见的块级元素有`div`、`p`等。
2. `inline`：元素呈现为内联元素，不会独占一行，不会强制换行。它只会占据元素的内容所需的空间。常见的内联元素有`a`、`span`等。
3. `inline-block`：元素呈现为内联块级元素，拥有内联元素的特性，同时可以设置宽度、高度和内外边距。它不会独占一行，但可以设置宽度和高度，并且可以在同一行显示多个元素。

`img`元素默认是`inline`，这是因为`img`元素通常被视为文本的一部分，可以和文本混合显示。然而，`img`元素有一个特殊的属性`display: inline-block`，可以使其具备`inline-block`的特性，即可以设置宽度、高度和内外边距。





## 27.什么是重绘？什么是回流？如何减少？如何让文档脱离文档流？

重绘（Repaint）和回流（Reflow）是与网页性能和渲染相关的概念。

重绘指的是当元素样式的改变不影响其布局时，浏览器会将元素的外观重新绘制到屏幕上。例如，改变元素的背景颜色、字体颜色等只影响元素的外观而不改变布局的操作，会触发重绘。

回流指的是当元素的大小、位置或结构发生变化，需要重新计算页面布局时，浏览器会重新计算元素的几何属性，然后重新构建渲染树，这个过程称为回流。例如，改变元素的宽度、高度、边距等会影响元素布局的操作，会触发回流。回流的代价比重绘高得多，因为它需要更新整个渲染树。

为了提高网页性能，可以采取以下措施来减少重绘和回流的次数：

1. 使用 CSS3 的 transform 属性来代替影响布局的属性，如使用 translate 替代定位属性（top、left 等），使用 scale 替代宽度和高度等。
2. 使用 CSS3 的 opacity 属性来代替使用 display: none 隐藏元素，因为前者只会触发重绘，而后者会触发回流和重绘。
3. 尽量避免使用 table 布局，因为它在每个单元格的改变时都会触发回流。
4. 避免频繁操作样式，最好一次性修改样式，例如将需要修改的样式定义在一个 CSS 类中，然后通过修改元素的 className 来一次性应用这些样式。
5. 对于涉及到多次 DOM 操作的情况，可以先使元素脱离文档流（Detached），进行操作后再恢复到文档流中。这可以通过将元素的 display 属性设置为 none 实现，操作完成后再将 display 属性还原。

请注意，对于优化网页性能，需要结合具体情况进行分析和优化。以上只是一些常见的优化措施，具体的优化策略还需根据实际情况进行调整和测试。



## 28.box - sizing 的作用，如何使用？

box-sizing是一个CSS属性，用于控制元素的盒模型计算方式。它影响了元素的宽度和高度的计算方式，以及是否包括内边距和边框在内。

默认情况下，元素的总宽度和高度由内容区域、内边距和边框组成。也就是说，当你指定一个元素的宽度和高度时，它不包括内边距和边框。

box-sizing有两个常见的取值：

1. **content-box（默认值）【标准盒子】**：元素的宽度和高度只包括内容区域，不包括内边距和边框。换句话说，设置元素的宽度和高度时，它们不会自动包括内边距和边框的大小。
2. **border-box 【IE盒子】** ：元素的宽度和高度包括内容区域、内边距和边框。换句话说，设置元素的宽度和高度时，它们会自动包括内边距和边框的大小。

使用box-sizing属性可以通过将其应用于特定的元素或全局选择器来改变盒模型的计算方式。例如：

```css
/* 将box-sizing应用于所有元素 */
* {
  box-sizing: border-box;
}

/* 将box-sizing应用于特定的类 */
.my-element {
  box-sizing: border-box;
}
```

这样设置后，元素的宽度和高度将包括内边距和边框的大小。这对于开发响应式网页布局以及处理盒模型计算方式的差异非常有用。



## 29.如何实现清除浮动

清除浮动是指在网页布局中，处理浮动元素对其他元素产生的影响，使得父容器能够正确地包裹浮动元素并正常显示。以下是一些常见的方法来实现清除浮动：

1. 使用**clear属性**：可以在浮动元素后面添加一个空的块级元素，并设置其clear属性为both。例如：

```html
<div style="clear: both;"></div>
```

这将在浮动元素后面插入一个空的div元素，以清除之前的浮动。

2. 使用**clearfix类**：可以定义一个CSS样式类，将其应用于包含浮动元素的父容器上。该类通常会包含clear属性和一些其他必要的样式，以防止浮动元素溢出。下面是一个基本的clearfix类示例：

```css
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*【作用】：在使用 .clearfix 类时，同时为支持 IE7 及更早版本的浏览器设置 zoom 属性为 1，以确保浮动元素的正确布局和显示。*/
.clearfix {
  *zoom: 1;
}
```

然后，在父容器上添加clearfix类：

```html
<div class="clearfix">
  <!-- 浮动元素 -->
</div>
```

3. 使用**overflow属性**：可以通过将父容器的overflow属性设置为hidden或auto来清除浮动。这将触发BFC（块格式化上下文）并使父容器正确地包裹浮动元素。例如：

```
.parent-container {
  overflow: hidden;
}
```

请注意，这种方法可能会导致内容被裁剪，因此要确保父容器有足够的空间来容纳浮动元素。

这些方法中的每一种都可以根据具体情况选择合适的方式来清除浮动。请根据实际需求选择最适合的方法，并在需要时进行调整。



## 30.css动画如何实现

CSS动画可以通过使用CSS的`@keyframes`规则和`animation`属性来实现。以下是实现CSS动画的基本步骤：

1. 定义关键帧（Keyframes）： 使用`@keyframes`规则定义动画的关键帧，即动画中的不同状态。关键帧定义了动画在不同时间点上的样式变化。例如，以下代码定义了一个从起始状态到结束状态的简单动画：

```css
@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
```

在上面的例子中，`myAnimation`是动画名称，`0%`表示起始状态，`100%`表示结束状态，`opacity`是要改变的样式属性。

2. 应用动画： 使用`animation`属性将定义好的动画应用到要进行动画效果的元素上。例如，以下代码将上述定义的动画应用到一个`<div>`元素上，并设置动画的持续时间为2秒：

```
.my-element {
  animation: myAnimation 2s;
}
```

在上面的例子中，`.my-element`指向要应用动画的元素，`myAnimation`是先前定义的动画名称，`2s`表示动画持续时间为2秒。

3. 可选的动画属性： 还可以使用其他一些可选的CSS动画属性来进一步控制动画效果，例如：

- `animation-delay`: 设置动画延迟时间。
- `animation-direction`: 设置动画播放方向，如正向、反向或交替播放。
- `animation-fill-mode`: 设置动画在播放前和播放后的样式状态。
- `animation-iteration-count`: 设置动画重复播放的次数。
- `animation-timing-function`: 设置动画的时间函数，控制动画的加速度。

这些是一些基本的步骤和属性来创建CSS动画。实际应用中，可以根据需要进行更高级的动画效果和调整。同时，还可以使用JavaScript与CSS动画结合，以实现更复杂的交互效果。

CSS动画可以通过使用@keyframes规则来创建。下面是一个示例代码，演示了如何制作一个简单的CSS动画效果：

HTML：

```html
<div class="box"></div>
```

CSS：

```css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example-animation {
  0% {
    transform: scale(1);
    background-color: red;
  }
  50% {
    transform: scale(1.5);
    background-color: blue;
  }
  100% {
    transform: scale(1);
    background-color: red;
  }
}
```

在上面的代码中，我们定义了一个名为`.box`的CSS类作为动画效果的目标元素。通过设置`animation-name`属性为`example-animation`，我们将此元素与`@keyframes`规则中定义的动画关联起来。

在`@keyframes example-animation`规则中，我们定义了动画的关键帧（即起始状态、中间状态和结束状态）。在这个例子中，动画从初始状态开始（0%），逐渐缩放到1.5倍大小并改变背景颜色（50%），然后回到初始状态（100%）。

其他的动画属性设置包括：

- `animation-duration`：动画持续时间为2秒。
- `animation-timing-function`：动画采用了缓入缓出的时间函数。
- `animation-delay`：动画延迟0秒开始。
- `animation-iteration-count`：动画循环播放无限次。
- `animation-direction`：动画在交替方向上播放。

通过调整这些属性的值，你可以根据自己的需求创建各种不同的CSS动画效果。





## 31.如何实现在某个容器中居中的？

要在某个容器中实现居中，有多种方式可以使用。以下是三种常见的方法：

1. 使用Flexbox布局：

```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

在这种方法中，将容器的`display`属性设置为`flex`，并使用`justify-content: center;`和`align-items: center;`将内容水平和垂直居中。

2. 使用绝对定位和`transform`属性：

```css
.container {
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

在这种方法中，将容器的`position`属性设置为`relative`，然后在需要居中的元素上创建一个新的类`.centered`。通过将该元素的`position`属性设置为`absolute`，`top: 50%;`和`left: 50%;`将其定位到容器的中心位置，然后使用`transform: translate(-50%, -50%);`将其向左和向上移动一半的宽度和高度，从而实现居中效果。

3. 使用网格布局：

```css
.container {
  display: grid;
  /*place-items: center;*/
}
```

在这种方法中，将容器的`display`属性设置为`grid`，并使用`place-items: center;`将内容居中放置。

这些都是常见的方法，你可以根据具体的需求选择适合你的情况的方法来实现居中效果。



## 32.如何改变一个 DOM 元素的字体颜色？

要改变一个DOM元素的字体颜色，你可以使用CSS样式或JavaScript来实现。

方法一：使用CSS样式 你可以通过设置元素的`color`属性来改变字体颜色。以下是一个示例：

```
#myElement {
  color: red;
}
```

在上面的示例中，我们使用CSS选择器`#myElement`选择了一个具有`id`为`myElement`的元素，并将其字体颜色设置为红色。

方法二：使用JavaScript 如果你想动态地改变元素的字体颜色，你可以使用JavaScript来操作元素的样式属性。以下是一个使用JavaScript改变字体颜色的示例：

```
var element = document.getElementById("myElement");
element.style.color = "blue";
```

在这个例子中，我们首先使用`document.getElementById("myElement")`获取具有`id`为`myElement`的元素，然后使用`.style.color`属性来设置元素的字体颜色为蓝色。

无论是使用CSS样式还是JavaScript，你都可以根据需要选择适合的方法来改变DOM元素的字体颜色



## 33.相对布局和绝对布局区别？ position : relative 和 absolute 。

相对布局（Relative positioning）和绝对布局（Absolute positioning）是CSS中常用的两种定位方式，它们具有以下区别：

1. 相对布局（Relative positioning）：

- 相对布局是元素的默认定位方式。
- 相对布局不会从文档流中脱离，并且仍然占据其正常位置。
- 通过设置`position: relative;`，可以应用相对布局。
- 相对布局可以使用`top`、`right`、`bottom`、`left`等属性来调整元素相对于其原始位置的偏移量。
- 相对定位的元素在页面布局中会影响其他元素的位置。

2. 绝对布局（Absolute positioning）：

- 绝对布局使元素完全脱离文档流，并根据最接近的具有定位的祖先元素进行定位。
- 通过设置`position: absolute;`，可以应用绝对布局。
- 绝对布局可以使用`top`、`right`、`bottom`、`left`等属性来精确控制元素的位置。
- 绝对定位的元素在页面布局中不会影响其他元素的位置，其他元素会忽略该元素的存在。

总结：

- 相对布局保持元素的正常文档流，相对于其原始位置进行偏移，会影响其他元素的位置。
- 绝对布局将元素从文档流中脱离，相对于最近的具有定位的祖先元素进行定位，不会影响其他元素的位置。

根据具体的需求和布局目标，可以选择使用相对布局或绝对布局来实现所需的效果。



## 34.什么是弹性盒子 flex 布局？实现原理？

弹性盒子（Flexbox）布局的实现原理基于一组规则和算法，用于确定容器内项目的大小、位置和对齐方式。以下是弹性盒子布局的关键原理：

1. 主轴和交叉轴：
   - Flexbox布局有一个主轴和一个交叉轴。
   - 主轴是项目排列的方向，默认为水平方向（从左到右）。
   - 交叉轴是与主轴垂直的轴线，默认为垂直方向（从上到下）。
2. 容器的计算阶段：
   - 在计算阶段，浏览器根据容器的属性（如`flex-direction`、`justify-content`等）和项目的属性（如`flex-grow`、`flex-shrink`等）来确定项目在主轴上的大小和位置。
   - 容器首先计算出主轴上的可用空间，考虑到容器的尺寸、边距和填充等因素。
   - 然后，容器根据项目的`flex-grow`属性来分配剩余空间，使具有非零`flex-grow`值的项目按比例增长。
3. 项目的计算阶段：
   - 在项目计算阶段，浏览器根据项目的属性和容器的属性来确定每个项目在主轴和交叉轴上的大小和位置。
   - 项目首先根据其`flex-basis`属性确定其在主轴上的初始尺寸。
   - 接下来，浏览器根据项目的`flex-grow`和剩余空间来决定项目的增长量。具有更大`flex-grow`值的项目将获得更多的增长空间。
   - 如果剩余空间不足以满足所有项目的需求，则根据项目的`flex-shrink`属性缩小项目的大小。具有较大`flex-shrink`值的项目将被缩小得更多。
4. 对齐方式：
   - 容器的`justify-content`属性用于控制主轴上的对齐方式，如居中、起始对齐、末尾对齐等。
   - 容器的`align-items`属性用于控制交叉轴上的对齐方式，如居中、起始对齐、末尾对齐等。
   - 项目的`align-self`属性可以覆盖容器的`align-items`属性，让单个项目具有不同的交叉轴对齐方式。

通过这些计算规则和属性，Flexbox布局能够动态地适应容器和项目的变化，实现灵活的页面布局效果。它提供了一种简洁而强大的方式来创建响应式的布局，并减少了对传统盒模型的依赖。



## 35.什么是 rem 布局？

rem（Root EM）布局是一种相对于根元素（HTML 根元素）字体大小的布局单位。在rem布局中，元素的尺寸和间距都使用rem作为单位进行定义。

rem布局的基本原理是通过设置根元素的字体大小来确定rem单位的实际像素值。默认情况下，根元素的字体大小是16px。因此，如果将一个元素的宽度设置为2rem，它实际上会等于32px（2 * 16px）。

与其他布局单位（如像素、百分比）相比，REM布局的主要优势在于其响应式特性。由于rem相对于根元素的字体大小进行计算，可以通过调整根元素的字体大小来实现整个页面的缩放和适配。

通过结合媒体查询和rem单位，可以实现不同屏幕大小下的自适应布局。例如，在较小的屏幕上，可以通过媒体查询将根元素的字体大小调整为较小的值，从而使页面的所有元素相对缩小，以适应较小的视口。

要注意的是，rem布局需要合理地设置根元素的字体大小，并结合CSS预处理器或JavaScript动态计算来实现更灵活的响应式布局。另外，为了避免过多的REM单位计算，可以使用REM布局的同时结合使用媒体查询和百分比、自动布局等技术来实现更好的效果。





## 36.less 和 scss 有什么区别？

Less和SCSS是两种不同的CSS预处理器，它们在语法和功能上有一些区别。

1. 语法：Less使用类似于CSS的语法，而SCSS使用类似于Sass的语法。Less的语法比较简洁，类似于普通的CSS，而SCSS的语法更加强大和灵活，支持嵌套规则、变量、混合器等高级特性。
2. 兼容性：由于Less的语法与CSS非常接近，所以可以直接在CSS文件中使用Less代码，无需进行转换。而SCSS需要通过编译器将SCSS代码转换为CSS代码才能在浏览器中使用。
3. 生态系统：SCSS相对来说有着更为广泛和成熟的生态系统，因为它是基于Sass语法发展而来的，并且被广泛应用于许多前端框架和工具中。Less虽然也有一定的用户和社区支持，但相对较少。

总体而言，Less和SCSS都是用于增强CSS编程体验的工具，它们提供了变量、嵌套规则、混合器等功能，使得CSS的编写更加简洁和可维护。选择使用哪种预处理器取决于个人偏好和项目需求。



## 37. :: before 和 :: after 中双冒号和单冒号的区别？

1. 单冒号(:)：单冒号用于伪类选择器，表示选中元素的特定状态或位置。例如，`:hover`表示鼠标悬停在元素上时的状态，`:first-child`表示元素是父元素的第一个子元素。
2. 双冒号(::)：双冒号用于伪元素选择器，表示选中元素的某个具体部分。伪元素是通过CSS生成的虚拟元素，它们不在DOM中实际存在。例如，`::before`用于在元素内容之前插入生成的内容，`::after`用于在元素内容之后插入生成的内容。

区别总结：

- 单冒号(:)用于伪类选择器，表示选中元素的状态或位置。
- 双冒号(::)用于伪元素选择器，表示选中元素的具体部分。

需要注意的是，根据CSS规范，对于伪元素选择器，双冒号(::)是推荐的写法，但为了向后兼容性，单冒号(:)也被接受，并且在某些旧版本的浏览器中仍然有效。因此，为了确保最佳的兼容性，建议在使用伪元素选择器时使用双冒号(::)的写法。



## 38.CSS3新增伪类，以及伪元素？

CSS3引入了一些新的伪类和伪元素，为开发者提供更丰富的选择来选择和样式化文档中的元素。下面是一些CSS3新增的常见伪类和伪元素：

伪类：

1. **:nth-child(n)**：选择父元素的第n个子元素。
2. :nth-last-child(n)：选择父元素的倒数第n个子元素。
3. **:nth-of-type(n)**：选择父元素的同类型元素中的第n个。
4. :nth-last-of-type(n)：选择父元素的同类型元素中的倒数第n个。
5. **:not(selector)**：选择不符合给定选择器的元素。

伪元素：

1. **::before**：在选定元素内容之前插入生成的内容。
2. **::after**：在选定元素内容之后插入生成的内容。
3. ::first-line：选择元素的第一行文本。
4. ::first-letter：选择元素的第一个字母或字符。
5. **::selection**：选择用户选择的文本部分。

这只是一些CSS3新增的伪类和伪元素的示例，还有其他更多可用的伪类和伪元素。它们为开发者提供了更灵活的选择和样式化元素的能力，使得页面设计和交互更加丰富和吸引人。请注意，不同的伪类和伪元素可能具有不同的浏览器兼容性，请在使用时查阅相关文档以确保兼容性。



## 39.响应式布局实现方案？

实现响应式布局的方案有多种，以下是一些常用的方法：

1. **使用CSS媒体查询（Media Queries）**：通过在CSS中使用媒体查询，可以根据不同的设备或屏幕尺寸应用不同的样式。可以针对不同的屏幕宽度、高度、方向等条件编写不同的样式规则，从而适配不同的设备。
2. **流式布局（Fluid Layout）**：流式布局是指使用相对单位（如百分比）来定义元素的尺寸，使得页面中的元素能够根据可用空间自动调整大小。这样，无论用户使用的是大屏幕还是小屏幕设备，页面都能够适应不同的视口大小。
3. **弹性盒子布局（Flexbox）**：弹性盒子布局是一种灵活的布局模型，可以让容器中的元素自动调整大小和位置，以适应不同的屏幕尺寸。通过设置容器的属性和子元素的属性，可以实现自适应的响应式布局。
4. **栅格系统（Grid System）**：栅格系统是将页面划分为几个列和行的网格，通过将元素放置在特定的列和行上，实现响应式的布局。常见的栅格系统包括Bootstrap等前端框架提供的栅格系统。
5. **CSS Flexbox和Grid结合使用**：结合使用CSS Flexbox和Grid可以实现更复杂、更精细的响应式布局。Flexbox用于管理元素在一维方向上的布局，而Grid用于管理元素在二维方向上的布局，两者结合可以实现更强大的布局控制。



## 40.link 标签和 @import 的区别？

`link>` 标签和 `@import` 标签在网页开发中用于引入外部资源，但它们有一些重要的区别。

1. **语法位置：** `<link>` 标签是 HTML 的一部分，而 `@import` 是 CSS 的一部分。因此，`<link>` 标签可以在 HTML 文档的头部（`<head>`）中直接使用，而 `@import` 只能在 CSS 文件中使用。
2. **加载顺序：** `<link>` 标签会并行加载外部资源，不会阻塞页面的渲染过程，从而提高页面的加载速度。而 `@import` 会按照顺序逐个加载样式表，如果前面的样式表文件较大，后面的样式表需要等待。这可能会导致页面加载时间过长。
3. **兼容性：** `<link>` 标签具有更好的浏览器兼容性和广泛的支持，而 `@import` 在一些旧版本的浏览器中可能不被支持。
4. **媒体类型：** `<link>` 标签可以通过 `media` 属性指定加载外部资源的媒体类型，使得不同的设备可以加载不同的样式表。而 `@import` 无法指定媒体类型，只能应用于整个样式表。

综上所述，一般情况下推荐使用 `<link>` 标签来引入外部资源，特别是在引入样式表时。`@import` 标签主要用于在 CSS 文件内部引入其他样式表，或者在某些特殊情况下需要控制样式表加载顺序的情况下使用。



## 41.transition和 animation 的区别？

Transition 和 Animation 是两种在 CSS 中用于实现元素动画效果的属性。

1. Transition（过渡）：Transition 用于在元素的某个属性发生变化时，提供一个平滑的过渡效果。它可以定义属性从一个状态到另一个状态的变化过程，并可以控制过渡的时间、延迟和速度曲线。**Transition 适用于单个属性的变化，比如颜色、尺寸、位置等**。当触发条件满足时，属性会以过渡的方式从初始值过渡到最终值。

例如，以下代码将使一个按钮在鼠标悬停时，背景颜色从蓝色平滑过渡到红色：

```
button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}
```

2. Animation（动画）：Animation 允许开发者创建更复杂和多步骤的动画效果。通过定义关键帧（Keyframes），可以指定元素在不同时间点的样式，然后使用 Animation 属性来控制动画的播放时间、重复次数和速度曲线。**相比于 Transition，Animation 更加灵活，可以实现更复杂、多属性、多阶段的动画效果。**

以下是一个使用 Animation 实现旋转动画的示例：

```
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
```

上述代码会使一个 `<div>` 元素不断地以 2 秒的持续时间无限循环地从初始状态旋转到 360 度。

总结：

- Transition 用于单个属性的平滑过渡效果，适合简单的变化。
- Animation 可以创建复杂的多步骤动画，适合需要更高级控制和定制的动画效果。



## 42.说一下块元素、行元素、置换元素

当谈到 HTML 和 CSS 中的元素时，有几个重要的概念需要了解：块元素、行元素和置换元素。

1. 块元素（Block Elements）：
   - 块元素是指在文档流中占据整个可用宽度的元素。
   - 每个块元素都会从新的一行开始，并且会在其前后创建额外的空间。
   - 常见的块级元素包括 `<div>`, `<p>`, `<h1>` 到 `<h6>`, `<ul>`, `<li>` 等。
2. 行元素（Inline Elements）：
   - 行元素（也称为内联元素）不会打断文本流，它们只占据它们所包含内容的宽度。
   - 行元素在同一行上排列，并尽可能地紧凑显示。
   - 常见的行级元素包括 `<span>`, `<a>`, `<strong>`, `<em>`, `<img>` 等。
3. 置换元素（Replaced Elements）：
   - 置换元素是一种特殊类型的元素，其内容通常由外部资源提供，如图像、视频或表单元素的值。
   - 置换元素的显示通常不受 CSS 的控制，浏览器会根据其特性自行渲染。
   - 常见的置换元素包括 `<img>`, `<input>`, `<video>`, `<iframe>` 等。

需要注意的是，元素可以同时具有块级和行内特性，这取决于如何应用 CSS 样式。通过使用 CSS 的 `display` 属性，我们可以改变元素的显示类型，使其表现为块级或行内元素。

例如，可以将块级元素设置为行内元素：

```css
div {
  display: inline;
}
```

同样地，也可以将行内元素设置为块级元素：

```css
span {
  display: block;
}
```

总结一下，块元素在页面中占据整个可用宽度，每个元素都从新的一行开始，而行元素只占据其内容所需的宽度，并在同一行上紧凑显示。置换元素是一种特殊类型的元素，其显示通常不受 CSS 控制。



## 43.多行元素的文本省略号如何实现？

在 CSS 中，你可以通过使用 `text-overflow` 属性和配合其他相关属性来实现多行元素的文本省略号。

要实现多行元素的文本省略号，你需要按照以下步骤进行操作：

1. 设置元素的高度和行数：
   - 首先，为多行元素（例如 `<div>`）设置一个固定的高度，并确保它具有一定的限制。例如，可以使用 `height` 或 `max-height` 属性来定义高度。
2. 设置文本溢出和截断：
   - 使用 `overflow: hidden;` 来隐藏超出容器高度的文本。
3. 设置文本流和换行方式：
   - 使用 `display: -webkit-box;` 和 `-webkit-line-clamp` 属性来控制文本的显示方式。
   - 使用 `-webkit-box-orient: vertical;` 属性来指定文本流向垂直方向。
   - 使用 `-webkit-line-clamp` 属性来指定要显示的文本行数。
4. 添加省略号样式：
   - 使用 `text-overflow: ellipsis;` 属性来添加省略号。

下面是一个示例的 CSS 代码，演示如何实现多行元素的文本省略号：

```
.container {
  height: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示三行文本 */
  text-overflow: ellipsis;
}
```

在上面的示例中，`.container` 是一个具有固定高度的容器元素，通过设置 `-webkit-line-clamp: 3;` 来指定显示三行文本。如果文本超过三行，则后续内容将被省略，并在结尾处添加省略号。

需要注意的是，这种方法主要适用于使用WebKit内核（例如 Chrome 和 Safari）的浏览器。对于其他浏览器，可能需要使用不同的前缀或其他属性来实现类似的效果。



## 44. 如何在CSS中定义变量？哪些场景中使用了？

在CSS中，可以使用CSS变量来定义和使用变量。CSS变量又被称为自定义属性（Custom Properties），通过使用`--`前缀来定义，并使用`var()`函数进行引用。

以下是定义CSS变量的语法：

```css
selector {
  --variable-name: value;
}
```

使用CSS变量的示例：

```css
body {
  --primary-color: #ff0000;
}

h1 {
  color: var(--primary-color);
}
```

上述示例中，定义了一个名为`--primary-color`的CSS变量，并将值设置为`#ff0000`。然后，我们在`h1`选择器中使用了这个变量作为文字颜色的值。

CSS变量非常有用，特别是在以下场景下：

1. 主题切换：通过定义不同的CSS变量，可以轻松地更改整个网站的主题颜色。
2. 响应式设计：可以使用CSS变量来定义与屏幕尺寸相关的样式，从而实现响应式布局。
3. 代码重用：可以使用CSS变量来定义常用的样式值，以便在整个样式表中重复使用。
4. 动态样式：通过JavaScript动态修改CSS变量的值，可以实现动态样式效果。

总之，CSS变量提供了一种灵活和可重用的方式来定义样式值，并且可以在不同的场景中使用。