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. vuejs组件库pk介绍

    vuejs可以说是近2年多以来最火的前端框架,随之而来就产生了非常多的组件库,我们来看看其中比较著名和人气旺盛的几个 1. Vuetify-符合material design设计理念, star数量7 ...

  2. Java概述和项目演示

    Java概述和项目演示 1. 软件开发学习方法 多敲 多思考 解决问题 技术文档阅读(中文,英文) 项目文档 多阅读源码 2. 计算机 简称电脑,执行一系列指令的电子设备 3. 硬件组成 输入设备:键 ...

  3. SAP ABAP 如何查找SMOD增强

    1.查找程序名 T-CODE:SE93 2.查找开发类 T-code:se38 3.查找SMOD增强 T-CODE:SE16N.表:TADIR 4.查看增强具有哪些功能 T-CODE:SE16N.表: ...

  4. 在pycharm中每次运行代码不使用console而使用run

    问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的 ...

  5. 转://Oracle 11gR2 RAC ASM磁盘全部丢失后的恢复

    一.环境描述 (1)Oracle 11.2.0.3 RAC ON Oracle Linux 6 x86_64,只有一个ASM外部冗余磁盘组--DATA: (2)OCR,VOTEDISK,DATAFIL ...

  6. 快速排序 Java实现的快速排序

    快速排序  Java实现的快速排序: package xc; import java.util.Arrays; import java.util.Random; /** * * @author dax ...

  7. dns与wins的区别

    将主机名字解析称为ip地址有四种办法: dns.winds.hosts文件.lmhosts文件 dns和hosts是很多系统cout采用的一个名称解析的方法,wins和lmhosts是微软的操作系统此 ...

  8. ThinkPHP框架整合极光推送DEMO

    极光推送(JPush)是独立的第三方云推送平台,致力于为全球移动应用开发者提供专业.高效的移动消息推送服务. 本篇博文讲述如何在将极光推送DEMO整合到ThinkPHP框架中,我使用的是极光推送PHP ...

  9. Yii2.0页面提示消息

    适用情况:比如提交一个表单,提交完成之后在页面展示一条提示消息. 控制器里面这样写: 单条消息: \Yii::$app->getSession()->setFlash('error', ' ...

  10. Codeforces Round #553 (Div. 2) D. Stas and the Queue at the Buffet 贪心+公式转化

    题意 给出n个pair (a,b) 把它放在线性序列上 1--n 上 使得  sum(a*(j-1)+b*(n-j))  最小 思路 :对式子进行合并 同类项 有:    j*(a-b)+  (-a+ ...