您好,欢迎来到素彩网!

基础(16)你必须了解的网页设计常用度量单位

来源:sc115.com | 423 次浏览 | 2011-07-29

标签: Dreamweaver cs3 基础你必须了解的网页设计常用度量单位

一、长度单位

长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是,在设计的时候需要为元素的位置、尺寸精确地定义一些值,以使其达到预期的效果。

CSS的主要功能之一就是CSS定位,这个定位的概念即包括位置的定位,也包括尺寸的定位。无论哪一种,都需要使用长度单位,不然,精确定位就无从谈起。

在CSS中,长度是一种度量尺寸,用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。

1.定义长度

在Dreamweaver 中要定义长度,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“-”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,这个数值可以是整数,也可以是小数。然后再在该选项的长度单位下拉列表框中选择一种长度单位。长度单位一般是一个由两个字母组成的单位缩写,例如cm,pt,em等。

2.绝对长度单位

网页定义上常常使用的绝对长度值由厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等等。

单位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc)

英寸 1.0 2.54 25.4 72 6

派卡 0.16667 0.4233 4.233 12 1.0

厘米 0.3937 1 10 28.3464 4.7244

毫米 0.03937 0.1 1.0 2.83464 0.47244

磅 0.01389 0.0352806 0.352806 1.0 0.83333

绝对长度值的使用范围比较有限,只有在完全知道外部输出设备的具体情况下,才使用绝对长度值。也就是说,绝对长度值最好用于打印机输出设备,而在仅仅作为屏幕显示时,使用绝对长度值意义不大,应该尽量使用相对长度值。

3.相对长度值

每一个浏览器都有其自己默认的通用尺寸标准,这个标准可以由系统决定,也可以由用户按照自己的爱好进行设置。因此,这个默认值尺寸往往是用户觉得最适合的尺寸。于是使用相对长度值,就可以是需要定义尺寸的元素按照默认大小为标准,相应地按比例缩放。这样就不可能产生难以辨认的情况。其实,百分比单位以及关键字都能产生相类似的效果。

CSS还支持下列三种长度的相对单位:em(当前字体中字母M的宽度)、ex(当前字体中字母X的高度)、px(一个象素的大小)。

使用em和ex的目的就是为所给的字体设置合适的宽度,而没有必要知道字体有多大,在显示时,可通过比较当前字体中的M和X来确定。字体越大,所对应的em和ex也就越大。

以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常不是个好方法。首先,象素的大小依分辩率变化较大,大多数用户都会将显示器设置成尽可能高的分辩率,从而导致象素太小,而无法阅读。

二、百分比单位

在Dreamweaver 中要使用百分比,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“—”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,符号后面可以输入任意值,但是由于在某些情况下,浏览器不能处理带小数的百分数,因此最好不用带小数的百分比。然后再在该选项的长度单位下拉列表框中选择“%”。

百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数情况下,这个参照值是此元素本身的字体大小。

搜索: Dreamweaver cs3 基础你必须了解的网页设计常用度量单位 

最热-Dreamweaver CS3

基础(23)如何快速在Dreamweaver CS3中编辑网页标签

基础(17)Dreamweaver CS3临时文件的工作方式

基础(24)用Dreamweaver CS3 巧妙格式化您的表格

基础(18)在Dreamweaver CS3中加入CSS样式表的四种方法

基础(25)Dreamweaver CS3中使用层的一些技巧和建议

基础(19)Dreamweaver CS3 实现多分辨率层定位

基础(26)如何在Dreamweaver CS3中做自定义弹出窗口

基础(27)玩转Dreamweaver CS3中的层及应用

基础(28)在Dreamweaver CS3中实现不同分辨率下的层定位

基础(20)使用Dreamweaver CS3文件库功能快速更新网站

基础(29)深入了解Dreamweaver CS3中的内置Fireworks功能

基础(30)教您如何处理Deamweaver CS3中CSS应用无效的问题

基础(31)教您深入了解新的 Dreamweaver CS3 CSS 布局

素材
精美实用的提示框矢量图7精美实用的提示框矢量图7
精美实用的提示框矢量图6精美实用的提示框矢量图6
折纸网站设计矢量图5折纸网站设计矢量图5
精美实用的提示框05—矢量图精美实用的提示框05—矢量图
精美实用的提示框矢量图4精美实用的提示框矢量图4
折纸网站设计矢量图4折纸网站设计矢量图4
精美实用的提示框矢量图3精美实用的提示框矢量图3
精美实用的提示框矢量图2精美实用的提示框矢量图2
精美实用的提示框矢量图精美实用的提示框矢量图