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 ...
随机推荐
- Docker Swarm搭建多服务器下Docker集群
对于有多台服务器来讲,如果每一台都去手动操控,那将会是一件非常浪费时间的事情,毕竟时间这东西,于我们而言,十分宝贵,或许在开始搭建环境的时候耗费点时间,感觉是正常的,我也如此,花费大堆时间在采坑和填坑 ...
- springboot~如何去掌握它（新手可以看看）
springboot~如何去掌握它 主讲:仓储大叔 每讲40分钟 架构图 graph LR App-->A Web-->A A(zuul proxy)-->B(eureka serv ...
- HTML学习总结&基础篇
何为坚持?一个“勤”,一个“忍”. 年前给自己定的目标,今年一定要坚持多逛园子,多看一些大佬的帖子,然后自己也尽量能够分享自己学习的收获,让自己进步快些,但是多逛园子是做到了,写博客这个东西,今年好像 ...
- 微信h5 video的问题
https://blog.csdn.net/hf123lsk/article/details/78920211
- CSS在IE6中常见的兼容性问题
1.在IE6中png24格式的图片不透明 解决办法:写一个条件注释语句,引入一个js插件,然后调用一下js中的方法,把需要处理的元素的类名写在括号中,如下 (插件下载地址:http://www.dil ...
- cesium 之地图显示坐标、比例尺、海拔高度效果篇（附源码下载）
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Android为TV端助力 电影栏目移动到底部或者顶部时抖动动画
1 移动到底部上下抖动ObjectAnimator animatorX = ObjectAnimator.ofFloat(holder.itemView,"translationX" ...
- Android Studio工程项目打包成SDK（jar或aar格式）
Android工程项目打包成SDK 在app的gradle下进行设置: (1)将apply plugin: ‘com.android.application’ 改为apply plugin: ‘com ...
- javafx--tableView笔记-----tableView里已经填充了实体类数据但是很狗血地显示不出来
private String cClass private String cUp private String cDown 刚开始实体类的字段 cClassCol.setCellValueFactor ...
- SQLServer之ISO游标使用
什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...