任务目标
- 实践HTML/CSS布局方式
- 深入了解position等CSS属性
任务描述
- 实现 示例图 的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现，错一项扣一分。
参考资料
- HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题
- Centering in CSS: A Complete Guide：完整讨论了不同情况下的居中方案，建议自己思考之后再看答案
- Get HTML & CSS Tips In Your Inbox：有人写了一个作弊工具生成居中代码，但是看着代码你明白为什么吗
定位和居中问题总结
1、 CSS border-radius 属性
border-radius属性用于向元素增加圆角，与元素是否有border无关。
属性值格式：
四个值：第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。
三个值：第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。
两个值：第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。
一个值：应用于四个角。
数值型属性含义：圆角半径长度。
2、 CSS margin 属性
margin属性使用一个语句设置元素的四个margin值。
属性值格式：
四个值：第一个值上边距，第二个值右边距，第三个值下边距，第四个值左边距。
三个值：第一个值上边距，第二个值左边距和右边距，第三个值下边距。
两个值：第一个值上边距和下边距，第二个值左边距和右边距。
一个值：四个边距。
允许使用负值。
属性值：
长度：用px，pt，cm等定义边距长度。
%：用容器元素宽度的百分比定义边距长度。
auto：浏览器计算边距长度。
initial：设置边距长度为默认值。
inherit：继承父元素的边距长度。
负margin属性：
（1）非浮动元素负margin属性
①margin-top/margin-left:元素向上/左被拉进指定值。
②margin-bottom/margin-right:后续元素拖进来，覆盖此元素。
（2）浮动元素负margin属性
①一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。
②若两个元素浮动，且第一个元素设定margin-right为-20px，则第一个元素的宽度缩短-20px，但内容不受影响，导致第一个元素内容和第二个元素内容重叠。
当负margin-right的值为元素实际宽度时，元素被完全覆盖，因为元素宽度等于margin，padding，border，width之和，当负margin值等于余下三者的和时，则元素实际宽度变为0px。
3、 元素垂直水平居中：
（1）、文本或行级文本、图片元素
①对平对齐：text-align:center;
②单行垂直对齐：line-height=父元素高度
③多行文字垂直对齐：vertical-align:middle;
由于vertical-align只在inline-block水平的元素上起作用，此类元素包括：图片，按钮，单复选框，单行/多行文本框等HTML控件，和table-cell。所以需要将此元素设为：{display:table-cell;vertical-align:middle;}父元素设为{display:table;}，即：
<div style=”display:table”>
<div style=”display:table-cell;vertical-align:middle”>文字</div>
</div>
（2）、块级元素
①水平对齐：未设置auto时，margin-left:auto;margin-right:auto;
原因：当元素auto时，子元素将充满容器，margin为0，margin-left和margin-right无效。当width不为auto时，将margin-left和margin-right均设为auto，则左右边距值相等，水平居中。
②垂直居中：用table-cell的vertical-align:middle。见上。
③负margin：
水平：position:absolute;left:50%;margin-left=元素宽度的二分之一。（或使用position:relative;）
垂直：position:absolute;top:50%;margin-top=元素宽度的二分之一。或使用position:relative;）
④元素和容器元素宽度高度均已知，可通过position:absolute;或position:relative;设置元素top和left值实现水平和垂直对齐。
4、 已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务四：定位和居中问题