前端

服务端

计算机基础

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，常用于 Web 开发中。它通过定义样式规则来控制 HTML 元素的外观和布局，使得开发人员可以更加灵活地控制页面的样式和排版。

CSS 的主要特点包括：

分离样式和内容：CSS 可以将样式信息从 HTML 内容中分离出来，使得样式和内容的管理更加清晰和易于维护；
层叠样式：CSS 中的样式规则是可以层叠的，即可以通过多个规则来定义相同的样式，最终的样式由所有规则的组合决定；
继承样式：CSS 中的某些样式可以被子元素继承，使得样式的传递更加自然和方便；
支持多种选择器：CSS 支持多种选择器来选择不同的 HTML 元素，使得样式的应用更加灵活和精确；
支持多种样式属性：CSS 支持多种样式属性，如文本样式、盒模型、背景、边框、定位、动画等，使得开发人员可以控制元素的各个方面。
CSS 在 Web 开发中扮演着非常重要的角色，通过使用 CSS，开发人员可以为网页添加各种样式和布局，使得网页更加美观和易于使用。同时，CSS 也是一门非常灵活和强大的技术，可以用于许多不同的应用场景，如响应式设计、移动应用开发、桌面应用开发等。

在移动端Web开发中，我们有很多方法可以实现画一条0.5px的线。以下是一些典型的方法：

1. **使用 viewport**

   可以将页面的视口设置为设备宽度的一般，然后布局以这个新的视口宽度为基准进行。当设置 `border-width: 1px` 时，其实际显示出来结果就是物理像素的0.5px。

   ```html
   <meta name="viewport" content="width=device-width,initial-scale=.5, maximum-scale=.5, user-scalable=no">
   <div style="border-bottom: 1px solid #ccc"></div>
   ```
2. **使用 CSS transform 属性**

   这种方法通常适用于大部分场景，主要思路是添加一个 1px 的 border，然后通过 scaleY(.5)/scaleX(.5) 进行缩放。需要注意的是，在利用这种方法画线时，应该以伪元素进行缩放，避免影响容器本身的布局。

   ```html
   <div class="line"></div>
   ```
   ```css
   .line {
       position: relative;
       height: 20px;
   }

   .line::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       border-bottom: 1px solid #ccc;
       transform: scaleY(.5);
   }
   ```
3. **使用 SVG.** 

   SVG 是一种基于 XML 语法的图像格式，全部是由代码生成，所以可以精确到0.5px。具体实现就是改变SVG中的 `stroke-width`属性。

   ```html
   <svg width="100%" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <line x1="0" y1="0" x2="375" y2="0" stroke="#000" stroke-width="0.5" />
   </svg>
   ```
4. **使用 Canvas**

   canvas 的API为我们提供了更底层的画图能力，同样能实现这个需要。

   ```html
   <canvas id="canvas"></canvas>

   <script>
     var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(300, 0);
     ctx.lineWidth = 0.5;
     ctx.stroke();
   </script>
   ```


移动端Web如何画一条 0.5px 的线

CSS中的`display`属性非常关键，主责决定一个元素如何被展示在页面上。以下是几个常见的`display`属性值以及它们的作用：

1. `none`：此值使元素不显示，并从文档布局中完全移除，就好像它从未存在一样，不占据任何空间。

    **例子**：当你想隐藏一些内容，而不影响页面布局时，可以使用`display: none;`。

    ```css
    .hidden-element {
      display: none;
    }
    ```

2. `block`：它将元素显示为块级元素，这意味着元素会新起一行显示，并且尽可能占满父元素的宽度。

    **例子**：默认的`<div>`、`<p>`、`<h1>`到`<h6>`等都是块级元素。

    ```css
    .block-element {
      display: block;
    }
    ```

3. `inline`：元素不会新起一行，其宽度仅由内容决定，多个`inline`元素可以在同一行显示。

    **例子**：`<span>`、`<a>`、`<strong>`等元素默认是内联元素。

    ```css
    .inline-element {
      display: inline;
    }
    ```

4. `inline-block`：结合了`inline`和`block`的特点，让元素既可以在同一行显示，同时又可以设置宽高。

    **例子**：适用于需要在同一行显示的按钮或菜单项，而且还需要设定尺寸。

    ```css
    .menu-item {
      display: inline-block;
    }
    ```

5. `flex`：将元素设置为弹性容器，其子元素会成为弹性项目。这个值允许使用`flexbox`布局，可以提供更复杂的布局结构和对齐方式。

    **例子**：可以创建一个水平或垂直的导航栏，其中的项可以均匀地分布空间或对齐。

    ```css
    .flex-container {
      display: flex;
    }
    ```

6. `grid`：启用网格布局，其中的子元素可以放置在定义的行和列网格中。

    **例子**：当你要创建一个复杂的页面布局，例如一个有多列和明确对齐方式的仪表盘界面。

    ```css
    .grid-container {
      display: grid;
    }
    ```

7. `table`：类似于HTML的`<table>`，将元素表现为表格相关的元素，如`<table>`,`<tr>`, `<td>`等。

    **例子**：当你需要使用CSS而不是HTML标签来创建表格布局时。

    ```css
    .table-like {
      display: table;
    }
    ```

这些只是`display`属性中的几个值，实际上还有很多其他值，如`list-item`、`table-row`、`table-cell`等，它们可以用于更专门的布局需求。不同的`display`设置对布局、文档流和元素间的关系有着直接的影响。

display有哪些值？说明他们的作用？

### px

`px` 是一个固定的像素单位，不依赖于父级元素的字体大小。例如，如果你设置一个元素的字体大小为14px，不论其父级元素的字体大小是多少，这个元素的字体大小都将是14px。

### em

`em` 是一个相对单位，代表其父级元素的字体大小。例如，如果父级元素的字体大小是16px，那么1em = 16px，2em=32px，以此类推。

### rem

`rem` 也是一个相对单位，但与em不同的是，它是相对于根元素（html）的字体大小，而不是父元素。这意味着如果你的HTML元素的字体大小是20px，那么1rem将等于20px，不论这个元素在DOM树中的位置。

### vw

`vw` 与vh类似，但它是相对于视窗宽度的单位。1vw等于视窗宽度的1%。

总的来说，em和rem都是相对单位，可以提供更好的可伸缩性和响应能力。px则是固定单位，简单直接。vh和vw是依赖于视窗大小的相对单位，非常适合于创建响应式设计。

### vh

`vh` 是一个相对于视窗高度的单位。1vh等于视窗高度的1%。例如，如果视窗高度是800px，那么1vh就等于8px。这种单位在创建全占满视窗的块级元素时非常方便，无论设备或浏览器窗口大小如何改变，元素总能占满整个视窗。


说说em/px/rem/vh/vw区别

> 什么是BFC

BFC (Block Formatting Context) 是 Web 页面的可视化 CSS 渲染的一部分，它是块级盒布局发生的区域，也是浮动元素与其他元素的交互限定区域。

> 如何创建 BFC

在 CSS 中，以下几种方式可以创建 BFC：

1. 根元素或其它包含它的元素
2. 浮动元素 (元素的 `float` 不是 `none`)
3. 绝对定位元素（元素的 `position` 为 `absolute` 或 `fixed`）
4. 内联块（元素的 `display` 为 `inline-block`）
5. 表格单元格 (元素的 `display` 为 `table-cell`，HTML 表格单元格默认为 `table-cell`)
6. 表格标题（元素的 `display` 为 `table-caption`，HTML 表格标题默认为 `table-caption`）
7. 匿名表格单元格元素（元素的 `display` 为 `table`、`table-row`、`table-row-group`、`table-header-group`、`table-footer-group` 或 `table-cell`且是匿名的）
8. `overflow` 值不为 `visible` 的块级元素
9. 弹性元素（display 为 `flex` 或 `inline-flex` 元素的直接子元素）
10. 网格元素（display 为 `grid` 或 `inline-grid` 元素的直接子元素）
11. `contain` 值为 `layout`、`paint` 或 `size` 的元素
12. 多列容器（元素的 `column-count` 或 `column-width` 不为 `auto`，包括 `column-count` 为 `1`）
13. `column-span` 为 `all` 的元素总是会创建一个新的 BFC，这样使得元素能跨越多列。
14.

> BFC 有哪些规则

BFC遵循一些特殊的规则，主要包括：

1. **内部的 Box 会在垂直方向一个接一个地放置。**也就是说，在 BFC 中，块级盒子都是紧贴在一起的。垂直方向的距离由 `margin` 决定，两个相邻 Box 的 margin 会发生重叠。
2. **Box 垂直方向的距离由 margin 决定**。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3. **每个元素的左边，与包含块（Containing Block）的左边相接触**。这句话的意思是：在 BFC 中，每一个 Box 的左边都贴紧包含块的左边。
4. **BFC的区域不会与 float box 重叠**。BFC 是浮动元素和其它元素交互的界限，BFC 与浮动盒子不会重叠。
5. **计算 BFC 的高度时，浮动元素也参与计算**。也就是说，如果 BFC 内部有浮动的元素，那么 BFC 的高度会扩大，以包含这个浮动元素，也就是说 BFC 是可以包含浮动元素的。
6.

> BFC 的应用场景

通过掌握 BFC，我们可以解决一些常见的 CSS 布局问题，如以下几种场景：

**避免外边距折叠**

在 BFC 中，处于同一 BFC 中的两个块元素的垂直外边距会发生折叠。如果你不想让这两个外边距折叠，你可以将元素放在不同的 BFC 中。

**清除浮动**

由于 BFC 可以包含浮动，我们可以用 BFC 来清除内部浮动，避免造成父元素高度塌陷。

当父元素内部的子元素全部浮动后，它们脱离了正常的文档流，父元素就会失去高度，这个现象通常被称为高度塌陷。如果把父元素变为一个 BFC，那么它可以“感知”到浮动元素，从而包裹住浮动元素。这是因为 BFC 在生成时，会计算内部的浮动元素。

为了将父元素变为一个 BFC，我们通常会使用 overflow 属性，如：`overflow:auto` 或者 `overflow:hidden`。

```css
.container {
  overflow: auto;
}
```

### 制作自适应两栏布局

BFC 也可以用于构建布局。比如，常见的两栏布局，左栏固定宽度，右栏自适应：

HTML 结构如下：

```html
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
```

CSS 样式如下：

```css
.container {
  width: 100%;
}
.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  overflow: hidden;
  height: 200px;
  background-color: green;
}
```

在这个例子中，left 元素设置了浮动，然后 right 元素设置 overflow:hidden，这样 right 就基于 BFC，从而填充剩下的空间。

综上，BFC 在处理一些布局问题和元素间的关系时非常有用，它是 CSS 中的一个重要概念，理解和掌握它可以帮助我们更好地应对布局难题。


什么是BFC吗？BFC有哪些使用场景？

弹性盒布局模型，通常称为Flexbox，是CSS3中的一种先进布局方式，旨在提供一种更有效的方式来布置、对齐和分配容器内项目的空间，即使它们的尺寸是未知或者是动态变化的。Flexbox布局给予了容器能够扩展项目以填充可用空间，或者收缩它们以防止溢出的能力。

### Flexbox的主要特点：

- **灵活性**：Flexbox允许项目的宽度和高度可以根据容器的空间动态伸缩。
- **方向无关性**：与传统的布局（如块布局，基于行，或内联布局，基于列）不同，Flexbox的方向可以是水平的或垂直的，这意味着它不受页面流的限制。
- **容器和项目的区别**：在Flexbox中存在两种类型的元素：容器（flex容器）和项目（flex项目）。容器用来定义一个flex环境并包含一些布局属性，项目则是容器的子元素，可以使用不同的属性来控制其自身的排版。
- **对齐**：可以轻松地在水平或垂直方向上对齐项目，这在以前的布局模型（如浮动或定位）中通常需要额外的工作。
- **空间分配**：当项目占用的空间小于容器的时候，可以控制多余空间的分配方式，或者当空间不足时，控制如何收缩项目。

### 例子：

假设我们有一个导航菜单，我们希望菜单项在容器内均匀分布，并且在不同屏幕尺寸上都能保持良好的布局。使用Flexbox，我们可以这样来定义容器和项目：

```css
/* Flex Container */
.nav-menu {
  display: flex;
  justify-content: space-between; /* 分散对齐子项 */
}

/* Flex Items */
.nav-item {
  flex-grow: 1; /* 允许子项根据需要占据空间 */
  text-align: center; /* 文本居中对齐 */
}
```

在HTML中，我们的导航菜单可能是这样的：

```html
<nav class="nav-menu">
  <a class="nav-item" href="#">首页</a>
  <a class="nav-item" href="#">关于我们</a>
  <a class="nav-item" href="#">服务</a>
  <a class="nav-item" href="#">联系方式</a>
</nav>
```

在上述示例中，`.nav-menu`是一个flex容器，`.nav-item`是其子项，也就是flex项目。通过对`.nav-menu`使用`display: flex;`属性，我们定义了一个弹性容器，并且使用`justify-content: space-between;`来确保`.nav-item`在容器内均匀分布。每个`.nav-item`都被设置了`flex-grow: 1;`属性，这意味着所有的子项都会根据可用空间进行伸缩，来占据容器的空间。这样，不管屏幕大小如何变化，菜单项都能保持均匀的布局。

Flexbox的这种灵活性和易用性，使得它成为创建响应式布局和现代网页设计必不可少的工具之一。

什么是弹性盒布局模型？

在 CSS (层叠样式表) 中，选择器的权重由其特定性（specificity）确定。具有更高特定性的样式规则将覆盖较低特定期的规则。以下就是计算特定性的方法：

1. 内联样式（Inline Styles）：在 HTML 元素内部使用 `style` 属性定义的样式。例如 `<div style="color: red;">` 的权重是 `1000`。
2. ID 选择器：如 `#content`（权重为 `0100`）。
3. 类选择器、属性选择器、伪类选择器：如 `.class`, `[type="text"]`, `:hover`（权重为 `0010`）。
4. 元素选择器、伪元素选择器：如 `div`, `p`, `::before` （权重为 `0001`）。
5. 特殊选择器：`*`、`+`、`>`、`~` 这些组合选择器不增加权重。
6. 对于 `!important` 属性权重最高，出现在样式属性值后,如 `color: red !important;` 。

计算权重时，各类选择器的数量是独立计算的，比较权重时，会按照四个层级（四个数字）进行逐级比较，权重高的样式优先生效。例如, ID 选择器的权重更高，所以 `#id p`（一个 ID 和一个元素，权重为 `0101`）会覆盖 `.class .class .class`（三个类，权重为 `0030`）的样式。可理解各部分权重为 四个 "十进制位"，高位权重大于低位。

> 请注意：权重只是决定 CSS 样式冲突的一个因素，还应考虑源代码的顺序和继承。


css 选择器的权重计算方式

> 什么是伪类和伪元素

**伪类**

伪类（Pseudo-classes）是用来选择 DOM 树之外的信息，或者是无法被常规 CSS 选择器选择的信息。这些可能是元素的特殊状态，或者是根据元素的结构信息（例如：第一个子元素）而选择的元素。伪类使用冒号 `:`来表达，例如：`:hover`, `:first-child`, `:nth-child(3)`等。

一些常见的伪类包括：

- `:hover`：鼠标悬停在元素上的状态
- `:active`：元素被激活的状态，如被鼠标按下
- `:focus`：元素获得焦点的状态
- `:first-child`：选中父元素的第一个子元素
- `:last-child`：选中父元素的最后一个子元素
- `:nth-child(n)`：选中父元素的第 n 个子元素

**伪元素**

伪元素（Pseudo-elements）允许你选择并样式化元素的一部分。它们允许你向元素添加特殊效果，或者插入内容到文档中的某个位置。伪元素使用两个冒号 `::`来表达，例如：`::after`, `::before`, `::first-letter`等。

一些常见的伪元素包括：

- `::before`：在元素内容的前面插入内容
- `::after`：在元素内容的后面插入内容
- `::first-letter`：选中块级元素的第一行的第一个字母
- `::first-line`：选中块级元素的第一行
- `::selection`：选中用户选中的元素部分

> 伪类和伪元素的区别

1. **定义方面**：伪类是对元素的特定状态进行选取，而伪元素则是创建出DOM树中不存在的元素。
2. **使用规则方面**：伪类使用一个冒号 `:`，而伪元素使用两个冒号 `::`。
3. **作用对象方面**：伪类通常作用在原有元素上，而伪元素是创建新的虚拟元素插入DOM树。
4. **数量限制方面**：在一个选择器中可以使用多个伪类，而伪元素则限制为一个。

> 总结

伪类和伪元素都是特殊的选择器，它们的作用是选取那些不能通过普通 CSS 选择器选取到的元素或元素的某個狀態。

伪类主要是用来基于元素的状态或根据结构来选择元素，而伪元素则是用来选取元素的某个特定部分。


CSS面试题手册