-
Notifications
You must be signed in to change notification settings - Fork 0
/
css16.html
33 lines (31 loc) · 2.58 KB
/
css16.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 尺寸</title>
</head>
<style>
img.normal {height:auto;} /*设置元素的高度 */
img.big {height:120px;}
p.ex {height:100px;width:100px;}
img.one {height:80%;} /*使用百分比设置图片的高度*/
img.small {height:10%;}
img {width:200px;} /*使用像素值来使用元素的宽度*/
p.two {max-height:50px;background-color:yellow;} /*设置元素最大的高度;min-height是最低高度*/
p.three {max-width:20%;background-color: red;} /*使用百分比设置元素最大的宽度;min-width是最低宽度*/
</style>
<body>
<img class="normal" src="http://www.w3cschool.cn/attachments/cover/cover_css.png" width="95" height="84"/><br>
<img class="big" src="http://www.w3cschool.cn/attachments/cover/cover_css.png" width="95" height="84"/><br>
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>The height and width of this paragraph is 100px.</p>
<img class="one" src="http://www.w3cschool.cn/attachments/cover/cover_css.png" width="95" height="84"/><br>
<img class="small" src="http://www.w3cschool.cn/attachments/cover/cover_css.png" width="95" height="84"/><br>
<img src="http://www.w3cschool.cn/attachments/cover/cover_css.png" width="95" height="84"/>
<p class="two">本段落的最大高度被设置为 50px本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
<br>
<p class="three">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
</body>
</html>