Go语言视频零基础入门到精通

吴会 · 发表于 2011-7-29 21:24:11

css 尺寸 (Dimension) 属性答应你控制元素的高度和宽度。同样，它答应你增加行间距。

css 尺寸实例：
使用像素值设置图像的高度
本例演示如何使用像素值设置元素的高度。

<HTML>
<head>
<style type="text/css">
img.normal
{
height: auto
}

img.big
{
height: 160px
}

img.small
{
height: 30px
}
</style>
</head>
<body>

<img class="normal" src="/i/eg_smile.gif" />
<br />
<img class="big" src="/i/eg_smile.gif" />
<br />
<img class="small" src="/i/eg_smile.gif" />

</body>
</html>

使用百分比设置图像的高度
本例演示如何使用百分比值来设置元素的高度。

<html>
<head>
<style type="text/css">
img.normal
{
height: auto
}

img.big
{
height: 50%
}

img.small
{
height: 10%
}
</style>
</head>
<body>

<img class="normal" src="/i/eg_smile.gif" />
<br />
<img class="big" src="/i/eg_smile.gif" />
<br />
<img class="small" src="/i/eg_smile.gif" />

</body>
</html>

使用像素值来设置元素的宽度
本例演示如何使用像素值来设置元素的宽度。

<html>
<head>
<style type="text/css">
img
{
width: 200px
}
</style>
</head>
<body>

<img src="/i/eg_smile.gif" />

</body>
</html>

使用百分比来设置元素的宽度
本例演示如何使用百分比值来设置元素的宽度。

<html>
<head>
<style type="text/css">
img
{
width: 50%
}
</style>
</head>
<body>

<img src="/i/eg_smile.gif" />

</body>
</html>

设置元素的最大高度
本例演示如何设置一个元素的最大高度。

<html>
<head>
<style type="text/css">
p
{
max-height: 10px
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

<img src="/i/eg_smile.gif" />

</body>
</html>

使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。

<html>
<head>
<style type="text/css">
p
{
max-width: 300px
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

</body>
</html>

使用百分比来设置元素的最大宽度
本例演示如何使用百分比值来设置元素的最大高度。

<html>
<head>
<style type="text/css">
p
{
max-width: 50%
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

</body>
</html>

使用像素值来设置元素的最小高度
本例演示如何使用像素值来设置元素的最小高度。

<html>
<head>
<style type="text/css">
p
{
min-height: 100px
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

<img src="/i/eg_smile.gif" />

</body>
</html>

使用像素值来设置元素的最小宽度
本例演示如何使用像素值来设置元素的最小宽度。

<html>
<head>
<style type="text/css">
p
{
min-width: 1000px
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

<img src="/i/eg_smile.gif" />

</body>
</html>

使用百分比来设置元素的最小宽度
本例演示如何使用百分比值来设置元素的最小宽度。

<html>
<head>
<style type="text/css">
p
{
min-width: 200%
}
</style>
</head>
<body>

<p>gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。
gjrencai.com文本css测试。gjrencai.com文本css测试。gjrencai.com文本css测试。</p>

<img src="/i/eg_smile.gif" />

</body>
</html>

使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。

<html>

<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>

<body>

<p>
gjrencai.com行高的段落测试。
在大多数浏览器中默认行高大约是 110% 到 120%。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
</html>

使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。

<html>

<head>
<style type="text/css">
p.small
  {
  line-height: 10px
  }
p.big
  {
  line-height: 30px
  }
</style>
</head>

<body>

<p>
gjrencai.com行高的段落测试。
在大多数浏览器中默认行高大约是 20px。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
</html>

使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。

<html>

<head>
<style type="text/css">
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>

<body>

<p>
gjrencai.com行高的段落测试。
默认行高大约是 1。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
gjrencai.com行高的段落测试。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
</html>

css 尺寸属性
css 尺寸属性答应你控制元素的高度和宽度。同样，还答应你增加行间距。

属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

javalearner · 发表于 2011-7-29 21:38:44

谢谢楼主分享。

zj905 · 发表于 2011-9-2 19:40:21

谢谢楼主分享。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

CSS 尺寸 (Dimension)