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. 如何将 asp.net core 应用进行 docker 容器部署

    asp.net core 部署在 docker 容器中比较简单,但常因asp.net core程序发布的问题造成容器无法正常启动.现在把详细的操作的步骤记录如下: 一.asp.net core web ...

  2. python第三十天-类

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很 ...

  3. python第九天----今天来晚了!

    作业 1. HAproxy配置文件操作1. 根据用户输入输出对应的backend下的server信息2. 可添加backend 和sever信息3. 可修改backend 和sever信息4. 可删除 ...

  4. if条件简单语法

    if语句是实际工作中最重要最常用的语句. if条件语法: 单分支结构 if [ 条件 ] then 指令 fi 或 if [ 条件 ]:then 指令 fi if 单分支条件中文编程形象语法: 如果 ...

  5. django中admin

    我们在models中建立了表结构,想要在admin中表示: from django.contrib import admin from . import models for table in mod ...

  6. 在 vs2017 中使用 C# 7 新特性。

    几个概念区分: 1.C#   C# 是一种.net 语言,与此类似的还有 vb,F#.不同版本的语言要配合相应的解释器才能发挥作用.目前 最新版本 为 C# 7.3. 2.VS        VS 是 ...

  7. Java设计模式之一 ----- 单例模式

    什么是单例模式 保证一个系统中的某个类只有一个实例而且该实例易于外界访问.例如Windows界面的任务管理器就可以看做是一个单例. 单例模式的使用场景 需要频繁的进行创建和销毁的对象: 创建对象时耗时 ...

  8. Nginx使用教程(一)：下载并编译安装Nginx

    安装依赖 <br\>我们已经选择下载程序源代码进行手动编译,而不是使用软件包管理器(如Yum,Aptitude或Yast)进行安装. 这个选择有两个原因. 首先,软件包可能不包含在您的Li ...

  9. BookStrap之模板继承

    模板继承 (extend) Django模版引擎中最强大也是最复杂的部分就是模版继承了.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block ...

  10. js中采用词法作用域

    所谓的 词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域. 在 js 中词法作用域规则: 1.函数允许访 ...