您的位置：首页 > Web前端 > CSS

W3School-CSS 尺寸 (Dimension) 实例

2016-01-04 17:21 609 查看

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) 实例总结

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航