CSS 尺寸 (Dimension) 实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01使用像素值设置图像的高度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>01使用像素值设置图像的高度</title>

		<style type="text/css">

			img.normal {

				height: auto;

			}

			img.big {

				height: 160px;

			}

			img.small {

				height: 30px;

			}

		</style>

	</head>

	<body>

		<img class="normal" src="smile.gif">

		<br />

		<img class="big" src="smile.gif">

		<br />

		<img class="small" src="smile.gif">

	</body>

</html>

02使用百分比设置图像的高度



<html>

	<head>

		<meta charset="utf-8">

		<title>02使用百分比设置图像的高度</title>

		<style type="text/css">

			img.normal {

				height: auto

			}

			img.big {

				height: 50%

			}

			img.small {

				height: 10%

			}

		</style>

	</head>

	<body>

		<img class="normal" src="smile.gif" />

		<br />

		<img class="big" src="smile.gif" />

		<br />

		<img class="small" src="smile.gif" />

	</body>

</html>

03使用像素值和百分比来设置元素的宽度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>03使用像素值和百分比来设置元素的宽度</title>

		<style type="text/css">

			img.one {

				width: 300px;

			}

			img.two {

				width: 50%;

			}

		</style>

	</head>

	<body>

		<img class="one" src="smile.gif" />

		<br />

		<img class="two" src="smile.gif" />

	</body>

</html>

04设置元素的最大高度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>04设置元素的最大高度</title>

		<style type="text/css">

			p {

				max-height: 10px;

			}

		</style>

	</head>

	<body>

		<p>

		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		</p>

		<img src="444.jpg" />

	</body>

</html>

05使用像素值和百分比来设置元素的最大宽度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>05使用像素值和百分比来设置元素的最大宽度</title>

		<style type="text/css">

			p.one {

				max-width: 300px;

			}

			p.two {

				max-width: 10%;

			}

		</style>

	</head>

	<body>

		<p class="one">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

			我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		</p>

		<br />

		<p class="two">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

			我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		</p>

	</body>

</html>

06使用像素值和百分比来设置元素的最小宽度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>06使用像素值和百分比来设置元素的最小宽度</title>

		<style type="text/css">

			p.one {

				min-width: 3000px;

			}

			p.two {

				min-width: 200%;

			}

		</style>

	</head>

	<body>

		<p class="one">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		</p>

		<br />

		<p class="two">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。

		</p>

	</body>

</html>

07使用像素值来设置元素的最小高度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>07使用像素值来设置元素的最小高度</title>

		<style type="text/css">

			p {

				min-height: 250px;

			}

		</style>

	</head>

	<body>

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

		</p>

		<img src="777.jpg" />

	</body>

</html>

08使用百分比,像素值，数值来设置行间距

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>08使用百分比,像素值，数值来设置行间距</title>

		<style type="text/css">

			p.small {

				line-height: 80%;

			}

			p.big {

				line-height: 200%;

			}

			p.small-px {

				line-height: 10px;

			}

			p.big-px {

				line-height: 50px;

			}

			p.small-num {

				line-height: 0.5;

			}

			p.big-num {

				line-height: 2;

			}

		</style>

	</head>

	<body>

		<p>

			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%,大约是 20px,默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。

		</p>

		<p class="small">

			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

		</p>

		<p class="big">

			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

		</p>

		<p class="small-px">

			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

		</p>

		<p class="big-px">

			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

		</p>

		<p class="small-num">

			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

		</p>

		<p class="big-num">

			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

		</p>

	</body>

</html>

CSS 尺寸 (Dimension) 实例总结

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

  1. CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...

  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. 基本概念----Beginning Visual C#

    更多相关文章,见本人的个人主页:zhongxiewei.com 变量 注释方式:// 注释在这里和/* 注释在这里 */ 整形变量的类型: Type Alias for Allowed Values ...

  2. Bootstrap Navbar应用及源码解析

    目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一 ...

  3. jQuery-1.9.1源码分析系列（十） 事件系统——事件体系结构

    又是一个重磅功能点. 在分析源码之前分析一下体系结构,有助于源码理解.实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了:而且jQuery事件系 ...

  4. [Asp.net 5] DependencyInjection项目代码分析-目录

    微软DI文章系列如下所示: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Autofac [ ...

  5. 自己封装的Windows7 64位旗舰版，微软官网上下载的Windows7原版镜像制作，绝对纯净版

    MSDN官网上下载的Windows7 64位 旗舰版原版镜像制作,绝对纯净版,无任何精简,不捆绑任何第三方软件.浏览器插件,不含任何木马.病毒等. 集成: 1.Office2010 2.DirectX ...

  6. Sql Server 备份还原失败错误ERROR:3145(备份集中的数据库备份与现有的数据库不同)及解决办法

    SQL Server备份文件bak,备份后还原出现错误3145,备份集中的数据库备份与现有的 'xxx' 数据库不同. 解决办法如下: 1,新建一个与现有数据库重名的数据库. 如果您不知道数据库名称, ...

  7. javaMail使用163邮箱报535 Error: authentication failed

    javaMail使用网易163邮箱或者是126或者是网易其他邮箱报535 Error: authentication failed javax.mail.AuthenticationFailedExc ...

  8. MongoDb gridfs-ngnix文件存储方案

          在各类系统应用服务端开发中,我们经常会遇到文件存储的问题. 常见的磁盘文件系统,DBMS传统文件流存储.今天我们看一下基于NoSQL数据库MongoDb的存储方案.笔者环境 以CentOS ...

  9. javascript是判断对象是否是数组

    JS中的数据类型: 2大类 原始类型:值保存在变量本地的数据类型 5种:Number String Boolean undefined null Number:8bytes 舍入误差-->四舍五 ...

  10. TinyMCE添加图片 路径自动处理成相对路径

    默认情况下会自动转换你的图片路径如: 转换: /path/name.jpg 为 ../path/name.jpg 带有域名的路径也会被转换为相对路径. 需要修改一个设置convert_urls,官方文 ...