1. 1. 任务介绍
  2. 2. 题目解析
  3. 3. 实现效果及代码
Table of Contents ▼

ife前端任务-定位和居中

任务介绍

任务目标

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

任务描述

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

任务注意事项

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

题目解析

此题注意:

  • 水平居中和垂直居中的各种实现方式和应用场景,具体参考CSS居中完全指南
  • 理解border-radius的四个属性( border-top-left-radius, border-top-right-radius, border-bottom-right-radius 以及 border-bottom-left-radius)及取值。参考MDN 上border-radius

实现效果及代码