今天完成的事情：

一、完成了任务6

二、修改了一个坏习惯

position: fixed;
top:0;
width: 100%;

这种写法只适用于父元素没有左右内边距的情况，如果父元素有边距，会发生位移

position: fixed;
top: 0;
left: 0;
right: 0;

三、学会了用css写实心的小箭头

原理是当width和height为0时，border呈现出三角型

width: 0;
height: 0;
border: 0.5rem solid;
border-color: #6ae5ed transparent transparent transparent;

transparent=透明，只设置一个方向border的颜色，就可以呈现出小箭头

四、利用hover制作了鼠标悬停变色的按钮，原理很简单

button:hover {
       background-color: #68cdd5;
}

明日计划：

继续学习任务七

遇到的问题：

button元素的大小问题

在绘制的时候，发现button最小的宽度是16px，而高度则没有限制，是跟默认字体大小挂钩的？能不能突破限制？

button {
    height: 16px;
    width: 16px;
    border: none;
    border-radius: 8px;
    background-color: #eff0f4;
    transform: scale(0.6);
    outline: none;
}

最后只能用scale来缩放

收获：

学了一个新元素：伪元素 before/after

.box:after {
       content: '';
    position: absolute;
    right: -0.5rem;
    top: 50%;
    border: 10px solid;
    border-color:transparent transparent transparent #eea236;
    width:0;
    height:0;
}

content代表引入内容，content必须有值，至少是空。

这个箭头就是用after添加的

但是理解还不够深刻，不知道具体引入的位置是在哪里

https://jihpeng.github.io/Task/t7/main.html

https://jihpeng.github.io/Task/t7/vote.html