web----响应式----百分比布局

没有定位的情况：

1.宽高设置百分比相对于父元素的宽高           

2.margin和padding相对于父元素的宽度

有定位情况：

1.宽高设置百分比相对于定位父元素的宽高

2.left和right相对于定位父元素的宽度  top和bottom相对于定位父元素的高度

vw和vh相对于浏览器可视窗口 和父元素没有关系（%看父元素大小 vh和%作用一样）

 <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            width: 100%;

            height: 50px;

        }

        .grandfather{

            width: 800px;

            height: 900px;

            background-color: black;

        }

        .father{

            width: 500px;

            height: 500px;

            background-color: pink;

            position: relative;

        }

        .father div{