百度前端学院任务四——定位和居中

任务注意事项：

• 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的 解决方案。
• 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
• 注意测试不同情况，尤其是极端情况下的效果。
• 调节浏览器宽度，灰色元素始终水平居中。
• 调节浏览器高度，灰色元素始终垂直居中。
• 调节浏览器高度和宽度，黄色扇形的定位始终准确。

在之前的一篇博客里，我有总结过如何使div垂直居中，其中一种方法就是使用的position定位。给父级原素设置：position：relative，给要垂直居中的子元素设置：position：absolute，top：50%，margin-top：-1/2*height（大概就是这样的）。
所以看到这个任务我先想到的就是这样做，但是这里不需要给父元素设置position：relative，下面将详细介绍：
首先看效果：https://sunyueru.github.io/IFE/task_04/task_04.html
代码：

 <div class="content">
        <div class="left_top"></div>
        <div class="right_bottom"></div>
   </div>

样式：

.content{
    /*相对于谁？*/
    position: absolute;
    top:50%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: #ccc;
}
.left_top{
    /*相对于谁*/
    position: absolute;
    top:0;
    left: 0;
    background-color: yellow;
    width: 50px;
    height: 50px;
    border-radius: 0 0 50px 0;
}
.right_bottom{
    position: absolute;
    bottom:0;
    right: 0;
    background-color: yellow;
    width: 50px;
    height: 50px;
    border-radius:50px 0 0 0;
}

这里三个div都是设置的position：absolute。那么他们的参考分别是谁呢？这是问题的关键。看到有的资料是这样说的：position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。
也就是说，content是相对于body定位的，但是left_top和right_bottom都是相对于content定位的。这样才能使得content始终在页面中间（水平，垂直），因为他是相对于body定位。两个扇形则始终在content的左上角和右下角（因为他们是相对于content定位的）