一、介绍
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
尺寸单位：百分比、in英寸、cm厘米、mm毫米、pt磅、px像素、em（1em等于当前字体的尺寸，2em等于当前字体尺寸的2倍）
二、知识点介绍
1、宽度
2、高度
三、上课对应视频的说明文档
1、宽度
width 属性设置元素的宽度
实例：
<html>
<head>
<style type="text/css">
img
{
width: 300px
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
</body>
</html>
1.1、min-width 属性设置元素的最小宽度
实例：
<html>
<head>
<style type="text/css">
p
{
min-width: 200%
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
。</p>
<img src="/i/eg_smile.gif" />
</body>
</html>
1.2、max-width 定义元素的最大宽度
实例：
<html>
<head>
<style type="text/css">
p
{
max-width: 300px
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
</body>
</html>
2、高度
height 属性设置元素的高度
实例：
<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>
2.1、min-height 属性设置元素的最小高度
实例：
<html>
<head>
<style type="text/css">
p
{
min-height: 1000px
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
<img src="/i/eg_smile.gif" />
</body>
</html>
2.2、max-height 属性设置元素的最大高度
实例：
<html>
<head>
<style type="text/css">
p
{
max-height: 10px
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
<img src="/i/eg_smile.gif" />
</body>
</html>
网友评论