之前有整理過(guò)一部分知識(shí)點(diǎn), 一直沒(méi)有發(fā)布, 因?yàn)槎际怯嘘P(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無(wú)論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗(yàn)證之后慢慢分享給你們, 現(xiàn)在看到感覺(jué)還挺有意思 。
好了廢話不多說(shuō), 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗(yàn)證過(guò)程的一些圖片作為分享)。
-
html空格符號(hào)代碼
1. ：一個(gè)字符的半角的不斷行的空格，如果需要在網(wǎng)頁(yè)中插入多個(gè)空格，可以將“ ”代碼寫(xiě)多遍；
2.   ：一個(gè)字符的半角的空格，也可以將“ ”寫(xiě)多遍來(lái)插入多個(gè)空格；
3.   ：兩個(gè)字符的全角的空格，也可以將“ ”寫(xiě)多遍來(lái)插入更多的空格；
4.   ：小于一個(gè)字符的空格；
-
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS/HTML 如何在網(wǎng)頁(yè)中添加空格(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.w_space-item {
background-color: skyblue;
height: 66px;
line-height: 66px;
font-size: 32px;
margin: 32px 0;
}
.w_space-pre {
white-space: pre;
}
</style>
<body>
<div>
<div>
<div class="w_space-shel">
<p class="w_space-item">空格-1: 示例</p>
<p class="w_space-item">空格-2:      示例</p>
<p class="w_space-item">空格-3:      示例</p>
<p class="w_space-item">空格-4:     示例</p>
<p class="w_space-item w_space-pre">空格: 示例</p>
</div>
</div>
</div>
</body>
</html>
-
圖片示例
c-sum.png
-
總結(jié)
1. 大家有沒(méi)有想過(guò)為什么要使用html空格符號(hào)代碼呢, 直接在鍵盤(pán)上敲幾個(gè)空格不是更方便嗎？當(dāng)你實(shí)際操作的
時(shí)候, 你會(huì)發(fā)現(xiàn) '默認(rèn)情況下，無(wú)論你在html源代碼中敲幾個(gè)空格，在瀏覽器中運(yùn)行都只顯示一個(gè)空格', 所以我們
就需要使用 html 空格符號(hào)代碼來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)中多個(gè)空格的效果 。
2. 前面說(shuō)的前提是 "默認(rèn)情況下", 為什么說(shuō)在默認(rèn)情況下呢? 因?yàn)槲覀冞€可以使用 css 中的 "white-space" 屬性
來(lái)實(shí)現(xiàn)多個(gè)空格的效果; 就是將 "white-space" 屬性值設(shè)置為 "pre" 即: white-space: pre; 設(shè)置之后, 瀏覽器就會(huì)
保留 html 源代碼中的空格和換行; 這下你在源代碼中敲幾個(gè)空格, 瀏覽器中運(yùn)行就會(huì)用幾個(gè)空格 。
3. 在軟件開(kāi)發(fā)中, 都是使用 html 空格符號(hào) 代碼來(lái)實(shí)現(xiàn)多個(gè)空格的效果 。
