本帖最后由 clearwater 于 2019-12-22 20:29 编辑
在看某马的前端教程，遇到一个不同的地方，请大神赐教一下。
这小节讲的是Position。
老师讲解一共有两个大盒子，up 盒子，和 down 盒子。 而在up盒子里面，左边和右边各方一个小盒子，当箭头。
我现在听不明白的不是position, 而是为什么以下代码中左边的小盒子（purple) 在实际的效果中，并没有显示出来，要到chrome的检查中查看才能出来。
这里的up 盒子， down 盒子， arr-l盒子，此时都是标准流。标准流，块级的元素是要各占一行的，为什么这里这个小盒子在实际中不见了，原因是什么。
我的意思是：
一行：图片
二行：arr-l
三行：down盒子
链接: https://pan.baidu.com/s/1O8L541WhT77Rx1a9vAUqlA 提取码: iz3b （这是相关的视频。如果您看不懂，我在说什么）
以下是视频的截图和我自己跟着视频的代码。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up {
width: 1000px;
height: 90px;
background-color: pink;
}
.down {
width: 1000px;
height: 150px;
background-color: #000;
}
.arr-l {
width: 40px;
height: 40px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up">
<img src="img.jpg" alt="">
<div class="arr-l"></div>
</div>
<div class="down"></div>
</body>
</html> | 
发表于 2019-12-22 19:47
|
发表于 2019-12-22 20:00
，楼主换个浏览器试试吧，或者清理下浏览器缓存。