1.完成任务五了。

2.

明天计划的事情：

1.任务六做一半

2.

1.左边定宽，右边自适应，为什么用

vertical-align: middle;

这个，在任务五页面达不到效果。新开一个页面，倒是可以达到左边随着右边加宽而居中。原因是左边无法给宽度，因为给百分之百会超出，给少了，会掉到下面一行。

收获：

第一：左边定宽，右边自适应，用了很多种方法实验，一个是左边浮动，右边宽度100%；但是不行，一旦缩小页面，右边的就会掉下来。

还有一个是display：flex。右边。right{flex：1；}

最终采取的方法是，左边绝对定位，要想让字体垂直居中，加一个top。本来应该是50%。但是由于框太窄，字体本身有高度，所以变为35%。这样一点字体看着就在中间，很多字体还是在靠上的地方，最好改为50%。

昨天我把线新做了个伪类，不仅代码量多，还麻烦，今天用哪个border-bottom，solid，black，就可以了。然后后面的几条线左边有空缺，就做了个95%。marget-left：20px.

右边要自适应。就给一个display：inline-block。给好padding，margin。就可以了。说起来特别简单，但是足足卡了我一天。

网上说的一些自适应，左边定宽，估计不是不行，而是适用特定情况，不适用我这种情况。

还有绝对定位，首先找父级定位，如果父级没有定位，那么就会找body定位，也就是你这么一块，或者整个页面。这是最关键的，也需要理解的。

.six {
     
position: absolute;  这个不定位，左边的定位无从谈起，会跑到上面去
     width: 95%;   这是宽度，因为左边留了一点空袭。
     margin-left: 20px;  距左边的距离
     min-height: 100px;  之所以要设置最小宽度，是因为页面上展示，最小和上面一系列一样，大不封顶。
     border-bottom: 1px solid #696969; 下面的黑线，1是宽度，实线，颜色。
 }

.aside {
    position: absolute;   定位。绝对定位，先寻找父级。
    /*display: inline-block;*/
    font-size: 29px;   字体。
    margin-left: 20px;  左边距离
    padding-right: 35px;  内边距计算在总宽度之内
    /*height: 38px;*/
    top: 35%;  纵向高度，刚才解释过
    border-right: solid #696969;   右边的线，好看。
    color: #9C9C9C;
}

.content {
    display: inline-block;  要给一个inline-block
    margin-left: 220px;  这个距左边的距离，是因为左边绝对定位了，浮起来了，空间让出来了，所以要给的边框外空间把定位的宽度算出来。
    margin-top: 36px;  
    margin-bottom: 36px;
    font-size: 20px;
    /*vertical-align: middle;*/  注释掉的是泽平大佬教我的，就是用来左边垂直居中的。不过要两边都加display才成。不过用在项目上不合适，用在我的满江红上倒是很合适。
}

二。头部，你滚动滚动条，头部会盖住页面的内容，这种方式通过等级实现：

.headers {
    background: #68cdd5;
    width: 100%;
    height: 88px;
    color: white;
    text-align: center;
    line-height: 88px;
    position: fixed;
    z-index: 1;
    border: solid #68cdd5;
}

来一个position：fiexd；

再来一个z-index：1；代表等级。如果是负数，代表优先级低。默认等于0.

三。卡了我一个上午的图片，为什么拉伸不怎么变形，一开始用的

.ups {
    width: 100%;
    height: 328px;
    background-image: url("img/han.png");
    background-repeat: no-repeat;
    background-size: cover;
}

background-size：100% 100%；

后来换成了cover。才好了。

宽度也试过，给了像素值，就缩不动了。

那个contain，填不满空间所需要的内容。

进度：CSS任务六

任务代码地址：https://kewangbuji.github.io/cssTask/task5/task5.html