I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

定位和居中问题

任务描述:
灰色矩形元素水平垂直居中,有两个四分之一黄色圆位于其左上角和右上角。
调节浏览器宽度或者高度,灰色元素始终居中,并且黄色扇形的定位始终准确。

点击我查看代码
点击我查看Demo

学习笔记:
1、实现子元素在父元素中的水平和垂直居中。父元素和子元素需要设置宽度和高度,父元素相对定位,子元素绝对定位并且设置magin:auto和top:0;left:0;right:0;bottom:0;
2、经常会使用到用border-radius来设置元素边框圆角。
3、可以通过设置相对定位和绝对定位同时设置top或right或left或bottom来进行定位。
4、可以通过float,设置margin-left等来进行定位。position:absolate和float会使元素脱离正常的文档流,两者结合通过设置top等,也可以进行定位。