width:像素值;
height:像素值;
width，height与实际大小不一致时，图片会拉伸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img
{
width:60px;
height:60px;
}
</style>
</head>
<body>
<img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>
border:1px solid red;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img
{
widht:60px;
height:60px;
border:1px solid red;
}
</style>
</head>
<body>
<img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>
text-align:取值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:300px;
height:80px;
border:1px solid silver;
}
.div1{text-align:left;}
.div2{text-align:center;}
.div3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div1">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div2">
<img src=" img/girl.gif" alt=""/>
</div>
<div class="div3">
<img src=" img/girl.gif" alt=""/>
</div>
</body>
</html>
vertical-align定义周围的行内元素或文本相对于该元素的垂直方式，而不是该元素相对于父元素的垂直对齐。
vertical-align:取值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{width:60px;height:60px;}
#img1{vertical-align:top;}
#img2{vertical-align:middle;}
#img3{vertical-align:bottom;}
#img4{vertical-align:baseline;}
</style>
</head>
<body>
绿叶学习网<img id="img1" src="img/girl.gif" alt=""/>绿叶学习网（top）
<hr/>
绿叶学习网<img id="img2" src="img/girl.gif" alt=""/>绿叶学习网（middle）
<hr/>
绿叶学习网<img id="img3" src="img/girl.gif" alt=""/>绿叶学习网（bottom）
<hr/>
绿叶学习网<img id="img4" src="img/girl.gif" alt=""/>绿叶学习网（baseline）
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:80px;
border:1px solid silver;
}
.div1{vertical-align:top;}
.div2{vertical-align:middle;}
.div3{vertical-align:bottom;}
.div4{vertical-align:baseline;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div1">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div2">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div3">
<img src="img/girl.gif" alt=""/>
</div>
<div class="div4">
<img src="img/girl.gif" alt=""/>
</div>
</body>
</html>
图文混排，指文字围绕着图片进行布局。
float:取值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{float:left;}
p{
font-family:"微软雅黑";
font-size:12px;
}
</style>
</head>
<body>
<img src="img/lotus.png" alt=""/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>