                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

margin到底指什么，是相对于谁设置呢？

1、为什么我给middle设置了margin-top后，left和right两部分也跟着下移了呢？

2、当接着给它们的父容器设置相同的margin-top值后，这三部分并没有继续下移，

感谢各位大佬！

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

body{margin: 0;padding: 0;}

.main{width: 900px;margin: 0 auto;position: relative;}

.left{width: 200px;height: 500px;background-color: #f00;position: absolute;left: 0;top: 0;}

.right{width: 200px;height: 500px;background-color: #0f0;position: absolute;right: 0;top: 0;}

.middle{height: 500px;background: #00f;margin:0 200px 0 200px;}

</style>

</head>

<body>

<div class="middle">：Pr，是 Premiere的简称，由Adobe公司开发是一款常用的视频编辑软件，由Adobe公司推出。现在常用的版本有CS4、CS5、CS6、CC 2014、CC 2015、CC 2017、CC 2018 CC2019以及CC2020版本。Adobe Premiere是一款编辑画面质量比较好的软件，有较好的兼容性，且可以与Adobe公司推出的其他软件相互协作。目：Pr，是 Premiere的简称，由Adobe公司开发是一款常用的视频编辑软件，由Adobe公司推出。现在常用的版本有CS4、CS5、CS6、CC 2014、CC 2015、CC 2017、CC 2018 CC2019以及CC2020版本。Adobe Premiere是一款编辑画面质量比较好的软件，有较好的兼容性，且可以与Adobe公司推出的其他软件相互协作。目</div>

</div>

</body>

</html>