定位和居中问题

ife任务四

任务目标：

• 实践HTML/CSS布局方式

任务描述：

• 实现效果如图：

Paste_Image.png

• 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角

任务要求：

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

---

HTML

CSS

body {
    padding:0;
    margin:0;   
}
.main {
    position: absolute;
    width: 400px;
    height: 200px;
    background-color: #ccc;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -200px;
}
.top-left {
    height:50px;
    width:50px;
    border-radius:0 0 50px 0;
    position:absolute;
    background-color:#fc0;
}
.bottom-right{
    
    height:50px;
    width:50px;
    border-radius:50px 0 0 0;
    position:absolute;
    right:0;
    bottom:0;
    background-color:#fc0;
}

要点整理：

I.关于定位（position）

前面提到“正常流动”导致浏览器按照元素在HTML源代码中出现的顺序渲染他们。使用CSS进行网页布局时，可以对元素的位置进行跟多的控制，这是用position属性实现的。

position属性

值	用途
static	默认值；元素按照正常流动方式渲染
fixed	元素位置固定，网页滚动时位置不变
relative	元素位置相对于正常流动时的位置
absolute	元素脱离正常流动，准确配置元素位置

相对定位

相对定位用于小幅修改某个元素的位置。换言之，相对于“正常流动”应该出项的位置稍微移动一下位置。但是，“正常流动”的区域仍会为元素保留，其他元素围绕这个保留区域流动，使用position:reative;属性，再联通left,rigth,top和bottom等便宜属性，即可实现相对定位功能。

绝对定位

使用绝对定位指定元素相对于其容器元素（要求是非静态元素）的位置。此时元素将脱离正常流动。如果没有非静态父元素，则相对于网页主体指定绝对位置。