深入理解letter-spacing,word-spacing的对比区别

时间: 2017-11-06阅读: 967标签: css

letter-spacing  

lletter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

<p style="letter-spacing:10px;"> thisisatest </p>
//显示: t  h  i  s  a  t  e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示:这   是   一   个   测   试


word-spacing  

word-spacing 属性增加或减少单词间的空白(即字间隔)。

该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。

<p style="word-spacing:10px;"> this is a  test</p>
//显示: this   is    a     test*/
<p style="word-spacing:10px;">这  是   一   个  测  试 </p>
//显示: 这     是      一      个     测    试

letter-spacing,word-spacing的区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。word-spacing意思是设置单词间的间距,如何区别是不是为一个单词呢,这里我们可以看出 用空格隔开的为一个单词,所以在执行word-spacing:10px;执行的前后可以发现,执行后空格变得更大了!!



链接: http://www.fly63.com/article/detial/51

为什么 CSS 这么难?

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难

css常用代码

禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放;设置元素在另一个元素的最底部;设置背景颜色,不透明度

六种组织CSS的方式

Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:结构与设计分离,容器和内容分离

不为人知的七个CSS知识点

如果你在日常工作中使用CSS,那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。

Web前端-CSS必备知识点

css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位。

css加载会造成阻塞吗?

js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度

react中使用css的7种方式

react中使用css的7种方式:在组件中直接使用style、在组件中引入[name].css文件、在组件中引入[name].scss文件、在组件中引入[name].module.css文件、在组件中引入 [name].module.scss文件、使用styled-components

CSS 解析原理_你知道浏览器CSS是如何解析吗?

作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;

CSS3 2D转换

转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。

css实用小技巧_css常用技巧和经验总汇

这篇文章整理了一些css常用技巧和经验总汇,包括:如何清除图片下方出现几像素的空白间隙?如何让文本垂直对齐文本输入框?如何让单行文本在容器内垂直居中?为什么Standard mode下IE无法设置滚动条的颜色?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全