一、任务目标：
- 实践HTML/CSS布局方式
- 深入了解position等CSS属性
二、任务描述
- 实现如图效果（见文章最后）
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角
三、任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案
- 动手试一试各种情况的组合，父元素和子元素分别取不同的position值。思考position属性各种取值的真正含义，尤其是absolute究竟是相对谁而言的
- 注意测试不同情况，尤其是极端情况下的效果
- 调节浏览器宽度，灰色元素始终水平居中
- 调节浏览器高度，灰色计始终垂直居中
- 调节浏览器高度和宽度，黄色扇形的定位始终准确
- 其他效果图中给出的标识均被正确地实现
代码实现：
<!DOCTYPE html> <html> <head> <title>定位和居中问题</title> <meta charset="utf-8"> <style type="text/css"> body { padding:0; margin:0; } .container { background:#ccc; width:400px; height:200px; position:absolute; left:50%; top:50%; margin-left:-200px margin-top:-100px; } .round1,.round2 { width:50px; height:50px; background:#fc0; } .round1 { position:absolute; left:0; top:0; border-radius:0 0 50px 0; } .round2 { position:absolute; right:0; bottom:0; border-radius:50px 0 0 0; } </style> <body> <div class="container"> <div class="round1"></div> <div class="round2"></div> </div> </body> </html>
注意：四分之一圆的实现方式，其中一个角的radious值等于正方形块的边长，其余值为0。
这种实现垂直的方式，需要知道灰色块的高度和宽度，所以不能实现灰色块高度随内容动态变化的要求。可以做如下更改：
把margin-left、margin-right两条语句改成如下，这样可以不设置container的height和width值，让其高度宽度随里面面容动态变化，灰色块也仍然是居中的。
transform:translate(-50%,-50%)
四、提交作业
代码地址：https://github.com/zhoujie1986/IFE/tree/master/task4