css写网页盒模型用最简单最经典布局(盒子里上面是图片,下面是文字)
*⚠️ magin:0 auto;和text-aligin:center;在设置子元素定位会发生结果紊乱
以下为测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 600px;
background: skyblue;
margin: 0px auto;
/* overflow: hidden; */
position: relative;
/* text-align: center; */
}
/* .box1{
width: 600px;
height: 100px;
background: pink;
margin: 0px auto;
} */
span{
display: block;
/* margin: 0 auto; */
width: 100%;
text-align: center;
/* width: 140px; */
height: 20px;
line-height: 20px;
font-size: 20px;
color: red;
position: absolute;
background-color: blue;
/* margin-bottom: 0; */
bottom: 0;
/* left: 50%;
margin-left: -70px; */
/* margin-left: 50px; */
}
img{
/* position: absolute; */
display: block;
width: 150px;
height: 150px;
/* right: 0; */
/* display: inline-block; */
/* display: inline; */
/* bottom: 0; */
margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
<span>你懂的点点滴滴</span>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2589349710,30522182&fm=173&app=49&f=JPEG?w=312&h=208&s=49518B44457E81DE5EE8340F000080C2" alt="">
</div>
<div class="box1"></div>
</body>
</html>
输出结果如下所示