CSS 尺寸 (Dimension) 实例
CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性 描述
height 设置元素的高度。
line-height    设置行高。
max-height 设置元素的最大高度。
max-width  设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width  设置元素的最小宽度。
width  设置元素的宽度。

#############
1.使用像素值设置图像的高度
本例演示如何使用像素值设置元素的高度。
    <style type="text/css">
        img.normal{
            height:auto
        }
        img.big{
            height:160px
        }
        img.small{
            height:30px
        }
    </style>
</head>
<body>
<img class="normal" src="eg_smile.gif" />
<br />
<img class="big" src="eg_smile.gif" />
<br />
<img class="small" src="eg_smile.gif" />

</body>

2.使用百分比设置图像的高度
本例演示如何使用百分比值来设置元素的高度。
    <style type="text/css">
        img.normal{
            height:auto
        }
        img.big{
            height: 50%;
        }
        img.small{
            height:10%;
        }
    </style>
</head>
<body>
<img class="normal" src="eg_smile.gif" />
<br />
<img class="big" src="eg_smile.gif" />
<br />
<img class="small" src="eg_smile.gif" />

</body>
3.使用像素值来设置元素的宽度
本例演示如何使用像素值来设置元素的宽度。
    <style type="text/css">
        img{
            width:300px;
        }
    </style>
</head>
<body>
<img src="eg_smile.gif">
</body>

4.使用百分比来设置元素的宽度
本例演示如何使用百分比值来设置元素的宽度。
    <style type="text/css">
        img{
            width:50%;
        }
    </style>
</head>
<body>
<img src="eg_smile.gif">
</body>

5.设置元素的最大高度
本例演示如何设置一个元素的最大高度。
    <style type="text/css">
        p{
            max-height: 10px;
        }
    </style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>

<img src="eg_smile.gif" />

6.使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。
    <style type="text/css">
        p{max-width:300px}
    </style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
</body>

7.使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。
p
{
max-width: 300px
}

8.使用百分比来设置元素的最大宽度
本例演示如何使用百分比值来设置元素的最大高度。

p
{
max-width: 50%
}

9.使用像素值来设置元素的最小高度
本例演示如何使用像素值来设置元素的最小高度。
p
{
min-height: 100px
}

10.使用像素值来设置元素的最小宽度
本例演示如何使用像素值来设置元素的最小宽度。
p
{
min-width: 1000px
}

11.使用百分比来设置元素的最小宽度
本例演示如何使用百分比值来设置元素的最小宽度。
<style type="text/css">
p
{
min-width: 200%
}
</style>
</head>
<body>

<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>

<img src="/i/eg_smile.gif" />

12.使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
    <style type="text/css">
        p.small {line-height:90%;}
        p.big {
            line-height: 200%;}
    </style>
</head>
<body>
<p>这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="big">
    这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
<p class="small">
    这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

</body>

13.使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
    <style type="text/css">
        p.small {line-height:10px;}
        p.big {
            line-height: 30px;}
    </style>

14.使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
    <style type="text/css">
        p.small {line-height:0.5}
        p.big {
            line-height: 2}
    </style>

CSS 尺寸 (Dimension) 实例的更多相关文章

  1. W3School-CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 C ...

  2. CSS 尺寸 (Dimension)

    CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允许你增加行间距. 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度. 使用百分比设置图像的高度 这个例子演 ...

  3. CSS：CSS 尺寸 (Dimension)

    ylbtech-CSS:CSS 尺寸 (Dimension) 1.返回顶部 1. CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允 ...

  4. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  5. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  6. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  7. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  8. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  9. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

随机推荐

  1. DevOps自动化工具集合

    版本控制&协作开发:GitHub.GitLab.BitBucket.SubVersion.Coding.Bazaar 自动化构建和测试:Apache Ant.Maven .Selenium.P ...

  2. Azure 标准与高级托管磁盘存储的相互转换

    托管磁盘提供两种存储选项:高级(基于 SSD)和标准(基于 HDD). 它允许基于性能需求在这两个选项之间轻松切换,并保障最短停机时间. 非托管磁盘不具备此功能. 但可以轻松转换为托管磁盘,以便在这两 ...

  3. python第三十一天-----类的封装、继承,多态.....

    封装 封装最好理解了.封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. cla ...

  4. python第二天 列表、元组

    今天学习了列表.元组相关的知识:与C中的数组列表相似,元组为只读列表: 以及切片相关操作: #!usr/bin/env python #-*-coding:utf-8-*- # Author calm ...

  5. oracle使用with as提高查询效率

    经常在开发过程中会用到视图或组合查询的情况,但由于涉及表数据经常达到千万级别的笛卡尔积,而且一段查询时会反复调用,但结果输出往往不需要那么多,可以使用with将过滤或处理后的结果先缓存到临时表(此处原 ...

  6. 【BZOJ4310】跳蚤

    [BZOJ4310]跳蚤 Description 很久很久以前,森林里住着一群跳蚤.一天,跳蚤国王得到了一个神秘的字符串,它想进行研究. 首先,他会把串分成不超过 k 个子串,然后对于每个子串 S,他 ...

  7. 【BZOJ3622】已经没有什么好害怕的了

    Description 已经使 Modoka 有签订契约, 和自己一起战斗的想法后 , Mami 忽然感到自己不再是孤单一人了呢. 于是, 之前的谨慎的战斗作风也消失了 , 在对 Charlotte ...

  8. 洛谷P2342-叠积木

    Problem 洛谷P2342-叠积木 Accept: 373   Submit: 1.1k Time Limit: 1000 mSec    Memory Limit : 128MB Problem ...

  9. lamp环境安装

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code lamp环境安装 1.查看mysql是否安装 service mysql status 2.查 ...

  10. Redis和Memcached的一些区别

    我们都知道,把一些热数据存到缓存中可以极大的提高速度,那么问题来了,是用Redis好还是Memcached好呢,以下是它们两者之间一些简单的区别与比较: 1. Redis不仅支持简单的k/v类型的数据 ...