CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨
先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。
div{
border: 1px solid black;
color: red;
font-size: 14px;
}
<div>文字，咋,排-hello Spacing</div>
就是这么简单的页面。显示结果如下
汉字占的地方是绿色部分是宽14px，高14px
英文字符占的地方黄色部分是宽 7px，高14px
1.font-size:14px,默认行高会上下加1px,达到16px
2.汉字字高14px,字宽14px（宋体设计的是13+1模式）,字字紧相邻
3.英文字符（空格看成一个英文字符，hello后面那个）,宽7px
开始变动css，加字距
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
}
4.letter-spacing的意思是字与字之间的间距， 也就是出现在上图中的蓝色方块，这里设置宽10px
5.可以理解为默认letter-spacing:0px
6.应该把空格当成一个英文字符看，他也有自己的letter-spacing
7.中文标点符号等同于汉字，英文状态下标点符号等同于英文字符
再变动css，加词距
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
/* 添加词距 */
word-spacing: 20px;
}
8.word-spacing，单词间距，浏览器是根据空格判断的，有空格就认为有词。
9.hello后的空格，后加上字距letter-spacing(蓝色)，再加上 单词间距（粉红色块20） 才是真正的距离。
最后变一次CSS，加上首行缩进
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
/* 添加词距 */
word-spacing: 20px;
/* 添加首行缩进 */
text-indent: 2em;
}
10.这里1em为14px,2em为28px,text-indent首行缩进， 所以，文的前面为28px
11.这里可以看出，字距加在字后面，单词间的词距加在字距后， 字距词距默认皆为0！
最后附上html文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*width: 100px;*/
border: 1px solid black;
color: red;
font-size: 14px; text-decoration: none;
letter-spacing: 10px;
word-spacing:20px;
text-indent: 2em;
}
</style>
</head>
<body>
<div>文字，咋,排-hello Spacing</div>
</body>
</html>
CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨的更多相关文章
- css中input框不可点击+首行缩进
Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...
- css中字间距调整（转）
css中字间距调整 (2014-01-02 13:51:07) 标签: 汉字 英文 间距 letter-spacing word-spacing 杂谈 分类: 网页制作 汉字间字间距设置:letter ...
- css —— 图片环绕+首行缩进
1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...
- Div+Css实现段落首行缩进两个字符（text-indent标签）
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 首行缩进css
html首行缩进2字符,可以使用CSS属性中的[text-indent]进行设置. 设置代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- Unity中Text中首行缩进两个字符和换行的代码
1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行 “\n” 补充 Uni ...
随机推荐
- MySQL系列--4.使用Python3访问数据库
1.安装MySQL驱动 pip install mysql-connector 安装完成后进入命令行模式,导入驱动,如果不报错,说明安装成功 Python 3.6.7 (default, Oct 22 ...
- EF Core利用Scaffold从根据数据库生成代码
在EF6 之前的时代,如果需要从数据库中生成代码,是可以直接在界面上操作的,而到了EF Core的时代,操作方式又有更简便的方式了,我们只需要记住以下这条指令. Scaffold-DbContext ...
- Java 集合详解
一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段,我们根本不知道到底需要多少个数量的对象,甚至不知道它的准确类型.为了满足这些常规的编程需要,我们要 ...
- k8s数据管理（八）--技术流ken
volume 我们经常会说:容器和 Pod 是短暂的.其含义是它们的生命周期可能很短,会被频繁地销毁和创建.容器销毁时,保存在容器内部文件系统中的数据都会被清除. 为了持久化保存容器的数据,可以使用 ...
- WebServeice 动态代理类
1, webservice是什么? 是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序 ...
- WinForm客户端限速下载（C#限速下载）
最近由于工作需要,需要开发一个能把服务器上的文件批量下载下来本地保存,关键是要实现限速下载,如果全速下载会影响服务器上的带宽流量.本来我最开始的想法是在服务器端开发一个可以从源头就限速下载的Api端口 ...
- postgresql如何让主键自增
法一: Sql代码 收藏代码 CREATE TABLE customers ( customerid SERIAL primary key , companyname character varyin ...
- Java 处理 multipart/mixed 请求
一.multipart/mixed 请求 multipart/mixed 和 multipart/form-date 都是多文件上传的格式.区别在于,multipart/form-data 是一种 ...
- js将一个数组分成多个数组
1,将数组array分成长度为subGroupLength的小数组并返回新数组 function group(array, subGroupLength) { let index = 0; let n ...
- Python数据挖掘
Python之所以如此流行,原因在于它的数据分析和挖掘方面表现出的高性能,而我们前面介绍的Python大都集中在各个子功能(如科学计算.矢量计算.可视化等),其目的在于引出最终的数据分析和数据挖掘功能 ...