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. HTML5 Canvas 画布

    一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...

  2. 常见ArcGIS操作（以10.0为例）

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.建立缓冲区 先在图层属性表里面新建一个缓冲区半径字段,然后对该字段赋 ...

  3. asp.net WebService+Ajax调用

    default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  4. 关于IIS和.NET 4.0的问题总结

    注册asp.net 4.0 到iis   如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下 运行->cmd Microsoft Windows [版本 6.1.7601 ...

  5. android srudio使用HttpClient

    最近学习Android网络编程,在AndroidStudio下无法使用HttpClient,在网上找到了答案在这里记下来: //官方原文Apache HTTP Client RemovalAndroi ...

  6. sessionPageState与视图状态存储

    这个配置节甚是简单,在MSDN中的介绍也甚是简单:为 ASP.NET 应用程序配置页的视图状态设置. historySize的作用是设置要存储在页历史记录中的项数. 但是这根本是看不明白他是干嘛的,百 ...

  7. EF架构~EF异步改造之路~让DbContextRepository去实现异步接口

    回到目录 返回异步与并行目录 上一讲中,我们定义了三个异步操作接口,这回我们将对它进行实现,而有一个基础知识需要大家清楚,那就是实现接口的方式,一般我们使用默认的方式(隐式实现),这种方法实现的接口方 ...

  8. 强大的HTTP包装开源项目ASIHTTPRequest介绍

    ASIHTTPRequest 是一个直接在CFNetwork上做的开源项目,提供了一个比官方更方便更强大的HTTP网络传输的封装.它的特色功能如下: 1,下载的数据直接保存到内存或文件系统里 2,提供 ...

  9. 使用abp模板创建解决方案

    前言 ABP官网(http://www.aspnetboilerplate.com/),本地环境 sql server EXPRESS +vs2013 通过官网生成 module zero 解决方案模 ...

  10. 微信JSApi支付~集成到ＭＶＣ环境后的最后一个坑（网上没有这种解决方案）

    返回目录 大叔第一人 之前写了关于微信的坑<微信JSApi支付~坑和如何填坑>,今天将微信的jsapi支付封装到了MVC环境里,当然也出现了一些新的坑,如支付参数应该是Json对象而不是J ...