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

时间: 2017-11-06阅读: 518标签: 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;执行的前后可以发现,执行后空格变得更大了!!



CSS3 2D转换

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

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

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

CSS便捷开发小工具汇总

CSS便捷开发小工具汇总:包括:prefixfree前缀补全插件(或其他后缀-o-,-ms-,-moz-)、Normalize.css一个CSS Reset工具、Grunt 常用的包括CSS/JS的自动合并压缩, LESS/SASS 的自动编译等

用 CSS background 实现刻度线的呈现

简单的实现方式,大致有两种:一是用图片做背景,横向平铺线条图片;二是给每一块刻度区域平铺一个元素,然后用边线实现。身为一个“环保主义者”,这两种方式都不能让我满意。在看了 Lea Verou 的 CSS SECRETS 后,我受到了启发——可以用渐变背景的方式去实现。

css禁止选中文本_兼容实现禁用选择功能

有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:none:用户不能选择文本 ,text:用户可以选择文本

什么是css sprites(雪碧图),css sprites使用的优缺点

css sprites雪碧图:把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量

HTML/CSS中的空格处理_如何保留页面中的空格

在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了,同时内容前后的空格也会被清除。HTML空格保留的方式、CSS空格保留的方式。

CSS 技术技巧_提高你CSS技术的法则

CSS技术技巧法则:不要让你的代码脱离你的掌控,尽量简洁、掌握基础、保持代码的可复用性、面向对象的css、Css3了解他能做的以及你可以使用的部分、渐进增强与优雅降级、Css预处理工具...

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

CSS中的三大特性_继承性、层叠性、优先级

这是一篇基础的文章,主要介绍css中的三大特性:css继承性、css层叠性、css优先级

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

广告合作文章投稿关于web前端网站长推荐网站地图站长QQ:522607023

小程序员专栏: 土味情话心理测试脑筋急转弯