小薇课堂Task_4
在做这个任务前课参考这篇文章
任务目标
- 实践
HTML/CSS
布局方式 - 深入了解
position
等CSS
属性
任务描述
- 实现如 示例图(点击打开) 的效果
- 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
- 动手试一试各种情况的组合,父元素和子元素分别取不同的
position
值。思考position
属性各种取值的真正含义,尤其是absolute
究竟是相对谁而言的。 - 注意测试不同情况,尤其是极端情况下的效果。
- 调节浏览器宽度,灰色元素始终水平居中。
- 调节浏览器高度,灰色元素始终垂直居中。
- 调节浏览器高度和宽度,黄色扇形的定位始终准确。
源码与效果图
效果图
源码
总结
- 用到了一种水平居中的方式
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
- 浏览器兼容性:
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
- 优点
- 支持跨浏览器,包括
IE8-IE10
. - 无需其他特殊标记,CSS代码量少
- 支持百分比%属性值和
min-/max-
属性 - 只用这一个类可实现任何内容块居中
- 不论是否设置
padding
都可居中(在不使用box-sizing
属性的前提下) - 内容块可以被重绘。
- 完美支持图片居中。
- 支持跨浏览器,包括
- 缺点:
- 必须声明高度(查看可变高度
Variable Height
)。 - 建议设置
overflow:auto
来防止内容越界溢出。(查看溢出Overflow
)。 - 在
Windows Phone
设备上不起作用。
- 必须声明高度(查看可变高度
position
relative
属性,相对于自己之前在标准流中的位置移动absolute
属性,它不是相对于视窗而是相对于最近的“positioned”
祖先元素。如果绝对定位(position
属性的值为absolute
)的元素没有“positioned”
祖先元素,那么它是相对于文档的body
元素