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. hibernate笔记--缓存机制之 二级缓存(sessionFactory)和查询缓存

    二级缓存(sessionFactory): Hibernate的二级缓存由SessionFactory对象管理,是应用级别的缓存.它可以缓存整个应用的持久化对象,所以又称为“SessionFactor ...

  2. Apworks框架实战（二）：开始使用

    要使用Apworks进行应用程序开发,您需要安装Visual Studio 2012以上的版本(以下简称Visual Studio 2012+),从Apworks 2.5开始,需要Micrsoft.N ...

  3. mybatis中的#和$的区别（转）

    #相当于对数据 加上 双引号,$相当于直接显示数据 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sq ...

  4. Lind.DDD.Events事件总线～自动化注册

    回到目录 让大叔兴奋的自动化注册 对于领域事件之前说过,在程序启动时订阅(注册)一些事件处理程序,然后在程序的具体位置去发布(触发)它,这是传统的pub/sub模式的体现,当然也没有什么问题,为了让它 ...

  5. 我与ADO.NET二三事(2)

    继上篇开始,这里主要再次精简.因为大家已经熟悉了主要思想以及它的工作方式.那么这里提供的案例改动会很大.上篇的DatabaseCommand***均是为了大家能够轻松的理解所临时编写的.这次提供的接口 ...

  6. Quartz.net配置文件实例及cron表达式详解

    从XML文件创建作业 最新版本的quartz.net支持直接从xml文件创建作业,使用起来很方便.配置文件的格式可以参考下面的例子 <?xml version="1.0" e ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. 如何调用外部的Web API

    Uri uri = new Uri(url + "?" + postData); System.Net.HttpWebRequest request = (System.Net.H ...

  9. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  10. [SharePoint]javascript client object model 获取lookup 类型的field的值，包括user类型（单人或者多人）的值。how to get the multiple user type/lookup type field value by Javascript client object model

    1. how to get value var context = new SP.ClientContext.get_current(); var web = context.get_web(); v ...