<h2 CSS 尺寸 (Dimension) 實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例 CSS ....
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) 實例總結
