常用css单位

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



时间: 2024-10-12 16:09:34

常用css单位的相关文章

css单位中px和em,rem的区别

css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说是相当可以,大家对px的了解肯定是没有很大的问题的. em(相对长度单位) 使用:1.浏览器的默认字体都是16px,那么1em=16px,以此类推计算12px=0.75em,10px=0.625em,2em=32px: 2.这样使用很复杂,很难很好的与px进行对应,也导致书写.使用.视觉的复杂(0.

PCB常用度量衡单位

1英尺=12英寸 1英寸inch=1000密尔mil 1mil=25.4um 1mil=1000uin (mil密耳有时也成英丝) 1um=40uin(有些公司称微英寸为麦,其实是微英寸) 1OZ=28.35克/平方英尺=35微米 H=18微米 4mil/4mil=0.1mm/0.1mm线宽线距 1ASD=1安培/平方分米=10.76安培/平方英尺 1AM=1安培分钟=60库仑主要用于贵金属电镀如镀金 1平方分米=10.76平方英尺 1盎司=28.35克,此为英制单位 1加仑(英制)=4.5升

顶 企业站常用css横向导航菜单

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml</a>" lang="zh-CN"><head><m

常用css

类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (×)Opera 9.64 (√)Safari 3.1 (×)IE7 (√)Firefox 3.0 (√)Chrome 2.0.x     (×)IE8 (√)Firefox 3.5                 border-radius:25px;-moz-border-radius:25px; /* 老的 Fi

常用css表达式-最小宽度-上下居中

/* IE6下最小宽度的CSS表达式 */ width:100%; min-width:1024px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1024?"1024px":""); 模块垂直居中,兼容IE6,注意,模块的所有父辈标签不能有定位属性,不能有overflow:hidden; .duilian_right{width:90p

Android中常用布局单位

Android在UI布局时经常用到一些单位,对单位混用直接会影响UI的显示,要想正确的在布局中使用每种单位就必须先真正的熟悉它. UI显示效果的影响因素:屏幕尺寸.屏幕密度.分辨率:而android手机种类又比较多,为了适应不同的设备,我们就要注意drawable和layout资源. 常用的单位有:px.dip(dp).sp,还要一些不常用的单位,如pt.in.mm. px:对应屏幕上的实际像素点: dip(dp):设备独立像素,一种基于屏幕密度的抽象单位,在每英寸160点得显示器上,1dip=

!!!常用CSS代码

.box{overflow:auto;zoom:1;} .box-in{display:inline-block;vertical-align:top;} .border-box{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/*ie8+*/ body,div,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} (待补充) 清除浮动 <style

常用css字体英文写法

font-family: 'Microsoft Yahei',sans-serif; 宋体:SimSun 黑体:SimHei 常用css字体英文写法

你可能没注意的CSS单位

原文:你可能没注意的CSS单位 扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那么 1em = 16px 这样使用换算很复杂,尤其是和px对应,大家总结出了经验 body { font-size: 62.5%; } 这样之后 1em = 10px 在布局等使用的时候好换算了很多 百分比 百分比也是很常见的用法,看似简单其实有些初学者可能注意不到的