百度前端学院_小薇课堂_task_4

小薇课堂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 元素

CSS网页布局方式–浮动流、定位流

百度前端学院_task_1

百度前端学院_task_2

百度前端学院_task_3