盒子模型实例——花样多边 练习

一.利用绝对布局实现居中操作

绝对布局absolute是使当前元素相对于相对于开启了定位（除默认定位）的父容器，直到向外延申到body。

二.花样多边CSS设计部分

body {
    margin: 0px;
    padding: 0px;
}

#box1 {
    width: 600px;
    height: 600px;
    border: 2px dotted black;
    position: relative;
    left: 600px;
}

#box2 {
    width: 500px;
    height: 500px;
    border: 6px solid grey;
    position: absolute;
    top: 50px;
    left: 50px;
}

#box3 {
    width: 400px;
    height: 400px;
    border: 2px solid rgb(129, 8, 8);
    background-color: rgb(129, 8, 8);
    position: absolute;
    top: 50px;
    left: 50px;
}

#box4 {
    width: 300px;
    height: 300px;
    border: 2px dashed white;
    p