一、这周完成的事

本来上周要把简书个人首页写好，但是由于还不是很熟练，一直到这周三才算是写好，算是我写的第二个页面了吧，现在还是比较害怕写页面的，因为还是有很多东西不了解，但是鲍老师鼓励我还要多写几个页面，做的熟练 不害怕写页面的地步，下周鲍老师让我再写个淘宝首页。

写的个人简书首页

这周四到周六还接触了css3 动画，我参考 鲍老师给的页面，自己也写了一个照片墙。

自己写的照片墙

二、知识点总结

1、子div在父div 水平居中

.child_div {
  width: 200px;
  margin: 0 auto;
}

说明：首先给设置一个宽度，然后设置 margin : 0 auto;

2. 子div 在父div 水平垂直居中

.parent-div {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.child-div{
  width: 100px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  background: red;
} 

页面展示效果图

说明：

• 首先父div一定要定位，不管是relative 还是absolute都可以；
• 子div 要设置宽度和高度；
• 子div要设置绝对定位absolute，这样子div就会相对于父div左上角的点进行位移；
• 设置left: 50%; top: 50%; 让子div左上角的点 位移到父div正中心的位置；
• 设置margin-top 、 margin-lef 校准子div的位置；
• 如果父div是body元素的话，则父div不需要用定位（position）。

3. 绝对定位和相对定位

绝对定位（position:absolute）：就是相对于最近一个已经定位的父元素进行定位；
相对定位 (position:relative) ：就是相对于该元素原本的位置进行定位。

4. a 标签总结

平时用 a 标签就是写个链接，在我写简书首页的时候发现它源码里好多用到 a 标签的地方。

所有能点击的元素都应该用 a 标签包裹着。比如：

image.png

它的代码如下：用 a 标签包裹了 span 标签和 i 标签。

image.png

再比如：

image.png

它的源码如下：

image.png

5. "合并单元格"布局

image.png

像上面图片是“合并单元格”式布局，用padding属性 可以解决。

image.png

<style>
       .info{
            height: 100px;
            width: 250px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -125px;
            border: 1px solid salmon;
        }
        .avatar{
            float: left;
            height: 100%;
            width: 80px;
            border: 1px solid darkgoldenrod;
        }
        .name{
            padding-left: 80px;
            height: 50%;
        }
        .example{
            height: 50%;
            padding-left: 80px;
        }
</style>

<div class="info">
   <a class="avatar" href="#">头像</a>
   <div class="name">水水壶</div>
   <div class="example">示例</div>
</div>

image.png

6. display: inline-block 和 float: left 的区别？

共同点：都能把元素变成既有行内元素显示在一行的特性，又有块级元素可以设置宽度和高度的特性。

不同点：

• inline-block 变成行内元素在一行显示，元素之间默认会有间隙， float: left 设置的元素在一行显示，元素之间是紧挨着的，没有空隙；
• inline-block 后面跟块级元素，块级元素是会换行的，float: left 后面跟块级元素，不换行；

7. 列表总结

ul 跟div一样就是个容器元素，本身是没有宽度和高度。他的宽度和高度 是由内部元素决定的

有时候导航条要在一行显示，去除每个li 前面的点 用 li {list-style: none;}。

鼠标移入，li 出现的背景颜色 li:hover{backgound-color:#8888888}。

8. 动画属性

transition 处理两个时间点的样式过渡效果

transform 处理元素 旋转 缩放 位移

<style>
        .donghua {
            height: 100px;
            width: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top:-50px;
            margin-left: -50px;
            border: 1px solid darkcyan;
            transition: all 2s;
        }
        .donghua:hover{
            transform: scale(1.2) rotate(45deg);
        }
</style>

<div class="donghua"></div>