第一周的学习笔记

来北京之后第一周，老师按照案例给我们讲了一些知识点，因为之前自学的时候学的都是很入门的一些东西，所以拿笔记来记录一下目前还不太能灵活运用的东西吧~

一、position

position:relative;

position:absolute;

1.父（relative）   子（absolute）

这周用的比较多的就是以父元素为参考（relative），用top和left来调整子元素的位置（absolute）。

.box{
            width: 480px;
            height: 360px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
.box .topic{
            width: 130px;
            height: 35px;
            color:white;
            position: absolute;
            top: 55px;
            left: 52px;
        }

示例中的父元素就是.box，子元素.topic以.box的位置为参考

.box（黄）和.topic（红）的位置类似于下图。

 2.兄（relative）   弟（relative）

在某天备受折磨的画完了八个表情包之后，我的所有的小黄豆表情的盒子都是独立成行，于是周末我在整理这份作业的时候想把它们排成两排，此时就用到了这种兄弟关系。

.face1{ 
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #f2de68;
    position: relative;
}

.face2{ 
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #f2de68;
    position: relative;
    top: -150px;
    left: 200px;
}

示例中的.face1和.face2是两个小黄豆的脸，以黄豆1作为参考，本来应该在它正下方的黄豆2通过相对位置的调整，位置到了黄豆1的右边。他们俩的位置关系就像下面的示例图：

 二、transform:rotate(ndeg)

这个东西可以让写的盒子旋转，比如，可以绕自身中点旋转：

transform: rotate(15deg);

transform-origin: center;//绕自身中心顺时针旋转15度

下面记录下transform-origin的属性：

语法：transform-origin: x-axis y-axis z-axis;