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. [201804012]关于hugepages 3.txt

    [201804012]关于hugepages 3.txt --//有一段时间我一直强调安装oracle一定要配置hugepage,因为现在的服务器内存越来越大,如果还使用4K的页面表,如果内存表占用内 ...

  2. 將UNITY作品上傳到Facebook App！

    前言 大家好,今天要來介紹如何用UNITY 將製作好的遊戲上傳到Facebook,也就是Facebook App.近期Facebook與Unity合作而推出了新的插件,利用插件可上傳分數.邀請好友.P ...

  3. Python基础知识：if语句

    1.模拟网站确保用户名是否重复的方式,无视大小写,用到函数lower() #检查用户名是否重复 current_users=['admin','alex','lebran','kaobi','Jame ...

  4. 最后一个单词的长度的golang实现

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 输入: "He ...

  5. python3的C3算法

    一.基本概念 1. mro序列 MRO是一个有序列表L,在类被创建时就计算出来. 通用计算公式为: mro(Child(Base1,Base2)) = [ Child ] + merge( mro(B ...

  6. IO流_SequenceInputStream(序列流)

    SequenceInputStream(序列流):就是将多个流合成一个有序的流 需求:将三个文件中的数据合并到一个文件中 import java.io.FileInputStream; import ...

  7. php一致性hash算法

    原理部分转自:https://www.jianshu.com/p/e8fb89bb3a61 基本场景 比如你有 N 个 cache 服务器(后面简称 cache ),那么如何将一个对象 object ...

  8. mysql排序索引优化

    为排序使用索引 KEY a_b_c (a,b,c) order by 能使用索引最左前缀 -order by a -order by a,b -order by a,b,c -order by a d ...

  9. day14 Python集合

    定义:由不同元素组成的集合,集合是一组无序排列的可hash值,可以作为字典的key 1.不同元素.2.无序.3.集合中元素必须是不可变类型(数字,字符串,元祖) 特性:集合的目的是将不同的值存放在一起 ...

  10. linux shell脚本调用java main方法 代码

    #!/bin/sh # #该脚本为Linux下启动java程序的通用脚本.即可以作为开机自启动service脚本被调用, #也可以作为启动java程序的独立脚本来使用. # #Author: tuda ...