用JavaScript实现猜数游戏并逐行解释代码含义

标：

实现了一个简单的“猜数字”游戏，用户输入猜测的数字并获得反馈，直到猜中或用完机会。页面上有简洁的用户界面设计和一些视觉效果，比如花瓣动画和放大显示用户输入。游戏的重置和猜测逻辑通过 JavaScript 实现。

效果图：

?代码

<!DOCTYPE html>

<head>

<title>猜数字游戏</title>

<style>

body { font-family: Arial, sans-serif; overflow: hidden; }

p {

font-size: 20px; /* 将所有 p 标签的字体大小设置为 18px */

color: blue;

}

.result { margin-top: 20px; }

.history { margin-top: 10px; }

#guessInput {

width: 300px;

height: 25px; /* 指定输入框的高度为 40px */

padding: 10px;

font-size: 16px;

}

.chart { margin-top: 20px; position: relative; height: 30px; background: #ddd6d6; }

.bar { position: absolute; height: 30px; background: rgb(19, 9, 202); }

button { padding: 10px; font-size: 16px; }

.celebration {

display: none;

font-size: 24px;

color: green;

position: absolute;

white-space: nowrap;

}

/* 花瓣样式 */

.petal {

position: absolute;

width: 10px;

height: 10px;

background-color: pink;

border-radius: 50%;

opacity: 0.8;

animation: fall linear infinite;

}

/* 花瓣飘落动画 */

@keyframes fall {

0% {

transform: translateY(-100vh) rotate(0deg);

opacity: 1;

}

100% {

transform: translateY(100vh) rotate(360deg);

opacity: 0;

}

/* 放大显示样式 */

.input-container {

position: relative;

display: inline-block;

margin-top: 20px;

}

.magnified-display {

position: absolute;

top: -40px;

left: 10px;

font-size: 30px;

color: blue;

background-color: #f0f0f0;

padding: 5px 10px;

border-radius: 5px;

border: 1px solid #ccc;

z-index: 100;

display: none; /* Initially hidden */

}

</style>

</head>

<body>

<h1>猜数字游戏</h1>

<p>我们选择了一个 1 到 <span id="maxValueDisplay">1000</span> 之间的数字。你有 <span id="maxAttemptsDisplay">40</span> 次机会来猜出这个数字。</p>

</div>

<div class="celebration" id="celebration">请开始游戏！！！</div>

<br>

<button onclick="makeGuess()">我猜测的对吗？</button>

let maxValue=100;

let maxAttempts=Math.ceil(Math.log2(maxValue))-1;

let randomNumber=generateRandomNumber();

let attempts=0;

const history=[];

console.log(randomNumber);

document.getElementById('maxValueDisplay').textContent=maxValue;

document.getElementById('maxAttemptsDisplay').textContent=maxAttempts;

document.getElementById('guessInput').max=maxValue;

function generateRandomNumber() {

return Math.floor(Math.random() * maxValue) + 1;

}

function makeGuess() {

const guessInput=document.getElementById('guessInput');

const guess=Number(guessInput.value);

const result=document.getElementById('result');

const historyDiv=document.getElementById('history');

const chart=document.getElementById('chart');

const celebration=document.getElementById('celebration');

let remains=maxAttempts-attempts;

if (!guess || guess < 1 || guess > maxValue) {

result.textContent=`请输入 1 到 ${maxValue} 之间的数字。`;

return;

}

attempts++;

remains--;

history.push(guess);

historyDiv.textContent='你之前的猜测: ' + history.join(', ');

const bar=document.createElement('div');

bar.className='bar';

bar.style.width='5px';

bar.style.left=(guess / maxValue) * 100 + '%';

chart.appendChild(bar);

if (guess===randomNumber) {

result.textContent=' 恭喜！你猜对了！数字是 ' + randomNumber + '。';

result.style.color='green'; // 正确时，文本显示为绿色

celebration.textContent=' 恭喜！你猜对了！ ';

celebration.style.display='block';

createPetals(100); // 生成撒花效果

disableInput();

} else if (attempts >=maxAttempts) {

result.textContent='很遗憾，你用完了所有机会。数字是 ' + randomNumber + '。';

result.style.color='red'; // 用完机会，文本显示为红色

disableInput();

} else if (guess < randomNumber) {

result.textContent=`太低了！再试一次吧！还剩${remains}次机会！`;

result.style.color='red'; // 猜测太低，文本显示为红色

} else {

result.textContent=`太高了！再试一次吧！还剩${remains}次机会！`;

result.style.color='red'; // 猜测太高，文本显示为红色

}

guessInput.value='';

guessInput.focus();

}

function disableInput() {

document.getElementById('guessInput').disabled=true;

}

function resetGame() {

randomNumber=generateRandomNumber();

console.log(randomNumber);

attempts=0;

history.length=0;

document.getElementById('result').textContent='';

document.getElementById('history').textContent='';

document.getElementById('chart').innerHTML='';

document.getElementById('celebration').style.display='none';

document.getElementById('guessInput').disabled=false;

document.getElementById('guessInput').value='';

// 清除所有花瓣

const petals=document.querySelectorAll('.petal');

petals.forEach(petal=> petal.remove());

// 清除放大显示

document.getElementById('magnifiedDisplay').style.display='none';

}

function createPetals(count) {

for (let i=0; i < count; i++) {

const petal=document.createElement('div');

petal.className='petal';

petal.style.left=Math.random() * 100 + 'vw';

petal.style.animationDuration=2 + Math.random() * 3 + 's'; // 2 to 5 seconds

document.body.appendChild(petal);

// 清除花瓣

petal.addEventListener('animationend', ()=> {

petal.remove();

});

}

// 放大显示用户输入

const guessInput=document.getElementById('guessInput');

const magnifiedDisplay=document.getElementById('magnifiedDisplay');

guessInput.addEventListener('input', function() {

const inputValue=guessInput.value;

if (inputValue) {

magnifiedDisplay.textContent=inputValue;

magnifiedDisplay.style.display='block'; // Show the magnified display

} else {

magnifiedDisplay.style.display='none'; // Hide the display if input is empty

}

});

</script>

</body>

</html>

?代码详细解释

当然，我将逐行解释这段 HTML 和嵌入的 JavaScript 代码的含义：

```html

<!DOCTYPE html>

```

- `<!DOCTYPE html>`: 声明文档类型，指明这是一个 HTML5 文档。

- `<html lang="en">`: 开始 HTML 文档，并设置语言为英语。

```html

<head>

<title>猜数字游戏</title>

```

- `<head>`: 包含文档的元数据。

- `<meta charset="UTF-8">`: 定义文档的字符编码为 UTF-8。

- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: 设置视口，以确保页面在不同设备上有良好的显示效果。

- `<title>猜数字游戏</title>`: 为页面设置标题，在浏览器标签上显示。

```html

<style>

body { font-family: Arial, sans-serif; overflow: hidden; }

p {

font-size: 20px;

color: blue;

}

```

- `<style>`: 包含 CSS 样式。

- `body { font-family: Arial, sans-serif; overflow: hidden; }`: 将页面的字体设置为 Arial 或默认无衬线字体，并隐藏溢出的内容。

- `p { font-size: 20px; color: blue; }`: 设置所有段落的字体大小为 20 像素，颜色为蓝色。

```html

.result { margin-top: 20px; }

.history { margin-top: 10px; }

```

- `.result { margin-top: 20px; }`: 为类名 `result` 的元素设置顶部外边距为 20 像素。

- `.history { margin-top: 10px; }`: 为类名 `history` 的元素设置顶部外边距为 10 像素。

```html

#guessInput {

width: 300px;

height: 25px;

padding: 10px;

font-size: 16px;

}

```

- `#guessInput`: 针对 ID 为 `guessInput` 的元素，设置宽度为 300 像素，高度为 25 像素，内边距为 10 像素，字体大小为 16 像素。

```html

.chart { margin-top: 20px; position: relative; height: 30px; background: #ddd6d6; }

.bar { position: absolute; height: 30px; background: rgb(19, 9, 202); }

button { padding: 10px; font-size: 16px; }

```

- `.chart`: 针对类名为 `chart` 的元素，设置顶部外边距为 20 像素，相对定位，高度为 30 像素，背景颜色为灰色。

- `.bar`: 针对类名为 `bar` 的元素，设置绝对定位，高度为 30 像素，背景颜色为蓝色。

- `button { padding: 10px; font-size: 16px; }`: 为按钮设置内边距为 10 像素，字体大小为 16 像素。

```html

.celebration {

display: none;

font-size: 24px;

color: green;

position: absolute;

white-space: nowrap;

}

```

- `.celebration`: 针对类名为 `celebration` 的元素，设置初始不显示，字体大小为 24 像素，颜色为绿色，绝对定位，文本不换行。

```html

.petal {

position: absolute;

width: 10px;

height: 10px;

background-color: pink;

border-radius: 50%;

opacity: 0.8;

animation: fall linear infinite;

}

```

- `.petal`: 针对花瓣效果的样式，设置绝对定位，宽高为 10 像素，背景颜色为粉色，圆形（边框半径为 50%），不透明度为 0.8，使用 `fall` 动画。

```html

@keyframes fall {

0% {

transform: translateY(-100vh) rotate(0deg);

opacity: 1;

}

100% {

transform: translateY(100vh) rotate(360deg);

opacity: 0;

}

```

- `@keyframes fall`: 定义 `fall` 动画，从上到下移动，并旋转，最后消失。

```html

.input-container {

position: relative;

display: inline-block;

margin-top: 20px;

}

.magnified-display {

position: absolute;

top: -40px;

left: 10px;

font-size: 30px;

color: blue;

background-color: #f0f0f0;

padding: 5px 10px;

border-radius: 5px;

border: 1px solid #ccc;

z-index: 100;

display: none;

}

</style>

</head>

```

- `.input-container`: 针对输入框的容器，设置相对定位，内联块显示，顶部外边距为 20 像素。

- `.magnified-display`: 用于显示放大效果，绝对定位在输入框上方，字体大小为 30 像素，颜色为蓝色，背景为浅灰色，边框圆角，边框灰色，初始隐藏。

```html

<body>

<h1>猜数字游戏</h1>

<p>我们选择了一个 1 到 <span id="maxValueDisplay">1000</span> 之间的数字。你有 <span id="maxAttemptsDisplay">40</span> 次机会来猜出这个数字。</p>

```

- `<body>`: 开始文档的主体。

- `<h1>猜数字游戏</h1>`: 页面标题。

- `<p>我们选择了一个...`: 段落文本，介绍游戏，使用 `<span>` 显示最大值和最大尝试次数。

```html

</div>

```

- `<div class="input-container">`: 输入框的容器。

- `<input type="number"...>`: 数字输入框，最小值为 1，带有占位符。

- `<div id="magnifiedDisplay"...>`: 放大显示容器。

```html

<div class="celebration" id="celebration">请开始游戏！！！</div>

```

- `<div class="result"...>`: 显示结果的容器。

- `<div class="history"...>`: 显示历史猜测的容器。

- `<div class="chart"...>`: 显示猜测图表的容器。

- `<div class="celebration"...>`: 显示庆祝信息的容器，初始隐藏。

```html

<br>

<button onclick="makeGuess()">我猜测的对吗？</button>

```

- `<br>`: 换行。

- `<button onclick="resetGame()">重置</button>`: 重置按钮，点击时调用 `resetGame()` 函数。

- `<button onclick="makeGuess()">我猜测的对吗？</button>`: 猜测按钮，点击时调用 `makeGuess()` 函数。

```html

let maxValue=100;

let maxAttempts=Math.ceil(Math.log2(maxValue))-1;

let randomNumber=generateRandomNumber();

let attempts=0;

const history=[];

console.log(randomNumber);

```

- `<script>`: 开始 JavaScript 部分。

- `let maxValue=100;`: 设置最大值为 100。

- `let maxAttempts=Math.ceil(Math.log2(maxValue))-1;`: 计算最大尝试次数为对数减一。

- `let randomNumber=generateRandomNumber();`: 生成一个随机数。

- `let attempts=0;`: 初始化尝试次数。

- `const history=[];`: 存储猜测历史的数组。

- `console.log(randomNumber);`: 在控制台输出生成的随机数（用于调试）。

```javascript

document.getElementById('maxValueDisplay').textContent=maxValue;

document.getElementById('maxAttemptsDisplay').textContent=maxAttempts;

document.getElementById('guessInput').max=maxValue;

```

- `document.getElementById('maxValueDisplay').textContent=maxValue;`: 更新最大值显示。

- `document.getElementById('maxAttemptsDisplay').textContent=maxAttempts;`: 更新最大尝试次数显示。

- `document.getElementById('guessInput').max=maxValue;`: 设置输入框的最大值限制。

```javascript

function generateRandomNumber() {

return Math.floor(Math.random() * maxValue) + 1;

}

```

- `function generateRandomNumber() {...}`: 定义函数生成 1 到 `maxValue` 的随机数。

```javascript

function makeGuess() {

const guessInput=document.getElementById('guessInput');

const guess=Number(guessInput.value);

const result=document.getElementById('result');

const historyDiv=document.getElementById('history');

const chart=document.getElementById('chart');

const celebration=document.getElementById('celebration');

let remains=maxAttempts-attempts;

```

- `function makeGuess() {...}`: 定义函数处理用户的猜测。

- `const guessInput=document.getElementById('guessInput');`: 获取输入框元素。

- `const guess=Number(guessInput.value);`: 获取并转换用户输入为数字。

- `const result=document.getElementById('result');`: 获取结果显示元素。

- `const historyDiv=document.getElementById('history');`: 获取历史显示元素。

- `const chart=document.getElementById('chart');`: 获取图表显示元素。

- `const celebration=document.getElementById('celebration');`: 获取庆祝元素。

- `let remains=maxAttempts-attempts;`: 计算剩余尝试次数。

```javascript

if (!guess || guess < 1 || guess > maxValue) {

result.textContent=`请输入 1 到 ${maxValue} 之间的数字。`;

return;

}

```

- 检查输入是否合法，如果不合法则显示提示并返回。

```javascript

attempts++;

remains--;

history.push(guess);

historyDiv.textContent='你之前的猜测: ' + history.join(', ');

const bar=document.createElement('div');

bar.className='bar';

bar.style.width='5px';

bar.style.left=(guess / maxValue) * 100 + '%';

chart.appendChild(bar);

```

- 增加尝试次数，更新剩余次数。

- 将猜测加入历史并更新显示。

- 创建一个新的 `div` 元素作为图表的条形，设置位置和宽度，然后添加到图表中。

```javascript

if (guess===randomNumber) {

result.textContent=' 恭喜！你猜对了！数字是 ' + randomNumber + '。';

result.style.color='green';

celebration.textContent=' 恭喜！你猜对了！ ';

celebration.style.display='block';

createPetals(100);

disableInput();

} else if (attempts >=maxAttempts) {

result.textContent='很遗憾，你用完了所有机会。数字是 ' + randomNumber + '。';

result.style.color='red';

disableInput();

} else if (guess < randomNumber) {

result.textContent=`太低了！再试一次吧！还剩${remains}次机会！`;

result.style.color='red';

} else {

result.textContent=`太高了！再试一次吧！还剩${remains}次机会！`;

result.style.color='red';

}

```

- 如果猜对了：显示成功消息，改变颜色为绿色，显示庆祝信息，调用撒花功能，禁止进一步输入。

- 如果用完了尝试次数：显示失败消息，改变颜色为红色，禁止输入。

- 如果猜测太低或太高：显示相应的提示信息，并更新剩余次数。

```javascript

guessInput.value='';

guessInput.focus();

}

```

- 清空输入框并将焦点返回到输入框。

```javascript

function disableInput() {

document.getElementById('guessInput').disabled=true;

}

```

- 定义函数 `disableInput`，用于禁用输入框。

```javascript

function resetGame() {

randomNumber=generateRandomNumber();

console.log(randomNumber);

attempts=0;

history.length=0;

document.getElementById('result').textContent='';

document.getElementById('history').textContent='';

document.getElementById('chart').innerHTML='';

document.getElementById('celebration').style.display='none';

document.getElementById('guessInput').disabled=false;

document.getElementById('guessInput').value='';

```

- 定义函数 `resetGame`，用于重置游戏。

- 生成新的随机数，重置尝试次数，清空历史记录和显示内容，重新启用输入框。

```javascript

const petals=document.querySelectorAll('.petal');

petals.forEach(petal=> petal.remove());

document.getElementById('magnifiedDisplay').style.display='none';

}

```

- 移除所有花瓣元素。

- 隐藏放大显示。

```javascript

function createPetals(count) {

for (let i=0; i < count; i++) {

const petal=document.createElement('div');

petal.className='petal';

petal.style.left=Math.random() * 100 + 'vw';

petal.style.animationDuration=2 + Math.random() * 3 + 's'; // 2 to 5 seconds

document.body.appendChild(petal);

petal.addEventListener('animationend', ()=> {

petal.remove();

});

}

```

- 定义函数 `createPetals`，用于生成花瓣效果。

- 在屏幕上随机位置生成指定数量的花瓣，设置动画持续时间并添加到文档中。

- 监听动画结束事件，移除花瓣。

```javascript

const guessInput=document.getElementById('guessInput');

const magnifiedDisplay=document.getElementById('magnifiedDisplay');

guessInput.addEventListener('input', function() {

const inputValue=guessInput.value;

if (inputValue) {

magnifiedDisplay.textContent=inputValue;

magnifiedDisplay.style.display='block';

} else {

magnifiedDisplay.style.display='none';

}

});

</script>

</body>

</html>

```

- 获取输入框和放大显示元素。

- 添加输入事件监听器，当用户输入时，更新放大显示的内容并显示；如果输入为空，则隐藏放大显示。

这段代码实现了一个简单的“猜数字”游戏，用户输入猜测的数字并获得反馈，直到猜中或用完机会。页面上有简洁的用户界面设计和一些视觉效果，比如花瓣动画和放大显示用户输入。游戏的重置和猜测逻辑通过 JavaScript 实现。

我的文章可能还有不足之处，如有不同意见，请留言讨论。

++基础——文件逐行读取与字符匹配

技术背景
C++读取文件
C++字符串匹配
C++运行时间统计
总结概要
版权声明

技术背景

用惯了python，对其他语言就比较的生疏。但是python很多时候在性能上比较受局限，这里尝试通过C++来实现一个文件IO的功能，看看是否能够比python的表现更好一些。关于python的类似功能的实现，可以参考这一篇博客。

C++读取文件

首先我们构造一个txt文件用于测试，比如以下这个名为mindspore.txt的文件（之所以取这个名字，是因为最近在研究mindspore，因此最方便拿到的数据就是mindspore的借口api文档）：

MindSpore Python API
MindSpore Python API
mindspore
mindspore.common.initializer
mindspore.communication
mindspore.compression
mindspore.context
mindspore.dataset
mindspore.dataset.config
mindspore.dataset.text
mindspore.dataset.transforms
mindspore.dataset.vision
mindspore.explainer
mindspore.mindrecord
mindspore.nn
mindspore.numpy
mindspore.nn.probability
mindspore.ops
mindspore.profiler
mindspore.train
MindArmour Python API
mindarmour
mindarmour.adv_robustness.attacks
mindarmour.adv_robustness.defenses
mindarmour.adv_robustness.detectors
mindarmour.adv_robustness.evaluations
mindarmour.fuzz_testing
mindarmour.privacy.diff_privacy
mindarmour.privacy.evaluation
mindarmour.privacy.sup_privacy
mindarmour.utils
MindSpore Hub Python API
mindspore_hub
MindSpore Serving Python API
mindspore_serving
MindQuantum Python API
mindquantum

然后构造一个C++代码用于逐行读取这个文件，通过getline函数，将获取到的行字符串保存到strline中，并且每次读取一行都在屏幕上输出出来。由于这里使用的是while循环，因此采用index的方案设置了一个跳出循环的条件，只读取特定的行范围：

// iofile.cpp
#include <iostream>
#include <fstream>
#include <string>

int main()
{
    using namespace std;
    string filename="mindspore.txt";
    ifstream fin(filename.c_str());
    int index=0;
    string strline;
    while (getline(fin, strline) && index < 20)
    {
        cout << strline << endl;
        index ++;
    }
    fin.close();
    cout << "Done!\n";
    return 0;
}

在读取完毕后，记得使用close()将文件关闭。上述代码的执行结果如下：

dechin@ubuntu2004:~/projects/gitlab/dechin/$ g++ iofile.cpp 
dechin@ubuntu2004:~/projects/gitlab/dechin/$ ./a.out
MindSpore Python API
MindSpore Python API
mindspore
mindspore.common.initializer
mindspore.communication
mindspore.compression
mindspore.context
mindspore.dataset
mindspore.dataset.config
mindspore.dataset.text
mindspore.dataset.transforms
mindspore.dataset.vision
mindspore.explainer
mindspore.mindrecord
mindspore.nn
mindspore.numpy
mindspore.nn.probability
mindspore.ops
mindspore.profiler
mindspore.train
Done!

这里我们使用的g++版本为9.3.0：

dechin@ubuntu2004:~/projects/gitlab/dechin/$ g++ --version
g++ (Ubuntu 9.3.0-17ubuntu1~20.04) 9.3.0
Copyright (C) 2019 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

因为上述案例读取的是前20行的内容，那么在Linux下我们还可以通过head来查看前20行的文件内容：

dechin@ubuntu2004:~/projects/gitlab/dechin/$ head -n 20 mindspore.txt 
MindSpore Python API
MindSpore Python API
mindspore
mindspore.common.initializer
mindspore.communication
mindspore.compression
mindspore.context
mindspore.dataset
mindspore.dataset.config
mindspore.dataset.text
mindspore.dataset.transforms
mindspore.dataset.vision
mindspore.explainer
mindspore.mindrecord
mindspore.nn
mindspore.numpy
mindspore.nn.probability
mindspore.ops
mindspore.profiler
mindspore.train

经过对比发现两个结果是一致的。

C++字符串匹配

我们假象一个这样的测试案例，在上述的txt文本中，我们想把带有字符context的那一行标记出来，使其跟其他的行不一样。这时候就需要使用到C++的字符串匹配功能，其格式为string.find("context")，返回的是一个识别码，用于标记是否存在或者是存在的位置，如果字符不存在，则返回结果等价于string::npos。按照这个思路，我们定义一个布尔值，在检索过程中如果遇到context字符就输出1，否则输出0，具体的代码实现如下：

// iofile.cpp
#include <iostream>
#include <fstream>
#include <string>

int main()
{
    using namespace std;
    string filename="mindspore.txt";
    ifstream fin(filename.c_str());
    int index=0;
    string strline;
    while (getline(fin, strline) && index < 20)
    {
        bool exists=strline.find("context")==string::npos;
        cout << strline << '\t' << !exists << endl;
        index ++;
    }
    fin.close();
    cout << "Done!\n";
    return 0;
}

上述代码的执行结果如下所示：

dechin@ubuntu2004:~/projects/gitlab/dechin/$ g++ iofile.cpp && ./a.out
MindSpore Python API    0
MindSpore Python API    0
mindspore       0
mindspore.common.initializer    0
mindspore.communication 0
mindspore.compression   0
mindspore.context       1
mindspore.dataset       0
mindspore.dataset.config        0
mindspore.dataset.text  0
mindspore.dataset.transforms    0
mindspore.dataset.vision        0
mindspore.explainer     0
mindspore.mindrecord    0
mindspore.nn    0
mindspore.numpy 0
mindspore.nn.probability        0
mindspore.ops   0
mindspore.profiler      0
mindspore.train 0
Done!

我们可以注意到，在含有context的那一行的行末输出了一个1，其他行的行末输出的都是0.

C++运行时间统计

在python中我们常用的一个功能是导入time.time()来记录时间，然后计算两次时间之间的差值，就可以得到一个程序的精确运行时间。C++中有一个比较类似的用法是clock_t，这里为了方便测试，我们把上述用到的代码封装到一个reader函数内，然后在main函数中调用以及统计运行时间：

// iofile.cpp
#include <iostream>
#include <fstream>
#include <string>
#include <time.h>
using namespace std;
int reader()
{
    string filename="mindspore.txt";
    ifstream fin(filename.c_str());
    int index=0;
    string strline;
    while (getline(fin, strline) && index < 20)
    {
        bool exists=strline.find("context")==string::npos;
        cout << strline << '\t' << !exists << endl;
        index ++;
    }
    fin.close();
    cout << "Done!\n";
    return 0;
}
int main()
{
    clock_t start, end;
    start=clock();
    reader();
    end=clock();
    cout << "The time cost is: " << double(end-start)/CLOCKS_PER_SEC << "s" << endl;
}

上述代码的执行结果如下所示：

dechin@ubuntu2004:~/projects/gitlab/dechin/$ g++ iofile.cpp && ./a.out
MindSpore Python API    0
MindSpore Python API    0
mindspore       0
mindspore.common.initializer    0
mindspore.communication 0
mindspore.compression   0
mindspore.context       1
mindspore.dataset       0
mindspore.dataset.config        0
mindspore.dataset.text  0
mindspore.dataset.transforms    0
mindspore.dataset.vision        0
mindspore.explainer     0
mindspore.mindrecord    0
mindspore.nn    0
mindspore.numpy 0
mindspore.nn.probability        0
mindspore.ops   0
mindspore.profiler      0
mindspore.train 0
Done!
The time cost is: 0.000245s

输出的时间表示这个函数运行时间共计0.2ms。

总结概要

本文简单的介绍了C++中的三种基础操作：逐行读取文件内容、字符串匹配以及运行时间的统计，并且通过一个简单的范例来实现了这三种基本的功能。相比于python而言，C++的代码编写量肯定要多一些，但是考虑到C++可能带来的效率增益，我们也应当了解其基本的用法以及功能实现。

版权声明

本文首发链接为：https://www.cnblogs.com/dechinphy/p/cppio.html
作者ID：DechinPhy
更多原著文章请参考：https://www.cnblogs.com/dechinphy/
打赏专用链接：https://www.cnblogs.com/dechinphy/gallery/image/379634.html

SS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！

前面CSS写法104个知识从01-52点已经讲过了，在本篇文章我就不再重复了。具体如下：

《关于前端CSS写法104个知识点汇总（一）》

接下来开始进入正题：

53.position:fixed;在 android 下无效怎么处理？

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时，因为layoutviewport的宽度大于移动端屏幕
的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的
，所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为idealviewport，可以如下设置：

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

55.如何让去除 inline-block 元素间间距？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考：《去除 inline-block 元素间间距的 N 种方法》

56.overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性，所以滑动很流
畅。

详细资料可以参考：《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》

57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。

（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

详细资料可以参考：《有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度(三种方案)》

58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

59.浏览器如何判断是否支持 webp 格式图片

（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如
果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格
式的图片。

（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断
返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

详细资料可以参考：《判断浏览器是否支持 WebP 图片》《toDataURL()》

60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）

网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开
，静态资源放CDN。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请
求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了webserver的
http请求的解析速度。

详细资料可以参考：《CDN 是什么？使用 CDN 有什么优势？》

61.style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式
表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可
能会出现FOUC现象（即样式失效导致的页面闪烁问题）

62.什么是 CSS 预处理器/后处理器？

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成
文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然
后再编译成正常的CSS文件。

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或lesscsssprite，增强了css代码的复用性，还有层级、mixin、
变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了，最典型的例子是CSS压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，
以CanIUse上的浏览器支持数据为基础，自动处理兼容性问题。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏
览器私有前缀，实现跨浏览器兼容性的问题。

详细资料可以参考：《CSS 预处理器和后处理器》

63.阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background
-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites
能减少图片的字节。

优点：

减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

64.使用 rem 布局的优缺点？

优点：
在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

缺点：
（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
（2）使用iframe引用也会出现问题。
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问
题。

详细资料可以参考：《css3 的字体大小单位 rem 到底好在哪？》《VW:是时候放弃 REM 布局了》《为什么设计稿是 750px》《使用 Flexible 实现手淘 H5 页面的终端适配》

65.几种常见的 CSS 布局

详细的资料可以参考：《几种常见的 CSS 布局》

66.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考：《怎么画一条 0.5px 的边（更新）》

67.transition 和 animation 的区别

transition关注的是CSSproperty的变化，property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

详细资料可以参考：《CSSanimation 与 CSStransition 有何区别？》《CSS3Transition 和 Animation 区别及比较》《CSS 动画简介》《CSS 动画：animation、transition、transform、translate》

68.什么是首选最小宽度？

“首选最小宽度”，指的是元素最适合的最小宽度。

东亚文字（如中文）最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短
横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。

69.为什么 height:100%会无效？

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，
所以无法参与计算。

使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

（1）max-width会覆盖width，即使width是行类样式或者设置了!important。

（2）min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

（1）内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子
（characterbox）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些
元素，内容区域可以看成元素自身。

（2）内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒
子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containingbox），由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点？

“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵
一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

73.什么是替换元素？

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表
单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性以外，还有以下一些特性。

（1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要
类似appearance属性，或者浏览器自身暴露的一些样式接口，

（2）有自己的尺寸。在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像
素，如<video>、<iframe>或者<canvas>等，也有少部分替换元素为0像素，如<img>图片，而表单元素的替换元素
的尺寸则和浏览器有关，没有明显的规律。

（3）在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，ve
rtical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，
被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。

（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认
的display值却是不一样的，有的是inline，有的是inline-block。

74.替换元素的计算规则？

替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。

（1）固有尺寸指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。

（2）HTML尺寸只能通过HTML原生属性改变，这些HTML原生属性包括<img>的width和height属性、<input>的s
ize属性、<textarea>的cols和rows属性等。

（3）CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸，对应盒尺寸中的contentbox。

这3层结构的计算规则具体如下

（1）如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。

（2）如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。

（3）如果有CSS尺寸，则最终尺寸由CSS属性决定。

（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。

（5）如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。

（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

75.content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了userselect:none声明一般，但是普通元素的文本
却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是
地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

76.margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar
gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。

77.margin 无效的情形

（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有ma
rgin合并的问题。

（2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

（3）绝对定位元素非定位方位的margin值“无效”。

（4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性？

（1）border-width却不支持百分比。

（2）border-style的默认值是none，有一部分人可能会误以为是solid。这也是单纯设置border-width或border-col
or没有边框显示的原因。

（3）border-style:double的表现规则：双线宽度永远相等，中间间隔±1。

（4）border-color默认颜色就是color色值。

（5）默认background背景图片是相对于paddingbox定位的。

79.什么是基线和 x-height？

字母x的下边缘（线）就是我们的基线。

x-height指的就是小写字母x的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。在C
SS世界中，middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是指x-height。ex的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。

80.line-height 的特殊性？

（1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高
度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。

（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height之所以起作
用，就是通过改变“行距”来实现的。在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是
有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。

（3）行距=line-height-font-size。

（4）border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下
边距，则向上取整。

（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。

（6）对于块级元素，line-height对其本身是没有任何作用的，我们平时改变line-height，块级元素的高度跟着变化实际上是
通过改变块级元素里面内联级别元素占据的高度实现的。

（7）line-height的默认值是normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前font-si
ze相乘后的值。为百分比值时，其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

（8）如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为
属性值，那么所有的子元素继承的是最终的计算值。

（9）无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。

（10）只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个
“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

81.vertical-align 的特殊性？

（1）vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个inline-block元素，如果里面
没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行
内联元素的基线。

（2）vertical-align:top就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果display
计算值是table-cell的元素，我们不妨脑补成<td>元素，则和<tr>元素上边缘对齐。

（3）vertical-align:middle是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素，单元格填充盒子相对于外面的表格行居中对齐。

（4）vertical-align支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上
偏移。

（5）vertical-align属性的百分比值则是相对于line-height的计算值计算的。

（6）vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元
素。

（7）table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。

82.overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

83.无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84.absolute 与 overflow 的关系？

（1）如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute
元素进行剪裁。

（2）如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大，也
都不会出现滚动条。

（3）overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的。

85.clip 裁剪是什么？

所谓“可访问性隐藏”，指的是虽然内容肉眼看不见，但是其他辅助设备却能够进行识别和访问的隐藏。

clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是，它具有更强的普遍适应性，任何元素、任何场景都可以无障碍使用。

86.relative 的特殊性？

（1）相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。

（2）top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是auto，那么计算值是0，偏移无效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么relative类似top:20%的代码等同于top:0。

（3）当相对定位元素同时应用对立方向定位值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，因此top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。

87.什么是层叠上下文？

层叠上下文，英文称作stackingcontext，是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元
素在z轴上就“高人一等”。

层叠上下文元素有如下特性：

（1）层叠上下文的层叠水平要比普通元素高（原因后面会说明）。
（2）层叠上下文可以阻断元素的混合模式。
（3）层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
（4）每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
（5）每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。


层叠上下文的创建：

（1）页面根元素天生具有层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，可以看成是<html>元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。

（2）对于position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。Chrome等WebKit内核浏览器下，position:fixed元素天然层叠上下文元素，无须z-index为数值。根据我的测试，目前IE和Firefox仍是老套路。

（3）其他一些CSS3属性，比如元素的opacity值不是1。

88.什么是层叠水平？

层叠水平，英文称作stackinglevel，决定了同一个层叠上下文中元素在z轴上的显示顺序。

显而易见，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上
下文元素中。

89.元素的层叠顺序？

层叠顺序，英文称作 stackingorder，表示元素发生层叠时有着特定的垂直显示顺序。

90.层叠准则？

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

91.font-weight 的特殊性？

如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

92.text-indent 的特殊性？

（1）text-indent仅对第一行内联盒子内容有效。

（2）非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inli
ne-table则会生效。

（3）<input>标签按钮text-indent值无效。

（4）<button>标签按钮text-indent值有效。

（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

93.letter-spacing 与字符间距？

letter-spacing可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

（1）继承性。
（2）默认值是normal而不是0。虽然说正常情况下，normal的计算值就是0，但两者还是有差别的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。
（3）支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。
（4）和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
（5）支持小数值，即使0.1px也是支持的。
（6）暂不支持百分比值。

94.word-spacing 与单词间距？

letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙
宽度。

95.white-space 与换行和空格的控制？

white-space属性声明了如何处理元素内的空白字符，这类空白字符包括Space（空格）键、Enter（回车）键、Tab（制表符）
键产生的空白。因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否
生效）等。

其属性值包括下面这些。
?normal：合并空白字符和换行符。
?pre：空白字符不合并，并且内容只在有换行符的地方换行。
?nowrap：该值和normal一样会合并空白字符，但不允许文本环绕。
?pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
?pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。

96.隐藏元素的 background-image 到底加不加载？

97.如何实现单行／多行文本溢出的省略（...）？

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料可以参考：《【CSS/JS】如何实现单行／多行文本溢出的省略》《CSS 多行文本溢出省略显示》

98.常见的元素隐藏方式？

-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

详细资料可以参考：《CSS 隐藏元素的八种方法》

99.css 实现上下固定中间自适应布局？

利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料可以参考：《css 实现上下固定中间自适应布局》

100.css 两栏布局的实现？

101.css 三栏布局的实现？

102.实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展示》

103.实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展示》

104.一个自适应矩形，水平垂直居中，且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

整合营销服务商

用JavaScript实现猜数游戏并逐行解释代码含义

标：

?代码

?代码详细解释

++基础——文件逐行读取与字符匹配

技术背景

C++读取文件

C++字符串匹配

C++运行时间统计

总结概要

版权声明

SS 面试知识点总结

53.position:fixed;在 android 下无效怎么处理？

54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

55.如何让去除 inline-block 元素间间距？

56.overflow:scroll 时不能平滑滚动的问题怎么处理？

57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。

58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

59.浏览器如何判断是否支持 webp 格式图片

60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）

61.style 标签写在 body 后与 body 前有什么区别？

62.什么是 CSS 预处理器/后处理器？

63.阐述一下 CSSSprites

64.使用 rem 布局的优缺点？

65.几种常见的 CSS 布局

66.画一条 0.5px 的线

67.transition 和 animation 的区别

68.什么是首选最小宽度？

69.为什么 height:100%会无效？

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

71.内联盒模型基本概念

72.什么是幽灵空白节点？

73.什么是替换元素？

74.替换元素的计算规则？

75.content 与替换元素的关系？

76.margin:auto 的填充规则？

77.margin 无效的情形

78.border 的特殊性？

79.什么是基线和 x-height？

80.line-height 的特殊性？

81.vertical-align 的特殊性？

82.overflow 的特殊性？

83.无依赖绝对定位是什么？

84.absolute 与 overflow 的关系？

85.clip 裁剪是什么？

86.relative 的特殊性？

87.什么是层叠上下文？

88.什么是层叠水平？

89.元素的层叠顺序？

90.层叠准则？

91.font-weight 的特殊性？

92.text-indent 的特殊性？

93.letter-spacing 与字符间距？

94.word-spacing 与单词间距？

95.white-space 与换行和空格的控制？

96.隐藏元素的 background-image 到底加不加载？

97.如何实现单行／多行文本溢出的省略（...）？

98.常见的元素隐藏方式？

99.css 实现上下固定中间自适应布局？

100.css 两栏布局的实现？

101.css 三栏布局的实现？

102.实现一个宽高自适应的正方形

103.实现一个三角形

104.一个自适应矩形，水平垂直居中，且宽高比为 2:1

推荐

您的项目需求