建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

CSS入门教程:长度与单位

时间:2011-03-06 07:09来源: 作者: 点击:
CSS入门教程,本文介绍一下长度和单位,首先了解一下什么是长度,什么是单位。 长度(表示为),其公式为值是一个实数,实数后面再加一个单位(例如:px,em等),如果长度为0,也可以不加单位 示例 div { margin: 0; } div { margin:

CSS入门教程,本文介绍一下长度和单位,首先了解一下什么是长度,什么是单位。

长度(表示为<length>),其公式为值是一个实数<number>,实数后面再加一个单位(例如:px,em等),如果长度为0,也可以不加单位

示例

div
{
	margin: 0;
}

div
{
	margin: 0px;
}

div
{
	margin: 0em;
}

上面三个例子描述的div的margin都为0,因此可以不用加单位

很多属性可以使用负数的长度值,如果负数的长度值超出了CSS能容纳的限制,此长度值将被转变为可以支持的最接近的长度;如果某个属性不支持负数的长度,那么这个属性的声明将被忽略

CSS长度与单位包含两种类型:相对(relative)与绝对(absolute)

绝对长度不依赖于环境(显示器、分辨率、操作系统等)

相对长度依赖于用户使用的环境

CSS绝对长度

CSS支持的绝对长度单位in,cm,mm,pt,pc

 

绝对长度单位通常用于打印

CSS相对长度

CSS支持的相对长度单位em,ex,px

 

相对长度依赖于使用的环境

长度(表示为<length>),其公式为值是一个实数<number>,实数后面再加一个单位(例如:px,em等),如果长度为0,也可以不加单位

示例


div
{
 margin: 0;
}

div
{
 margin: 0px;
}

div
{
 margin: 0em;
}


上面三个例子描述的div的margin都为0,因此可以不用加单位

em单位
依赖于最近的字体尺寸

div
{
 font-size: 12px;
}
span
{
 font-size: 5em;
}
<div>
        div中定义了12px的字体.
        <span>
                span中定义了5倍于div的字体.
        </span>
</div>
上面示例中的span中字体为div定义的五倍,因此它是依赖于其父容器的长度

CSS长度与单位示例 -- 可以尝试编辑
CSS长度与单位,em相对字体大小示例
div
{
 font-size: 12px;
 height: 5em;
 border: thick solid red;
}
定义div的字体为12px,div的高度为12px的5倍

CSS长度与单位示例 -- 可以尝试编辑
CSS长度与单位,em相对高度示例
ex单位
em是依赖于最近的字体的大小,ex是相对于小写子母x的高度的倍数。ex测量单位被使用在排版中

px单位
pixel测量单位

px是pixel像素的缩写,这种测量方法依赖于用户计算机显示器的分辨率。例如在相同条件下,1024x768比1280x800的一像素要大。

 

 

 

 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片