一、 CSS定位方式
CSS的定位方式有两种：相对定位和绝对定位。
相对定位：相对于元素本身在文档流中的位置进行定位。通过top, right, bottom, left属性设置偏移量。
绝对定位：相对于最近的已定位的祖先元素进行定位，如果祖先元素中没有已定位的元素，则相对于文档的body元素进行定位。通过top, right, bottom, left属性设置偏移量。
二、 在HTML中插入图片
使用HTML的img标签可以在网页中插入图片。
<img src="图片的URL地址" alt="图片描述" width="图片的宽度" height="图片的高度">
三、 在CSS中设置图片的定位
在CSS中通过position属性对img标签进行定位。
img {
position: relative; /*设置相对定位*/
left: 50px; /*设置水平方向偏移50像素*/
top: 20px; /*设置垂直方向偏移20像素*/
}
上面代码可以将图片相对于它在原来的位置向右移动50像素，向下移动20像素。
四、 在CSS中设置图片的大小
在CSS中可以通过width和height属性对图片进行设置。如果只设置其中一个属性，另一个属性会根据图片的比例自动调整大小。
img {
width: 200px; /*设置宽度为200像素*/
height: 150px; /*设置高度为150像素*/
}
五、 案例展示
下面是一个具体的案例，展示了如何在HTML中插入图片，并通过CSS进行定位和大小设置。
<!DOCTYPE html>
<html>
<head>
<title>图片定位示例</title>
<style>
img {
position: relative;
left: 50px;
top: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>图片定位示例</h1>
<img src="https://unsplash.com/photos/Lb1xOD5CdLM" alt="风景图片">
</body>
</html>
在上面的例子中，图片相对于它原来的位置向右移动50像素，向下移动20像素，并且设置了宽度为200像素，高度为150像素。
六、 总结
CSS中的相对定位和绝对定位可以用来进行元素的位置调整，通过img标签和CSS的width和height属性可以调整图片的大小。这些属性和方法可以相互结合，实现图片的定位和大小调整。
