常用css单位_html/css_WEB-ITnose

企鹅博客
19510
文章
0
评论
2020年3月11日07:16:18 评论 15 views 997字阅读3分19秒

1em=12pt

2em=24pt

body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

div中的字体大小是1.2em,也就是div从父类元素继承的字体大小的1.2倍。在这里,body的字体是14px,那么div的字体大小是1.2*14=16.8px.

注意:用em一层一层级联得定义嵌套元素的字体大小

解决方法就是 em 换做 rem

rem

rem中的r代表根元素,它的值就是根元素设置的字体大小。在大多数情况下,根元素就是html了。

html {

font-size: 14px;

}

div {

font-size: 1.2rem;

}

rem不仅适用于字体大小,也用于网格布局。

width: 70rem; // 70 * 14px = 980px

你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位,然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性

letter-spacing和word-spacing

letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。

letter-spacing

  语法:
  letter-spacing : normal | length
  参数:
  normal :  默认间隔
  length :  由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
  说明:
  检索或设置对象中的文字之间的间隔。
  该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
  对应的脚本特性为letterSpacing。

word-spacing

  语法:
  word-spacing : normal | length
  参数:
  normal :  默认间距
  length :  由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
  说明:
  检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
  对应的脚本特性为wordSpacing。

比较:
letter-spacing定义了字与字之间的距离.
word-spacing是控制字与字之间空格的宽度.

??

继续阅读
  • 版权声明: 发表于 2020年3月11日07:16:18
  • 转载注明:https://www.qieseo.com/369397.html
java 源码分析Arrays.asList方法详解 java教程

java 源码分析Arrays.asList方法详解

最近,抽空把java Arrays 工具类的asList 方法做了源码分析,在网上整理了相关资料,记录下来,希望也能帮助读者! Arrays工具类提供了一个方法asList, 使用该方法可以将一个变长...
selenium之实现自动登录的实例代码 python教程

selenium之实现自动登录的实例代码

使用selenium及打码平台(自己还实现不了验证码图片解析,对接打码平台解析图片验证码)现实自动登录亚马逊网站,并修改账号绑定邮箱及密码等操作。 逻辑:仿真浏览器的操作,定位元素填入数据,根据页面元...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: