常用css单位_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:46:34
Original
1289 Leute haben es durchsucht

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是控制字与字之间空格的宽度.


??

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!