html&css布局实践——IFE task 04（定位和居中问题）

====任务描述====

【原文链接】http://ife.baidu.com/task/detail?taskId=4

任务目标

• 实践HTML/CSS布局方式
• 深入了解position等CSS属性

任务描述

• 实现如 示例图（点击打开） 的效果
• 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

任务注意事项

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

====总结====

1. 怎么样让div垂直居中

#content{

height:200px;

width:400px;

position:absolute;

left:50%;

top:50%;

margin-top: -100px;

margin-left:-200px;

2.怎么样画四分之一圆

圆的画法：先画相应矩形，在用border-radius

{

width:50px;

height:50px;

border-radius:50px 0 0 0;

}

border-radius:50px 0 0 0 

等价于将border-raduis属性分成四个属性来设置，把一个圆分成上左，上右，下右，下左4份 

border-top-left-radius: 

border-top-right-radius: 

border-bottom-right-radius: 

border-bottom-left-radius: