简要的谈一谈我对CSS中长度单位的理解

CSS中的长度单位目前分为两种,分别是绝对长度和相对长度。绝对长度单位包括:

  • in:英寸
  • cm:厘米
  • mm:毫米
  • pt:磅(1磅等于1/72英寸)
  • pc:pica(1pica等于12磅)

以上五个就是CSS中定义的绝对长度单位,他们都是在我们实际生活中用的很多,但是在写CSS代码制作要在屏幕上显示的网页的时候,这种绝对长度单位用到的很少,我能想到的比较有用的地方只有给印刷品设置长度单位时可能会用到,虽然我没有接触过。

接下来就是相对长度单位,相对,顾名思义就是以某个长度作为参照,设置的相对长度的实际值就是相对长度值*参照值。


CSS中的相对单位包括:

  • em:与元素的字号挂钩(font-size)
  • ex:与元素字体中字母“x”的实际高度挂钩(因为不同字体中x的高度是不同的,感觉是个好随意的单位,为什么不是其他字母呢0.0)
  • rem:与根元素的字号挂钩(html元素是根元素)
  • px:css像素(假定显示设备的分辨率为96dpi)
  • %:另一属性值的百分比

因为相对长度单位用到的比较多,所以有必要加个演示什么的,直观感受一下:

1. em

em是参照元素的字号来设置自身值的一个相对长度单位,如下所示,我设置p元素的font-size属性值为14px,给p元素的height设置为4em,同时给line-height也设置为4em,这样可以让p元素的内容有一个上下居中的效果。

1 p{
2      background: gold;
3      color: #000000;
4      font-size: 14px;
5      height: 4em;
6      line-height: 4em;
7 }
1 <p>这是随便写的一句话</p>

效果如下所示:

2. rem(个人感觉这个值在响应式布局会很有用,目前用的不多,但将来应该会很热)

这个单位的实际值=html元素的值*这个单位的相对值

如下所示:

 1 html{
 2     font-size: 24px;
 3 }
 4 p{
 5     background: gold;
 6     color: #000000;
 7     font-size: 1rem;
 8     height: 4em;
 9     line-height: 4em;
10 }
1 <p>这是随便写的一句话</p>

效果如下:

3. px

像素,这个单位在实际的开发中用的,见得非常多。虽然CSS标准中定义的px是一个相对长度单位,但因为定义的很奇葩(似乎是和读者的臂长还有关系,我猜这应该也是相对的一种吧:)),所以很多浏览器都把1px的长度定义为1英寸的1/96,大约是这样,所以本质上,px还是一个绝对长度单位。因为很常见,所以就不演示了。

4. %

百分比单位的定义是:可以把一个度量单位表示为其他属性值的百分比。

我们从定义就可以发现一个问题,这个“其他属性值”具体是什么属性,例如:同一个元素的font-size和width都使用%作为单位,他们所参照的那个“其他属性值”是同一个么?现实给出的答案是:不是同一个!

使用百分比符号作为单位会有两个需要注意的地方:

- 并非所有的属性都可以使用百分比作为单位。

- 对于可以使用百分比作为单位的元素,他们所对应的那个“其他属性值”是各不相同的。例如之前说到的font-size,参照的该元素继承得到的font-size值,而对于width属性,参照的则包含这个元素的块的宽度。


以上就是我目前对于CSS中长度单位的一些简单理解。如果之后有新的感悟和理解,会持续更新。

时间: 2024-12-29 12:05:22

简要的谈一谈我对CSS中长度单位的理解的相关文章

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

css中继承的理解

1.css继承的概念,可以参照面向对象中的继承(如java中三大特性中的继承) 2.子类继承父类,子类就拥有了父类的一些性质(颜色.字体大小.对齐方式) 3.子类也可以有自己的特性: 比如说, a.标题标签<H1~H6>中默认有控制字体大小的[css{font-size : 2em},即字体大小为父类字体大小的2倍](也就是说继承并修改了父类的字体大小) b.超连接<a>标签也有自己的默认颜色,在继承了父类的颜色之后,又使用了自己的默认颜色(由自己的默认颜色来定夺) 4.总结,这些

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

来,让我们谈一谈Normalize.css

本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormalizeCss/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootst

[转载]来,让我们谈一谈Normalize.css

来源 : http://segmentfault.com/a/1190000002239676 ------------------------------------------------------------------------- 本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormalizeCss/ Normalize.css 只是一个很小

来,让我们谈一谈 Normalize.css

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS Tricks 以及许许多多其他框架.工具和网站上. Normalize.css 项目地址 Normalize.css 在GitHub上的源码

谈一谈商品编码的问题

如题:今天谈一谈商品编码的问题,我们不是完全从物流和商品本身的角度去谈商品该怎么编码才符合国际标准,EAN,UPC啥啥啥怎么样的.我们从计算机程序设计,电商,数据库存储的角度看一看商品编码,首先商品有哪些编码,然后这些编码和商品的关系,在然后这些编码该怎么使用.要从电商的角度了解商品,马上想到的可能是淘宝,天猫,京东,亚马逊等他们的商品是怎么样子,是怎么存储的. 这些这么成熟的电商完全可以参考和借鉴.关于商品这个话题还是太大,因为商品本身设计的东西太多了,不同活动先不同的价格,多规格商品,不同的

谈一谈软件BUG造成的严重危害

写下本文的原因是因为这是老师布置的一个作业,谈一谈自己在实际的软件开发过程中所遇到的.并对自己影响很大的bug.无奈的是,笔者是一个软件开发的初学者,接手过的项目实在有限,在自己编写的有限的代码中所遇到的bug多是由于粗心而引起的语法问题.符号问题.代码格式问题.这些虽然是小问题,但作为一个程序员,这些看似不起眼的“小问题”却可能引起程序不能运行,出错等一系列的“大问题”,所以作为初学者的我也要时刻提醒自己,不断检查,不断完善.在认识了bug的危害性之后,突然让我不禁想起一个有关bug造成恶劣影

【dotnet跨平台】谈一谈dotnet-cli开源社区的产品持续集成

?? [dotnet跨平台]谈一谈dotnet-cli开源社区的产品持续集成 进入其中一个PR:https://github.com/dotnet/cli/pull/2580 可以看到微软使用自己搭建的持续集成平台来保证产品和代码的质量,其中每一个即将整合代码到rel/1.0.0这个主分支的代码都要经过7个测试通过,其中2个windows平台,4个linux平台和一个OS X平台如下: Details Windows_NT x64 Release Build - Build finished.