文字、盒子居中与插入、背景图片区别_文件中图片标题和文字居中的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/97658668

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {
		width: 300px;
		height: 100px;
		border: 1px solid blue;
		text-align: center;   /*文字居中水平*/
		margin: 10px auto;      /*盒子水平居中 左右margin改为auto即可*/
	}	
	section {
		width: 400px;
		height: 400px;
		border: 1px solid #000;
	}
	section img { 
		width: 200px;    /*插入图片更改大小   width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin或padding 盒模型*/
		margin-left: 30px; 	 /*插入的图片也是一个盒子*/
	}
	aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(1.png) 30px 50px /*调整位置 background-position:背景位置 快捷键bg+后tab键盘*/no-repeat;
		background-size: 200px 210px;    /*背景图片更改大小只能用 background-size*/
	}
	</style>
</head>
<body>	
	<div>文字水平居中</div>
	<section>
		<img src="1.jpg" alt="">
	</section>
	<aside>
		
	</aside>
</body>
</html>

插入图片占位置，背景图片不占位置（大小）
一般情况下，背景图片适合做一些小图标使用，产品展示之类的就用插入图片