块级盒子水平居中左右外边距设置为auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 清除盒子默认的内外边距 */
* {
margin: 0;
padding: 0;
}
span {
margin: 0 30px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
padding: 20px;
/* margin值的简写意思和padding完全相同 */
/* margin: 100px 20px; */
/* 块级盒子水平居中 */
/* margin-left: auto;
margin-right: auto; */
margin: auto;
}
</style>
</head>
<body>
<div>外边距</div>
<span>行内元素为照顾兼容性,尽量只设置左右内外边距,不设置上下内外边距</span>
</body>
</html>
文字水平居中是text-align:center;块级盒子水平居中是左右margin改为auto。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 盒子居中 */
margin: 50px auto;
/* 文字居中 */
text-align: center;
}
</style>
</head>
<body>
<div>稳住<strong>我们能赢</strong>
<input type="text" />
</div>
</body>
</html>
插入图片移动位置靠盒模型padding margin;背景图片只能通过background-position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.pic,
.bg {
height: 500px;
width: 500px;
border: 1px solid #FF0;
}
.pic img {
/* 插入图片移动位置只能靠margin,padding来实现(padding会撑大盒子) */
margin: 30px;
}
.bg {
/* 背景图片只能通过background-position实现 */
background: pink url(./img/2020.png) no-repeat 30px 30px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="pic">
<img src="./img/tupian.png" alt="图片">
</div>
<div class="bg">背景图片</div>
</body>
</html>