让块级盒子居中必须:
- 盒子必须指定了宽度(width)
- 左右外边距设置为auto
示例代码如下:
.div {
width:300px;
margin: 0 auto;
}
插入图片和背景图片的区别:
- 插入图片是我们用到的最多的,比如商品展示类,它移动的位置只能靠盒子模型的padding、margin值来改变。
- 背景图片我们一般用于小图标或者大背景图片,它只能通过 background-position属性来改变。
<style type="text/css">
.pic{
width: 768px;
height: 300px;
border:1px solid red ;
color: red;
/*插入图片 位置设置 */
padding-left: 20px;
}
.bg {
width: 768px;
height: 160px;
border:1px solid red ;
color: red;
background: url(img/bgyys.jpg) no-repeat;
/* 背景图片 位置设置*/
background-position: 20px 20px;
}
</style>
</head>
<body>
<div class="pic">
<p>插入图片</p>
<img src="img/bgyys.jpg" alt="">
</div>
<div class="bg">
<p>背景图片</p>
</div>
</body>