网页制作中用到的各度量单位的比较

比较|网页

在网页中对网页元素的大小修饰除了数值大小外,还有就是度量单位的选择了。不同的度量单位会有哪些不同的效果呢?首先先了解下各类单位及说明

像素(px)
根据显示器的分辨率来确定长度,在web应用中多采用该单位;

点数(pt)
根据windows系统定义的字号大小来确定长度;

英寸(in)、厘米(cm)和毫米(mm)
根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变;

12pt字(pc)
即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如{font-size: 2pc;}表示文字大小为24pt;

以上单位均为定值,改变浏览器中浏览文字大小不会对应用这些单位的文字产生变化。

字体高(em)
表示当前文本的尺寸。如{font-size:2em}是指文字大小为原来的2倍;

字体x的高(ex)
表示当前字母“x”的高度;

%
是以当前文本的百分比定义尺寸。如{font-size:200%}是指文字大小为原来的2倍;
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>网页中各度量单位比较</title><style type="text/css"><!--body { font-family: Verdana, Arial, Helvetica, sans-serif;}p { background-color: #EFEFEF; margin: 5px; padding: 4px;}.px12 { font-size: 12px;}.px14 { font-size: 14px;}.pt12 { font-size: 12pt;}.pt14 { font-size: 14pt;}.in1 { font-size: 1in;}.pc1 { font-size: 1pc;}.pc2 { font-size: 2pc;}.em2 { font-size: 2em;}.ex1 { font-size: 1ex;}.ex2 { font-size: 2ex;}.ex4 { font-size: 4ex;}.per2 { font-size: 200%;}--></style></head><body><p>正常字体大小,<span class="px12">12像素(px)的大小</span>,<span class="px14">14像素的大小</span></p><p>正常字体大小,<span class="pt12">12点数(pt)的大小</span>,<span class="pt14">14点数的大小</span></p><p>正常字体大小,<span class="in1">1英寸(in)的大小</span>,</p><p>正常字体大小,<span class="pt12">12点数(pt)的大小 </span>= <span class="pc1">1个12pt字(1pc)的大小</span>,<span class="pc2">2个12pt字(2pc)的大小</span></p><p>正常字体大小,<span class="em2">2个字体高(em)的大小</span></p><p>正常字体大小,<span class="ex1">cnbruce-ex1</span>,<span class="ex2">cnbruce-ex2</span>,<span class="ex4">cnbruce-ex4</span></p><p>正常字体大小,<span class="per2">200%的字体大小</span></p></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-10-03 11:03:56

网页制作中用到的各度量单位的比较的相关文章

总结网页代码常用小技巧,网页制作必学

技巧|网页 1.让浏览器窗口永远都不出现滚动条. 〈body style="overflow-x:hidden;overflow-y:hidden"〉或〈body style="overflow:hidden"〉 或〈body scroll=no〉2,没有水平滚动条〈body style="overflow-x:hidden"〉3,没有垂直滚动条〈body style="overflow-y:hidden"〉 2,如何给图片抖

网页制作基础: 表单按钮的使用

按钮|网页 对于一个交互式表单,按钮是必不可少的.按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)--用于传输用户所填写的信息至服务器.Reset(复原按钮)--清除所填写的信息以利重新填写:另一类本身不具特殊功能的,叫作普通按钮.特殊按钮只能用于表单才能发挥特殊的功能.而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便. 一.制作常规按钮 制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就

Dreamweaver网页制作超级技巧36则

dreamweaver|技巧|网页 1. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页 首先需要保证的是你的页面内容采用了表格的格式,然后打开你要编辑的页面,按"Ctrl+F6"或者菜单"View→TableView→Layout?View"转换到布局视图.这时可以看到单元格的列宽,在列宽数字的旁边还有一个小小的下拉式箭头,点击你要设定弹性显示的列上方的小箭头,接着选择"将列设为弹性显示"(Make Column Autostre

初探SSI网页制作

 SSI(Server Side Include),通常称为服务器端嵌入,是一种类似于ASP的基于服务器的网页制作技术.大多数(尤其是基于Unix平台)的WEB服务器如Netscape Enterprise Server等均支持SSI命令.  SSI工作原理: 在一个通常以.shtml为扩展名的SSI文件中,标准的HTML编码会被直接送到浏览器上,而内嵌Perl语言形式的SSI命令则先被网络服务器解释执行,如果是标准输出的话,输出信息也将作为标准的HTML而被送至浏览器.  SSI简

18条Dreamweaver网页制作的操作技巧

  1.在进行网页设计时,大家都喜欢用Style调用的方式,因为它可以让页面更统一,也让设计过程变得更简便.调用Style的方法有很多,可以单击鼠标右键选择Custon Style来调用Style标准,也可以直接在Dreamweaver状态栏中的元素列表上单击鼠标右键调用Style.不同的操作方法最终实现的效果是一样的,但其产生的HTML代码却会有所差异.比如用CUSTON STYLE来调用STYLE标准,在网页代码中就生成一个〈SPAN〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解

《HTML、CSS、JavaScript 网页制作从入门到精通》——第1章 HTML基础1.1 HTML的基本概念

第1章 HTML基础 HTML.CSS.JavaScript 网页制作从入门到精通 在当今社会中,网络已成为人们生活的一部分,网页设计技术已成为学习计算机的重要内容之一.目前大部分网页都采用可视化网页编辑软件来制作的,但是无论采用哪一种网页编辑软件,最后都是将所设计的网页转化为HTML.HTML是搭建网页的基础语言,如果不了解HTML,就不能灵活地实现想要的网页效果.本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法,使读者对HTML有个初步的了解,从而为后面的学习打下基础. 学

CSS+div网页制作PS切图攻略

认识Photoshop(PS)CSS切图必用工具 Adobe PHOTOSHOP平时我们又被称为PS.   div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图像编辑软件",并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像.图形.文字.视频.出版各方面都有涉及. 请看下面介绍: 平面设计 平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖.海报,这些具有丰富图像的平面印刷

Dreamweaver网页制作教程:超级链接

  超级链接 作为网站肯定有很多的页面,如果页面之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的.为了建立起网页之间的联系我们必须使用超级链接.称"超级链接",是因为它什么都能链接,如:网页.下载文件.网站地址.邮件地址--等等.下边我们就来讨论怎样在网页中创建超级链接. [页面之间的超级连接] 在网页中,单击了某些图片.有下划线或有明示链接的文字就会跳转到相应的网页中去. 1.在网页中选中要做超级链接的文字或者图片. 2.在属性面板中单击黄色文件夹图标,在弹出的对话框里

学习网页制作基础入门教程(3)字体标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 标题标签 1. 使用方法:<H1>标题內容</H1> 2. 标签解释:标题的大小一共有六种,两个标签一组,也就是从 <H1> 到 <H6> , <H1> 最大,<H6>最小.使用标题标签时,该标签会将字体变为粗体字,并会自成一行. 3. 使用范例: 原始碼 呈現結果 <H1>标题1</H1> 标题1