用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？

相關知識點：

（1）BMP，是無損的、既支持索引色也支持直接色的、點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常
具有較大的文件大小。

（2）GIF是無損的、采用索引色的、點陣圖。采用LZW壓縮算法進行編碼。文件小，是GIF格式的優點，同時，GIF格式還具
有支持動畫以及透明的優點。但，GIF格式僅支持8bit的索引色，所以GIF格式適用于對色彩要求不高同時需要文件體積
較小的場景。

（3）JPEG是有損的、采用直接色的、點陣圖。JPEG的圖片的優點，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來
存儲照片，與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，
又會導致圖片文件較GIF更大。

（4）PNG-8是無損的、使用索引色的、點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的
情況下，應該盡可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8
還支持透明度的調節，而GIF并不支持。現在，除非需要動畫的支持，否則我們沒有理由使用GIF而不是PNG-8。

（5）PNG-24是無損的、使用直接色的、點陣圖。PNG-24的優點在于，它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格
式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。

（6）SVG是無損的、矢量圖。SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當你放大一個SVG圖
片的時候，你看到的還是線和曲線，而不會出現像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪制企
業Logo、Icon等。

（7）WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。從名字就可以看出來它是
為Web而生的，什么叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，
如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。

?在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%；
?在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
?WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。

回答：

我了解到的一共有七種常見的圖片的格式。

（1）第一種是BMP格式，它是無損壓縮的，支持索引色和直接色的點陣圖。由于它基本上沒有進行壓縮，因此它的文件體積一般比
較大。

（2）第二種是GIF格式，它是無損壓縮的使用索引色的點陣圖。由于使用了LZW壓縮方法，因此文件的體積很小。并且GIF還
支持動畫和透明度。但因為它使用的是索引色，所以它適用于一些對顏色要求不高且需要文件體積小的場景。

（3）第三種是JPEG格式，它是有損壓縮的使用直接色的點陣圖。由于使用了直接色，色彩較為豐富，一般適用于來存儲照片。但
由于使用的是直接色，可能文件的體積相對于GIF格式來說更大。

（4）第四種是PNG-8格式，它是無損壓縮的使用索引色的點陣圖。它是GIF的一種很好的替代格式，它也支持透明度的調整，并
且文件的體積相對于GIF格式更小。一般來說如果不是需要動畫的情況，我們都可以使用PNG-8格式代替GIF格式。

（5）第五種是PNG-24格式，它是無損壓縮的使用直接色的點陣圖。PNG-24的優點是它使用了壓縮算法，所以它的體積比BMP
格式的文件要小得多，但是相對于其他的幾種格式，還是要大一些。

（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對矢量圖進行放大和縮小不會產生鋸齒和失真。它一般
適合于用來制作一些網站logo或者圖標之類的圖片。

（7）第七種格式是webp格式，它是支持有損和無損兩種壓縮方式的使用直接色的點陣圖。使用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 到底加不加載？

相關知識點：

根據測試，一個元素如果display計算值為none，在IE瀏覽器下（IE8～IE11，更高版本不確定）依然會發送圖片請求，Fire
fox瀏覽器不會，至于Chrome和Safari瀏覽器則似乎更加智能一點：如果隱藏元素同時又設置了background-image，則圖片
依然會去加載；如果是父元素的display計算值為none，則背景圖不會請求，此時瀏覽器或許放心地認為這個背景圖暫時是不會使
用的。

如果不是background-image，而是<img>元素，則設置display:none在所有瀏覽器下依舊都會請求圖片資源。

還需要注意的是如果設置的樣式沒有對應的元素，則background-image也不會加載。hover情況下的background-image，在觸
發時加載。

回答：

-（1）元素的背景圖片

-元素本身設置 display:none，會請求圖片 -父級元素設置 display:none，不會請求圖片 -樣式沒有元素使用，不會請求-:hover 樣式下，觸發時請求

-（2）img 標簽圖片任何情況下都會請求圖片

詳細資料可以參考：《CSS 控制前端圖片 HTTP 請求的各種情況示例》

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 兩欄布局的實現？

相關資料：

/*兩欄布局一般指的是頁面中一共兩欄，左邊固定，右邊自適應的布局，一共有四種實現的方式。*/
/*以左邊寬度固定為200px為例*/

/*（1）利用浮動，將左邊元素寬度設置為200px，并且設置向左浮動。將右邊元素的margin-left設置為200px，寬度設置為auto（默認為auto，撐滿整個父元素）。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*（2）第二種是利用flex布局，將左邊元素的放大和縮小比例設置為0，基礎大小設置為200px。將右邊的元素的放大比例設置為1，縮小比例設置為1，基礎大小設置為auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*（3）第三種是利用絕對定位布局的方式，將父級元素設置相對定位。左邊元素設置為absolute定位，并且寬度設置為
200px。將右邊元素的margin-left的值設置為200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*（4）第四種還是利用絕對定位的方式，將父級元素設置為相對定位。左邊元素寬度設置為200px，右邊元素設置為絕對定位，左邊定位為200px，其余方向定位為0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《兩欄布局 demo 展示》

回答：

兩欄布局一般指的是頁面中一共兩欄，左邊固定，右邊自適應的布局，一共有四種實現的方式。

以左邊寬度固定為 200px 為例

-（1）利用浮動，將左邊元素寬度設置為 200px，并且設置向左浮動。將右邊元素的 margin-left 設置為 200px，寬度設置為 auto（默認為 auto，撐滿整個父元素）。

-（2）第二種是利用 flex 布局，將左邊元素的放大和縮小比例設置為 0，基礎大小設置為 200px。將右邊的元素的放大比例設置為 1，縮小比例設置為 1，基礎大小設置為 auto。

-（3）第三種是利用絕對定位布局的方式，將父級元素設置相對定位。左邊元素設置為 absolute 定位，并且寬度設置為 200px。將右邊元素的 margin-left 的值設置為 200px。

-（4）第四種還是利用絕對定位的方式，將父級元素設置為相對定位。左邊元素寬度設置為 200px，右邊元素設置為絕對定位，左邊定位為 200px，其余方向定位為 0。

101.css 三欄布局的實現？

相關資料：

/*三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，一共有五種實現方式。

這里以左邊寬度固定為100px，右邊寬度固定為200px為例。*/

/*（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0，基礎大小設置為固定的大小，中間一欄設置為auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后。*/
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*（4）雙飛翼布局，利用浮動和負邊距來實現。父級元素設置左右的pedding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置margin負值將其移動到上一行，再利用相對定位，定位到兩邊。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的margin值來實現的，而不是通過父元
素的pedding來實現的。本質上來說，也是通過浮動和外邊距負值來實現的。*/

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三欄布局 demo 展示》

回答：

三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，一共有五種實現方式。

這里以左邊寬度固定為100px，右邊寬度固定為200px為例。

（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。

（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0，基礎大小設置為固定的大小，中間一欄設置為auto。

（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后。

（4）圣杯布局，利用浮動和負邊距來實現。父級元素設置左右的pedding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置margin負值將其移動到上一行，再利用相對定位，定位到兩邊。雙飛翼布局中間列的寬度不能小于兩邊任意列的寬度，而雙飛翼布局則不存在這個問題。

（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的margin值來實現的，而不是通過父元素的pedding來實現的。本質上來說，也是通過浮動和外邊距負值來實現的。

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

推薦

您的項目需求