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. Node.js 爬虫初探

    前言 在学习慕课网视频和Cnode新手入门接触到爬虫,说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherrio. 使用http直接获取url路 ...

  2. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  3. .net winform的IsMdiContainer属性

    .net winform的IsMdiContainer属性 获取或设置一个值,该值指示窗体是否为多文档界面 (MDI) 子窗体的容器. 当你想让某个窗体成为其他窗体的父窗体时,请先把窗体的IsMdiC ...

  4. Android网络编程1

    最近在自学Android开发,从这篇开始作为我学习android开发的笔记,来记录学习过程中遇到的问题点和其解决的方法: Ui界面代码 <?xml version="1.0" ...

  5. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  6. 背水一战 Windows 10 (12) - 绘图: Shape, Path

    [源码下载] 背水一战 Windows 10 (12) - 绘图: Shape, Path 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Shape - 图形 Path - 路径 ...

  7. SharePoint创建web application出现“The password supplied with the username was not correct”错误的解决方法

    平台环境 Windows Server 2012 R2 Standard, SharePoint Server 2010, Microsoft SQL Server 2012 (SP1) 问题描述 在 ...

  8. JSON总结（java篇）

    JSON总结(java篇一) JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于 ...

  9. ABP之动态WebAPI(一)

    ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没有跨过HttpHan ...

  10. 今天大雪 看雪花飘落HTML5特效

    今天大雪,弄一个下雪的特效.html5飘落的雪花堆积动画特效 查看效果:http://hovertree.com/texiao/js/snow.htm 以下是完整源代码,保存到HTML文件也可以看效果 ...