之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享)。
-
html空格符号代码
1. ：一个字符的半角的不断行的空格，如果需要在网页中插入多个空格，可以将“ ”代码写多遍；
2.   ：一个字符的半角的空格，也可以将“ ”写多遍来插入多个空格；
3.   ：两个字符的全角的空格，也可以将“ ”写多遍来插入更多的空格；
4.   ：小于一个字符的空格；
-
代码示例
<!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 如何在网页中添加空格(琐碎知识点整理) </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
-
总结
1. 大家有没有想过为什么要使用html空格符号代码呢, 直接在键盘上敲几个空格不是更方便吗？当你实际操作的
时候, 你会发现 '默认情况下，无论你在html源代码中敲几个空格，在浏览器中运行都只显示一个空格', 所以我们
就需要使用 html 空格符号代码来实现网页中多个空格的效果 。
2. 前面说的前提是 "默认情况下", 为什么说在默认情况下呢? 因为我们还可以使用 css 中的 "white-space" 属性
来实现多个空格的效果; 就是将 "white-space" 属性值设置为 "pre" 即: white-space: pre; 设置之后, 浏览器就会
保留 html 源代码中的空格和换行; 这下你在源代码中敲几个空格, 浏览器中运行就会用几个空格 。
3. 在软件开发中, 都是使用 html 空格符号 代码来实现多个空格的效果 。
网友评论