用CSS画机器人

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

复习CSS，敲一敲小demo

本文利用的CSS知识点有：

• CSS伪元素 (::before 伪元素,::after 伪元素)
• 子绝父相 (什么是子绝父相？就是子盒子用绝对定位position：absolute;，父盒子用相对定位position：relative;；为什么要用子绝父相呢？因为有时候有一些小图标啊什么的需要放在特殊地方，这时候用浮动是解决不了的，此时就需要子绝父相了。通过父盒子占位，子盒子放在想要的位置，就很妙了)

好了，开始盘他！

机器人骨架：

    <div class="box">
        <header></header>
        <div class="rbody">
            <div class="lfoot"></div>
            <div class="rfoot"></div>
        </div>
    </div>

给咱们可爱的机器人穿上衣服：

        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 400px;
            height: 600px;
            margin: 40px auto 0 auto;
            /*解决margin重合问题*/
            overflow: hidden;
        }
        header {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: teal;
            margin: 40px auto 0 auto;
            /*脑壳设置*/
            border-radius: 100px 100px 0 0;
        }

        header::before {
        	/* content必须要有，不论有没有值
        	伪元素为行内元素，要先转化成块级元素才可以设置宽高哈*/
            content: "";
            position: absolute;
            bottom: 30px;
            left: 50px;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
        }
        header::after {
            content: "";
            position: absolute;
            bottom: 30px;
            right: 50px;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
        }
        .rbody {
            position: relative;
            width: 200px;
            height: 220px;
            background-color: teal;
            margin: 6px auto 0 auto;
        }
        .rbody::before {
            position: absolute;
            top: 20px;
            left: -30px;
            content: "";
            width: 20px;
            height: 140px;
            background-color: teal;
            border-radius: 10px;
        }
        .rbody::after {
            position: absolute;
            top: 20px;
            right: -30px;
            content: "";
            width: 20px;
            height: 140px;
            background-color: teal;
            border-radius: 10px;
        }
        .lfoot {
            position: absolute;
            bottom: -90px;
            left: 45px;
            width: 20px;
            height: 90px;
            background-color: teal;
            border-radius: 0 0 10px 10px;
        }
        .rfoot {
            position: absolute;
            bottom: -90px;
            right: 45px;
            width: 20px;
            height: 90px;
            background-color: teal;
            border-radius: 0 0 10px 10px;
        }

机器人做好啦，让我们来康康效果吧