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. python第七十九天--第十四周作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [Winform-WebBrowser]-在html页面中js调用winForm类方法

    在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部: 1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类可以com组件的 ...

  3. Win10安装Redis

    Redis安装 下载地址:https://github.com/MicrosoftArchive/redis/releases 下载对应的版本:这里下载Redis-x64-3.2.100 解压文件 进 ...

  4. 【HTTP缓存】浏览器缓存理论知识

    时间:2016-12-12 17:51:30 作者: zhongxia 零.前言 这里主要写的是理论,具体实践的比较少,后期写一个实践教程,内容基本都是从参考文章里面抄过来的[看完文章,顺便写做下笔记 ...

  5. Go学习笔记02-基本语法

    目录 变量定义 代码示例 变量定义 内建变量类型 复数回顾 强制类型转换 常量 枚举类型 变量定义 代码示例 package main import "fmt" /* 此处定义的变 ...

  6. C#用默认浏览器打开特定网址的几种方法

    方法一:从注册表中读取默认浏览器可执行文件路径 private void button1_Click(object sender, EventArgs e) { //从注册表中读取默认浏览器可执行文件 ...

  7. C++11多线程のfuture，promise，package_task

    一.c++11中可以在调用进程中获取被调进程中的结果,具体用法如下 // threadTest.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" ...

  8. Python字符串操作之字符串分割与组合

    12.字符串的分割和组合 12.1 str.split():字符串分割函数 通过指定分隔符对字符串进行切片,并返回分割后的字符串列表. 语法: str.split(s, num)[n] 参数说明: s ...

  9. SHELL-收集Oracle已应用的PSU信息

    1. 命令收集版本信息 # 创建数据收集脚本文件 OPER_FILE=${EXECUTE_ID}_oper.sh if [[ "${OPER_USER}" = "${US ...

  10. esp8266(3) Arduino通过ESP8266连接和获取网站源代码

    http://www.plclive.com/a/tongxinjiekou/2016/0422/374.html 在上一篇8266的基础上,这一篇做个具体的连接网站的例子,供大家参考.上一篇基础篇请 ...